"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Calendar, AlertCircle } from "lucide-react";
import { notifications } from "@/lib/notifications";

interface AppointmentModalFromChatProps {
  open: boolean;
  onClose: () => void;
  onSuccess?: () => void;
}

export const AppointmentModalFromChat = ({
  open,
  onClose,
  onSuccess,
}: AppointmentModalFromChatProps) => {
  const [motivoConsulta, setMotivoConsulta] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!motivoConsulta.trim()) {
      notifications.validation.requiredField("motivo de consulta");
      return;
    }

    setIsSubmitting(true);
    try {
      const response = await fetch("/api/appointments", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          motivoConsulta: motivoConsulta.trim(),
          // No enviamos fechaSolicitada - el doctor la asignará
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "Error al crear cita");
      }

      notifications.appointments.created();

      setMotivoConsulta("");
      onClose();
      onSuccess?.();
    } catch (error) {
      const message = error instanceof Error ? error.message : undefined;
      notifications.appointments.createError(message);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    if (!isSubmitting) {
      setMotivoConsulta("");
      onClose();
    }
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <Calendar className="h-5 w-5 text-primary" />
            <DialogTitle>Solicitar Cita Médica</DialogTitle>
          </div>
          <DialogDescription className="pt-2">
            Describe el motivo de tu consulta. Un médico revisará tu solicitud y
            te asignará una fecha y hora para la cita telemática.
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="motivo-consulta">
              Motivo de la consulta <span className="text-destructive">*</span>
            </Label>
            <Textarea
              id="motivo-consulta"
              placeholder="Ejemplo: Necesito consultar sobre los síntomas que mencioné en el chat..."
              value={motivoConsulta}
              onChange={(e) => setMotivoConsulta(e.target.value)}
              rows={5}
              required
              disabled={isSubmitting}
              className="resize-none"
            />
            <p className="text-xs text-muted-foreground">
              {motivoConsulta.length}/500 caracteres
            </p>
          </div>

          <div className="flex items-start gap-2 p-3 bg-muted rounded-lg">
            <AlertCircle className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
            <p className="text-xs text-muted-foreground">
              Tu solicitud quedará pendiente hasta que un médico la revise y asigne
              una fecha. Recibirás una notificación cuando sea aprobada.
            </p>
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={handleClose}
              disabled={isSubmitting}
            >
              Cancelar
            </Button>
            <Button
              type="submit"
              disabled={!motivoConsulta.trim() || isSubmitting}
            >
              {isSubmitting ? "Enviando..." : "Solicitar cita"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};