"use client";

import { useActionState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
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 { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { createCustomer, updateCustomer, type ActionResult } from "@/actions/customers";
import { toast } from "sonner";
import type { Customer } from "@/lib/types";

const initial: ActionResult = { ok: false, error: "" };

interface CustomerFormProps {
  customer?: Customer;
}

export function CustomerForm({ customer }: CustomerFormProps) {
  const router = useRouter();
  const isEdit = !!customer;
  const boundAction = isEdit ? updateCustomer.bind(null, customer!.id) : createCustomer;
  const [state, formAction, pending] = useActionState(boundAction, initial);
  const formRef = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (state.ok) {
      toast.success(isEdit ? "Customer updated" : "Customer created");
      if (!isEdit) {
        formRef.current?.reset();
      } else {
        router.push("/customers");
      }
    } else if (state.error) { toast.error(state.error); }
  }, [state, isEdit, router]);

  return (
    <Card className="max-w-2xl">
      <CardHeader>
        <CardTitle>{isEdit ? "Edit customer" : "Add a customer"}</CardTitle>
      </CardHeader>
      <form ref={formRef} action={formAction}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">Customer name *</Label>
            <Input id="name" name="name" required defaultValue={customer?.name ?? ""} autoFocus />
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="contact_number">Contact number</Label>
              <Input id="contact_number" name="contact_number" defaultValue={customer?.contact_number ?? ""} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" name="email" type="email" defaultValue={customer?.email ?? ""} />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="address">Address</Label>
            <Textarea id="address" name="address" rows={3} defaultValue={customer?.address ?? ""} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="vat_number">VAT number</Label>
            <Input id="vat_number" name="vat_number" defaultValue={customer?.vat_number ?? ""} />
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button type="button" variant="ghost" onClick={() => router.back()}>
            Cancel
          </Button>
          <Button type="submit" disabled={pending}>
            {pending ? "Saving…" : isEdit ? "Update customer" : "Create customer"}
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}