"use client";

import { useActionState, useEffect, useRef } from "react";
import { Loader2, Plus } 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { createProstheticAction } from "@/lib/appwrite/prosthetic-actions";
import {
  PROSTHETIC_TYPE_OPTIONS,
  initialProstheticFormState,
} from "@/lib/appwrite/prosthetic-types";

export function ProstheticForm({ defaultCurrency }: { defaultCurrency: string }) {
  const [state, formAction, isPending] = useActionState(
    createProstheticAction,
    initialProstheticFormState,
  );
  const formRef = useRef<HTMLFormElement>(null);

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

  return (
    <form ref={formRef} action={formAction} className="grid gap-4">
      <div className="grid gap-2">
        <Label htmlFor="name">Protez Adı *</Label>
        <Input id="name" name="name" required placeholder="Örn. Premium Zirkonyum" maxLength={255} />
        {state.fieldErrors?.name && (
          <p className="text-destructive text-xs">{state.fieldErrors.name}</p>
        )}
      </div>

      <div className="grid gap-2">
        <Label htmlFor="type">Protez Türü *</Label>
        <Select name="type" required>
          <SelectTrigger id="type">
            <SelectValue placeholder="Tür seçin" />
          </SelectTrigger>
          <SelectContent>
            {PROSTHETIC_TYPE_OPTIONS.map((o) => (
              <SelectItem key={o.value} value={o.value}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {state.fieldErrors?.type && (
          <p className="text-destructive text-xs">{state.fieldErrors.type}</p>
        )}
      </div>

      <div className="grid gap-2 grid-cols-[minmax(0,1fr)_100px]">
        <div className="grid gap-2">
          <Label htmlFor="unitPrice">Birim Fiyatı *</Label>
          <Input
            id="unitPrice"
            name="unitPrice"
            type="number"
            step="0.01"
            min="0"
            required
            placeholder="0.00"
            inputMode="decimal"
          />
          {state.fieldErrors?.unitPrice && (
            <p className="text-destructive text-xs">{state.fieldErrors.unitPrice}</p>
          )}
        </div>
        <div className="grid gap-2">
          <Label htmlFor="currency">Para birimi</Label>
          <Input
            id="currency"
            name="currency"
            defaultValue={defaultCurrency}
            maxLength={8}
            style={{ textTransform: "uppercase" }}
          />
        </div>
      </div>

      <Button type="submit" disabled={isPending}>
        {isPending ? (
          <>
            <Loader2 className="size-4 animate-spin" />
            Ekleniyor...
          </>
        ) : (
          <>
            <Plus className="size-4" />
            Ürün ekle
          </>
        )}
      </Button>
    </form>
  );
}
