"use client";

import { useActionState, useEffect, useRef } from "react";
import { Loader2, UserPlus } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { createPatientAction } from "@/lib/appwrite/patient-actions";
import { initialPatientFormState } from "@/lib/appwrite/patient-types";

export function PatientForm() {
  const [state, action, pending] = useActionState(
    createPatientAction,
    initialPatientFormState,
  );
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (state.ok) {
      toast.success("Hasta eklendi.");
      formRef.current?.reset();
    } else if (state.error) {
      toast.error(state.error);
    }
  }, [state]);

  return (
    <form ref={formRef} action={action} className="grid gap-4">
      <div className="grid gap-2">
        <Label htmlFor="patientCode">
          Protokol No <span className="text-muted-foreground text-xs">(opsiyonel)</span>
        </Label>
        <Input
          id="patientCode"
          name="patientCode"
          maxLength={50}
          placeholder="Boş bırakırsanız sistem üretir"
          style={{ textTransform: "uppercase" }}
          className="font-mono"
        />
        {state.fieldErrors?.patientCode && (
          <p className="text-destructive text-xs">{state.fieldErrors.patientCode}</p>
        )}
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="grid gap-2">
          <Label htmlFor="firstName">Ad *</Label>
          <Input id="firstName" name="firstName" required maxLength={100} />
          {state.fieldErrors?.firstName && (
            <p className="text-destructive text-xs">{state.fieldErrors.firstName}</p>
          )}
        </div>
        <div className="grid gap-2">
          <Label htmlFor="lastName">Soyad *</Label>
          <Input id="lastName" name="lastName" required maxLength={100} />
          {state.fieldErrors?.lastName && (
            <p className="text-destructive text-xs">{state.fieldErrors.lastName}</p>
          )}
        </div>
      </div>

      <div className="grid gap-2">
        <Label htmlFor="phone">Telefon</Label>
        <Input
          id="phone"
          name="phone"
          type="tel"
          maxLength={30}
          placeholder="+90 555 123 45 67"
          autoComplete="tel"
        />
      </div>

      <div className="grid gap-2">
        <Label htmlFor="dateOfBirth">Doğum Tarihi</Label>
        <Input id="dateOfBirth" name="dateOfBirth" type="date" />
      </div>

      <div className="grid gap-2">
        <Label htmlFor="notes">Notlar</Label>
        <Textarea
          id="notes"
          name="notes"
          rows={3}
          maxLength={2000}
          placeholder="Alerji, anamnez, vs."
        />
      </div>

      <Button type="submit" disabled={pending}>
        {pending ? (
          <>
            <Loader2 className="size-4 animate-spin" />
            Ekleniyor...
          </>
        ) : (
          <>
            <UserPlus className="size-4" />
            Hasta ekle
          </>
        )}
      </Button>
    </form>
  );
}
