"use client";

import { useState, useTransition } from "react";
import {
  Archive,
  ArchiveRestore,
  Building2,
  Loader2,
  MoreHorizontal,
  Pencil,
  Plus,
  Trash2,
} from "lucide-react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  archiveBankAccountAction,
  deleteBankAccountAction,
} from "@/lib/appwrite/bank-account-actions";
import { formatTRY } from "@/lib/format";
import { cn } from "@/lib/utils";

import { BankFormSheet } from "./bank-form-sheet";
import type { BankAccountRow } from "./types";

type Props = { accounts: BankAccountRow[] };

export function BanksClient({ accounts }: Props) {
  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<BankAccountRow | null>(null);
  const [deleting, setDeleting] = useState<BankAccountRow | null>(null);
  const [busy, startTransition] = useTransition();

  const active = accounts.filter((a) => !a.archived);
  const archived = accounts.filter((a) => a.archived);
  const totalBalance = active.reduce((s, a) => s + a.balance, 0);

  const toggleArchive = (acc: BankAccountRow) => {
    startTransition(async () => {
      const fd = new FormData();
      fd.set("id", acc.id);
      const result = await archiveBankAccountAction(fd);
      if (result.ok) {
        toast.success(acc.archived ? "Hesap geri açıldı." : "Hesap arşivlendi.");
      } else {
        toast.error(result.error ?? "İşlem başarısız.");
      }
    });
  };

  const handleDelete = () => {
    if (!deleting) return;
    startTransition(async () => {
      const fd = new FormData();
      fd.set("id", deleting.id);
      const result = await deleteBankAccountAction(fd);
      if (result.ok) {
        toast.success("Hesap silindi.");
        setDeleting(null);
      } else {
        toast.error(result.error ?? "Silme başarısız.");
      }
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-3">
        <Card className="flex-1">
          <CardContent className="p-4">
            <p className="text-muted-foreground text-xs">Toplam bakiye (aktif hesaplar)</p>
            <p
              className={cn(
                "mt-1 text-2xl font-semibold tabular-nums",
                totalBalance >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
              )}
            >
              {formatTRY(totalBalance)}
            </p>
          </CardContent>
        </Card>
        <Button
          onClick={() => {
            setEditing(null);
            setFormOpen(true);
          }}
        >
          <Plus className="size-4" />
          Yeni hesap
        </Button>
      </div>

      {active.length === 0 && archived.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center gap-2 py-12 text-center">
            <Building2 className="text-muted-foreground size-8" />
            <p className="text-sm">Henüz banka hesabı eklenmemiş.</p>
            <Button
              variant="outline"
              size="sm"
              onClick={() => {
                setEditing(null);
                setFormOpen(true);
              }}
            >
              <Plus className="size-3.5" />
              İlk hesabı ekle
            </Button>
          </CardContent>
        </Card>
      ) : (
        <>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {active.map((a) => (
              <AccountCard
                key={a.id}
                account={a}
                onEdit={() => {
                  setEditing(a);
                  setFormOpen(true);
                }}
                onArchiveToggle={() => toggleArchive(a)}
                onDelete={() => setDeleting(a)}
                busy={busy}
              />
            ))}
          </div>

          {archived.length > 0 && (
            <details className="group">
              <summary className="text-muted-foreground hover:text-foreground cursor-pointer text-sm">
                Arşivlenmiş hesaplar ({archived.length})
              </summary>
              <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {archived.map((a) => (
                  <AccountCard
                    key={a.id}
                    account={a}
                    onEdit={() => {
                      setEditing(a);
                      setFormOpen(true);
                    }}
                    onArchiveToggle={() => toggleArchive(a)}
                    onDelete={() => setDeleting(a)}
                    busy={busy}
                  />
                ))}
              </div>
            </details>
          )}
        </>
      )}

      <BankFormSheet
        open={formOpen}
        onOpenChange={(v) => {
          setFormOpen(v);
          if (!v) setEditing(null);
        }}
        account={editing}
      />

      <Dialog open={Boolean(deleting)} onOpenChange={(v) => !v && setDeleting(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Hesabı sil</DialogTitle>
            <DialogDescription>
              <strong>{deleting?.bankName} — {deleting?.accountName}</strong> kalıcı olarak silinecek.
              Bağlı finans hareketi varsa silme reddedilir; o durumda arşivlemeyi tercih edin.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleting(null)} disabled={busy}>
              Vazgeç
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={busy}>
              {busy ? <Loader2 className="size-4 animate-spin" /> : <Trash2 className="size-4" />}
              Sil
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function AccountCard({
  account,
  onEdit,
  onArchiveToggle,
  onDelete,
  busy,
}: {
  account: BankAccountRow;
  onEdit: () => void;
  onArchiveToggle: () => void;
  onDelete: () => void;
  busy: boolean;
}) {
  const positive = account.balance >= 0;
  return (
    <Card className={cn(account.archived && "opacity-60")}>
      <CardContent className="space-y-3 p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <Building2 className="text-muted-foreground size-4 shrink-0" />
              <h3 className="truncate font-medium">{account.bankName}</h3>
              {account.archived && (
                <Badge variant="outline" className="text-[10px]">
                  Arşivli
                </Badge>
              )}
            </div>
            <p className="text-muted-foreground mt-0.5 truncate text-sm">{account.accountName}</p>
            {account.iban && (
              <p className="text-muted-foreground mt-1 truncate font-mono text-[11px]">
                {account.iban.replace(/(.{4})/g, "$1 ").trim()}
              </p>
            )}
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="size-8 shrink-0" disabled={busy}>
                <MoreHorizontal className="size-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={onEdit}>
                <Pencil className="size-3.5" />
                Düzenle
              </DropdownMenuItem>
              <DropdownMenuItem onClick={onArchiveToggle}>
                {account.archived ? (
                  <>
                    <ArchiveRestore className="size-3.5" />
                    Arşivden çıkar
                  </>
                ) : (
                  <>
                    <Archive className="size-3.5" />
                    Arşivle
                  </>
                )}
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive" onClick={onDelete}>
                <Trash2 className="size-3.5" />
                Sil
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

        <div>
          <p className="text-muted-foreground text-xs">Güncel bakiye</p>
          <p
            className={cn(
              "text-xl font-semibold tabular-nums",
              positive ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
            )}
          >
            {formatTRY(account.balance)}
          </p>
          {account.balance !== account.openingBalance && (
            <p className="text-muted-foreground mt-0.5 text-[11px]">
              Açılış: {formatTRY(account.openingBalance)}
            </p>
          )}
        </div>
      </CardContent>
    </Card>
  );
}