"use client";

import { AlertTriangle, Clock, Calendar, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { MedicalAlert as MedicalAlertType } from "./types";
import { cn } from "@/lib/utils";

interface MedicalAlertBannerProps {
  alert: MedicalAlertType;
  onSchedule: () => void;
  onDismiss?: () => void;
  isScheduling?: boolean;
}

const alertConfig = {
  RECOMENDADO: {
    icon: Clock,
    title: "Consulta Médica Recomendada",
    description: "Basado en tu consulta, recomendamos agendar una cita con un profesional médico.",
    className: "bg-yellow-50 border-yellow-200",
    iconClassName: "text-yellow-600 bg-yellow-100",
    buttonVariant: "default" as const,
  },
  URGENTE: {
    icon: AlertTriangle,
    title: "Atención Médica Urgente",
    description: "Tu consulta requiere atención médica inmediata. Por favor, agenda una cita lo antes posible.",
    className: "bg-red-50 border-red-200",
    iconClassName: "text-red-600 bg-red-100",
    buttonVariant: "destructive" as const,
  },
};

export const MedicalAlertBanner = ({
  alert,
  onSchedule,
  onDismiss,
  isScheduling,
}: MedicalAlertBannerProps) => {
  // Solo mostrar para alertas médicas
  if (alert === "NO_AGENDAR") return null;

  const config = alertConfig[alert];
  const Icon = config.icon;

  const handleScheduleClick = () => {
    console.log("🎯 [MedicalAlertBanner] Botón 'Agendar Cita' clickeado");
    onSchedule();
  };

  return (
    <div
      className={cn(
        "sticky top-0 z-10 border-b mb-4 p-4 relative",
        config.className
      )}
    >
      {onDismiss && (
        <Button
          variant="ghost"
          size="sm"
          className="absolute top-2 right-2 h-6 w-6 p-0 hover:bg-background/50"
          onClick={onDismiss}
        >
          <X className="w-4 h-4" />
        </Button>
      )}

      <div className="flex items-center gap-4 pr-8">
        <div
          className={cn(
            "w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0",
            config.iconClassName
          )}
        >
          <Icon className="w-5 h-5" />
        </div>

        <div className="flex-1">
          <h3 className="font-semibold text-foreground text-sm">
            {config.title}
          </h3>
          <p className="text-muted-foreground text-xs mt-1">
            {config.description}
          </p>
        </div>

        <Button
          onClick={handleScheduleClick}
          variant={config.buttonVariant}
          size="sm"
          disabled={isScheduling}
          className="flex-shrink-0"
        >
          {isScheduling ? (
            <>
              <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin mr-2"></div>
              Procesando...
            </>
          ) : (
            <>
              <Calendar className="h-4 w-4 mr-2" />
              Agendar Cita Ahora ✨
            </>
          )}
        </Button>
      </div>
    </div>
  );
};