"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useT } from "@/shared/i18n/client";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/presentation/components/ui/dialog";
import type { DonnaCandidate } from "@/domain/entities/donna";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onAdded: () => void;
}

/** Puts a company on the list of the clients who get Donna credit, with a gift of the amount typed (or the computed one). */
export function DonnaAddClientDialog({ open, onOpenChange, onAdded }: Props) {
  const t = useT();
  const repo = useRepositories().donnaRepository;
  const [search, setSearch] = useState("");
  const [picked, setPicked] = useState<DonnaCandidate | null>(null);
  const [amount, setAmount] = useState("");
  const [note, setNote] = useState("");

  const { data: candidates, loading } = useApiQuery(() => repo.getCandidates(search || undefined), {
    enabled: open,
    deps: [open, search],
  });

  const add = useApiMutation(
    () => repo.addClient({ company_id: (picked as DonnaCandidate).id, amount_eur: amount === "" ? null : Number(amount), note: note || null }),
    {
      successMessage: t.donna.add.added,
      onSuccess: () => {
        setPicked(null);
        setAmount("");
        setNote("");
        setSearch("");
        onOpenChange(false);
        onAdded();
      },
    }
  );

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{t.donna.add.title}</DialogTitle>
        </DialogHeader>

        <p className="text-sm text-muted-foreground">{t.donna.add.intro}</p>

        {picked ? (
          <div className="space-y-4">
            <div className="flex items-center justify-between rounded-md border p-3 text-sm">
              <span className="font-medium">{picked.name}</span>
              <Button size="sm" variant="ghost" onClick={() => setPicked(null)}>{t.donna.add.change}</Button>
            </div>
            <label className="block space-y-1 text-sm">
              <span className="font-medium">{t.donna.add.amount}</span>
              <Input type="number" min={0} step="0.01" value={amount} placeholder={t.donna.add.amountPlaceholder} onChange={(e) => setAmount(e.target.value)} />
              <span className="text-xs text-muted-foreground">{t.donna.add.amountHint}</span>
            </label>
            <label className="block space-y-1 text-sm">
              <span className="font-medium">{t.donna.add.note}</span>
              <Input value={note} maxLength={255} onChange={(e) => setNote(e.target.value)} />
            </label>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => onOpenChange(false)}>{t.common.cancel}</Button>
              <Button disabled={add.loading} onClick={() => add.mutate(undefined)}>
                {add.loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {t.donna.add.submit}
              </Button>
            </div>
          </div>
        ) : (
          <div className="space-y-3">
            <Input placeholder={t.donna.searchPlaceholder} value={search} onChange={(e) => setSearch(e.target.value)} autoFocus />
            <div className="max-h-72 overflow-y-auto rounded-md border">
              {loading && !candidates ? (
                <div className="flex justify-center py-6"><Loader2 className="h-4 w-4 animate-spin" /></div>
              ) : (candidates?.length ?? 0) === 0 ? (
                <p className="py-6 text-center text-sm text-muted-foreground">{t.donna.add.none}</p>
              ) : (
                candidates?.map((company) => (
                  <button
                    key={company.id}
                    type="button"
                    className="block w-full border-b px-3 py-2 text-left text-sm last:border-b-0 hover:bg-muted"
                    onClick={() => setPicked(company)}
                  >
                    {company.name}
                  </button>
                ))
              )}
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}