"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  createLoanInquiry,
  updateLoanInquiry,
  type LoanFormInput,
} from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const NONE = "__none__";

const textareaClass =
  "flex min-h-20 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";

interface StatusOption {
  id: string;
  name: string;
}
interface LeadOption {
  id: string;
  full_name: string;
}

export function LoanForm({
  statuses,
  leads,
  defaults,
  inquiryId,
}: {
  statuses: StatusOption[];
  leads: LeadOption[];
  defaults?: Partial<Record<string, unknown>>;
  inquiryId?: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const d = (defaults ?? {}) as Record<string, unknown>;
  const str = (k: string) => (d[k] != null ? String(d[k]) : "");

  const [applicantName, setApplicantName] = useState(str("applicant_name"));
  const [bankName, setBankName] = useState(str("bank_name"));
  const [amount, setAmount] = useState(str("amount"));
  const [currency, setCurrency] = useState(str("currency") || "INR");
  const [statusId, setStatusId] = useState(str("status_id"));
  const [sanctionedDate, setSanctionedDate] = useState(str("sanctioned_date"));
  const [leadId, setLeadId] = useState(str("lead_id"));
  const [notes, setNotes] = useState(str("notes"));

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!applicantName.trim()) {
      toast.error("Applicant name is required");
      return;
    }

    const payload: LoanFormInput = {
      applicant_name: applicantName,
      branch_id: str("branch_id"),
      bank_name: bankName,
      amount,
      currency,
      status_id: statusId,
      sanctioned_date: sanctionedDate,
      lead_id: leadId,
      notes,
    };

    startTransition(async () => {
      const res = inquiryId
        ? await updateLoanInquiry(inquiryId, payload)
        : await createLoanInquiry(payload);
      if (res.error) {
        toast.error(res.error);
        return;
      }
      toast.success(inquiryId ? "Loan inquiry updated" : "Loan inquiry created");
      router.push("/loan-inquiry");
      router.refresh();
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <Card>
        <CardHeader>
          <CardTitle>
            {inquiryId ? "Edit Loan Inquiry" : "New Loan Inquiry"}
          </CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="applicant_name">Applicant name *</Label>
            <Input
              id="applicant_name"
              value={applicantName}
              onChange={(e) => setApplicantName(e.target.value)}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="bank_name">Bank name</Label>
            <Input
              id="bank_name"
              value={bankName}
              onChange={(e) => setBankName(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="amount">Amount</Label>
            <Input
              id="amount"
              type="number"
              step="0.01"
              min="0"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="currency">Currency</Label>
            <Input
              id="currency"
              value={currency}
              onChange={(e) => setCurrency(e.target.value)}
              placeholder="INR"
            />
          </div>

          <div className="space-y-2">
            <Label>Status</Label>
            <Select
              value={statusId || NONE}
              onValueChange={(v) => setStatusId(v === NONE ? "" : v)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>None</SelectItem>
                {statuses.map((s) => (
                  <SelectItem key={s.id} value={s.id}>
                    {s.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="sanctioned_date">Sanctioned date</Label>
            <Input
              id="sanctioned_date"
              type="date"
              value={sanctionedDate}
              onChange={(e) => setSanctionedDate(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label>Linked lead</Label>
            <Select
              value={leadId || NONE}
              onValueChange={(v) => setLeadId(v === NONE ? "" : v)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select lead" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NONE}>None</SelectItem>
                {leads.map((l) => (
                  <SelectItem key={l.id} value={l.id}>
                    {l.full_name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="notes">Notes</Label>
            <textarea
              id="notes"
              className={textareaClass}
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
            />
          </div>

          <div className="flex justify-end gap-2 sm:col-span-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/loan-inquiry")}
              disabled={pending}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={pending}>
              {pending ? "Saving…" : "Save"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}