"use client";

import { useState, useTransition } from "react";
import { toast } from "sonner";
import { Pencil, Plus } from "lucide-react";
import { createBanking, updateBanking, toggleBankingActive } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import type { BankingDetail } from "@/lib/types";

export function BankingRowToggle({ id, isActive }: { id: string; isActive: boolean }) {
  const [pending, start] = useTransition();
  return (
    <Switch
      checked={isActive}
      disabled={pending}
      onCheckedChange={(next) =>
        start(async () => {
          await toggleBankingActive(id, next);
          toast.success(next ? "Activated" : "Deactivated");
        })
      }
    />
  );
}

export function BankingDialog({ banking }: { banking?: BankingDetail }) {
  const editing = !!banking;
  const [open, setOpen] = useState(false);
  const [pending, startTransition] = useTransition();

  const action = editing ? updateBanking : createBanking;

  function onSubmit(formData: FormData) {
    startTransition(async () => {
      const res = await action(undefined, formData);
      if (res?.ok) {
        toast.success(editing ? "Bank updated" : "Bank created");
        setOpen(false);
      } else if (res?.error) {
        toast.error(res.error);
      }
    });
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {editing ? (
          <Button size="icon" variant="ghost">
            <Pencil className="size-4" />
          </Button>
        ) : (
          <Button>
            <Plus className="size-4" /> Add Bank
          </Button>
        )}
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{editing ? "Edit Bank" : "Add Bank"}</DialogTitle>
        </DialogHeader>
        <form action={onSubmit} className="grid grid-cols-2 gap-4">
          {editing && <input type="hidden" name="id" value={banking.id} />}

          <div className="col-span-2 space-y-2">
            <Label htmlFor="bank_name">Bank name *</Label>
            <Input id="bank_name" name="bank_name" defaultValue={banking?.bank_name} required />
          </div>

          <div className="space-y-2">
            <Label htmlFor="account_name">Account name</Label>
            <Input
              id="account_name"
              name="account_name"
              defaultValue={banking?.account_name ?? ""}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="account_number">Account number</Label>
            <Input
              id="account_number"
              name="account_number"
              defaultValue={banking?.account_number ?? ""}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="ifsc">IFSC</Label>
            <Input id="ifsc" name="ifsc" defaultValue={banking?.ifsc ?? ""} />
          </div>

          <div className="space-y-2">
            <Label htmlFor="branch_name">Branch name</Label>
            <Input
              id="branch_name"
              name="branch_name"
              defaultValue={banking?.branch_name ?? ""}
            />
          </div>

          <div className="col-span-2 flex justify-end">
            <Button type="submit" disabled={pending}>
              {pending ? "Saving…" : editing ? "Save changes" : "Save bank"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}