"use client";
import { useState } from "react";
import { Panel } from "@/components/shared/page";
import { Field, SelectField } from "@/components/shared/field";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { currency } from "@/lib/format";
import type { Deduction } from "./model";
export function Deductions({
  deductions,
  onChange,
  readonly = false,
}: {
  deductions: Deduction[];
  onChange: (rows: Deduction[]) => void;
  readonly?: boolean;
}) {
  const [draft, setDraft] = useState<Deduction | null>(null),
    [error, setError] = useState(""),
    [deleting, setDeleting] = useState<Deduction | null>(null);
  return (
    <>
      <Panel
        title="Contract Deductions"
        description="Fee components deducted from gross revenue before net revenue sharing."
      >
        {!readonly && (
          <div className="flex justify-end p-5">
            <Button
              type="button"
              onClick={() => {
                setError("");
                setDraft({
                  id: "",
                  name: "Service Fee",
                  type: "PERCENTAGE",
                  value: 6,
                });
              }}
            >
              Add Deduction
            </Button>
          </div>
        )}
        <div className="overflow-x-auto">
          <table className="data-table">
            <thead>
              <tr>
                <th>Fee Component</th>
                <th>Type</th>
                <th>Value</th>
                {!readonly && <th>Actions</th>}
              </tr>
            </thead>
            <tbody>
              {deductions.map((row) => (
                <tr key={row.id}>
                  <td>{row.name}</td>
                  <td>{row.type}</td>
                  <td>
                    {row.type === "PERCENTAGE"
                      ? `${row.value}%`
                      : currency(row.value)}
                  </td>
                  {!readonly && (
                    <td>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => setDeleting(row)}
                      >
                        Delete
                      </Button>
                    </td>
                  )}
                </tr>
              ))}
              {!deductions.length && (
                <tr>
                  <td
                    colSpan={4}
                    className="py-8 text-center text-muted-foreground"
                  >
                    No deductions configured.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Panel>
      <Dialog
        open={!!draft}
        onOpenChange={(open) => {
          if (!open) setDraft(null);
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add Deduction</DialogTitle>
            <DialogDescription>
              Select a fee component for this contract.
            </DialogDescription>
          </DialogHeader>
          {draft && (
            <form
              onSubmit={(event) => {
                event.preventDefault();
                if (deductions.some((row) => row.name === draft.name)) {
                  setError("This fee component is already attached.");
                  return;
                }
                if (
                  !Number.isFinite(draft.value) ||
                  draft.value < 0 ||
                  (draft.type === "PERCENTAGE" && draft.value > 100)
                ) {
                  setError(
                    "Enter a valid non-negative fee amount or percentage.",
                  );
                  return;
                }
                onChange([
                  ...deductions,
                  { ...draft, id: crypto.randomUUID() },
                ]);
                setDraft(null);
              }}
            >
              <div className="grid gap-4">
                <SelectField
                  label="Deduction Fee Component"
                  value={draft.name}
                  options={[
                    "Service Fee",
                    "Electrical Bill",
                    "Maintenance Fee",
                    "Payment Processing Fee",
                  ]}
                  onChange={(event) =>
                    setDraft({ ...draft, name: event.target.value })
                  }
                />
                <SelectField
                  label="Fee Type"
                  value={draft.type}
                  options={["PERCENTAGE", "FIXED"]}
                  onChange={(event) =>
                    setDraft({
                      ...draft,
                      type: event.target.value as Deduction["type"],
                    })
                  }
                />
                <Field
                  label={
                    draft.type === "PERCENTAGE" ? "Percentage" : "Amount (IDR)"
                  }
                  type="number"
                  required
                  min={0}
                  max={draft.type === "PERCENTAGE" ? 100 : undefined}
                  step="0.01"
                  value={draft.value}
                  onChange={(event) =>
                    setDraft({ ...draft, value: Number(event.target.value) })
                  }
                />
              </div>
              {error && (
                <p role="alert" className="mt-4 text-sm text-destructive">
                  {error}
                </p>
              )}
              <DialogFooter className="mt-6">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setDraft(null)}
                >
                  Cancel
                </Button>
                <Button>Add Deduction</Button>
              </DialogFooter>
            </form>
          )}
        </DialogContent>
      </Dialog>
      <Dialog
        open={!!deleting}
        onOpenChange={(open) => {
          if (!open) setDeleting(null);
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Deduction</DialogTitle>
            <DialogDescription>
              Remove {deleting?.name} from this local contract?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleting(null)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                onChange(deductions.filter((row) => row.id !== deleting?.id));
                setDeleting(null);
              }}
            >
              Delete Preview
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}