"use client";

import {
  Archive,
  ArchiveRestore,
  ArrowDown,
  ArrowUp,
  ChevronDown,
  EyeOff,
  MoreHorizontal,
  Pencil,
  Plus,
} from "lucide-react";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import { IconBadge } from "@/components/appearance/swatch";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { ACCOUNT_TYPES, isLiabilityType } from "@/shared/accounts";
import { formatMoney } from "@/shared/format";
import { reorderAccountAction, setAccountArchivedAction } from "../actions";
import type { AccountTotals, AccountView } from "../service";
import { AccountFormDialog } from "./account-form-dialog";

const t = tr.accounts;

function BalanceText({ account }: { account: AccountView }) {
  if (account.balanceMinor === null) {
    return (
      <span
        className="inline-flex items-center gap-1 text-sm text-muted-foreground"
        title={t.hiddenHint}
      >
        <EyeOff className="size-3.5" />
        {t.hidden}
      </span>
    );
  }
  const liability = isLiabilityType(account.type);
  const value = account.balanceMinor;
  return (
    <span className="flex flex-col items-end">
      {liability ? <span className="text-xs text-muted-foreground">{t.debt}</span> : null}
      <span
        className={cn(
          "font-semibold tabular-nums",
          (liability ? value < 0 : value < 0) && "text-expense",
        )}
      >
        {formatMoney(liability ? Math.abs(value) : value)}
      </span>
    </span>
  );
}

export function AccountsView({
  accounts,
  totals,
  members,
  canEdit,
}: {
  accounts: AccountView[];
  totals: AccountTotals;
  members: { id: string; name: string }[];
  canEdit: boolean;
}) {
  const [dialog, setDialog] = useState<{ account?: AccountView } | null>(null);
  const [archiving, setArchiving] = useState<AccountView | null>(null);
  const [pending, startTransition] = useTransition();
  const active = accounts.filter((a) => !a.archived);
  const archived = accounts.filter((a) => a.archived);
  const memberName = (id: string | null) => members.find((m) => m.id === id)?.name;
  const paymentAccounts = active
    .filter((a) => ["bank", "cash", "savings"].includes(a.type))
    .map((a) => ({ id: a.id, name: a.name }));

  function run(promise: Promise<{ ok: boolean; error?: string }>, success?: string) {
    startTransition(async () => {
      const r = await promise;
      if (r.ok) {
        if (success) toast.success(success);
      } else toast.error(r.error ?? tr.common.genericError);
    });
  }

  function Row({ a, index }: { a: AccountView; index: number }) {
    const owner = memberName(a.ownerUserId);
    return (
      <li className={cn("flex items-center gap-3 p-3", a.archived && "opacity-60")}>
        <IconBadge icon={a.icon} color={a.color} />
        <div className="min-w-0 flex-1">
          <p className="truncate font-medium">{a.name}</p>
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
            {a.type === "meal_card" && a.mealCardProvider ? (
              <span>{t.providers[a.mealCardProvider]}</span>
            ) : null}
            {a.institution ? <span>{a.institution}</span> : null}
            {owner ? <span>· {owner}</span> : null}
            {a.isPrivate ? <Badge variant="outline">{t.privateBadge}</Badge> : null}
            {a.overdraft ? (
              <Badge variant="secondary">
                {t.overdraftBadge(formatMoney(a.overdraft.limitMinor))}
              </Badge>
            ) : null}
            {a.creditCard ? (
              <>
                <Badge variant="secondary">
                  {t.limitLabel(formatMoney(a.creditCard.limitMinor))}
                </Badge>
                <span>{t.statementLabel(a.creditCard.statementDay)}</span>
              </>
            ) : null}
          </div>
        </div>
        <BalanceText account={a} />
        {canEdit ? (
          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label={`${a.name} — ${tr.common.actions}`}
                disabled={pending}
              >
                <MoreHorizontal />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              {a.archived ? (
                <DropdownMenuItem
                  onSelect={() =>
                    run(setAccountArchivedAction(a.id, false), t.unarchivedToast(a.name))
                  }
                >
                  <ArchiveRestore />
                  {t.unarchive}
                </DropdownMenuItem>
              ) : (
                <>
                  <DropdownMenuItem onSelect={() => setDialog({ account: a })}>
                    <Pencil />
                    {tr.common.edit}
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    disabled={index === 0}
                    onSelect={() => run(reorderAccountAction(a.id, "up"))}
                  >
                    <ArrowUp />
                    {tr.categories.moveUp}
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    disabled={index === active.length - 1}
                    onSelect={() => run(reorderAccountAction(a.id, "down"))}
                  >
                    <ArrowDown />
                    {tr.categories.moveDown}
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem variant="destructive" onSelect={() => setArchiving(a)}>
                    <Archive />
                    {t.archive}
                  </DropdownMenuItem>
                </>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        ) : null}
      </li>
    );
  }

  const summary = [
    { label: t.summary.assets, value: totals.assetsMinor, tone: "text-income" },
    {
      label: t.summary.cardDebt,
      value: Math.abs(totals.cardDebtMinor),
      tone: totals.cardDebtMinor ? "text-expense" : "",
    },
    {
      label: t.summary.net,
      value: totals.netMinor,
      tone: totals.netMinor < 0 ? "text-expense" : "",
    },
  ];

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-3 gap-3">
        {summary.map((s) => (
          <Card key={s.label} size="sm">
            <CardHeader>
              <CardDescription>{s.label}</CardDescription>
              <CardTitle className={cn("text-base tabular-nums sm:text-lg", s.tone)}>
                {formatMoney(s.value)}
              </CardTitle>
            </CardHeader>
          </Card>
        ))}
      </div>
      {totals.includesHidden || totals.excludesHidden ? (
        <p className="-mt-2 text-xs text-muted-foreground">
          {totals.excludesHidden ? t.summary.excludesHidden : t.summary.includesHidden}
        </p>
      ) : null}

      <div className="flex items-center gap-3">
        {!canEdit ? <p className="text-sm text-muted-foreground">{t.ownerOnly}</p> : null}
        {canEdit ? (
          <Button className="ml-auto" onClick={() => setDialog({})}>
            <Plus />
            {t.newAccount}
          </Button>
        ) : null}
      </div>

      {active.length === 0 ? (
        <div className="rounded-xl border border-dashed p-8 text-center text-muted-foreground">
          <p>{t.empty}</p>
          {canEdit ? <p className="mt-1 text-sm">{t.emptyOwnerHint}</p> : null}
        </div>
      ) : (
        ACCOUNT_TYPES.map((type) => {
          const group = active.filter((a) => a.type === type);
          if (!group.length) return null;
          return (
            <section
              key={type}
              aria-labelledby={`acc-group-${type}`}
              className="flex flex-col gap-2"
            >
              <h2 id={`acc-group-${type}`} className="text-sm font-medium text-muted-foreground">
                {t.typeGroups[type]}
              </h2>
              <ul className="divide-y rounded-xl border bg-card" aria-busy={pending}>
                {group.map((a) => (
                  <Row key={a.id} a={a} index={active.indexOf(a)} />
                ))}
              </ul>
            </section>
          );
        })
      )}

      {archived.length ? (
        <Collapsible>
          <CollapsibleTrigger asChild>
            <Button variant="ghost" className="-ml-2 w-fit">
              <ChevronDown />
              {t.archivedSection(archived.length)}
            </Button>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <ul className="mt-2 divide-y rounded-xl border bg-card">
              {archived.map((a) => (
                <Row key={a.id} a={a} index={-1} />
              ))}
            </ul>
          </CollapsibleContent>
        </Collapsible>
      ) : null}

      <AccountFormDialog
        open={Boolean(dialog)}
        account={dialog?.account}
        members={members}
        paymentAccounts={paymentAccounts}
        onOpenChange={(o) => !o && setDialog(null)}
      />

      <AlertDialog open={Boolean(archiving)} onOpenChange={(o) => !o && setArchiving(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t.archiveTitle}</AlertDialogTitle>
            <AlertDialogDescription>
              {archiving ? t.archiveDescription(archiving.name) : null}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
            <Button
              variant="destructive"
              onClick={() => {
                const a = archiving!;
                setArchiving(null);
                run(setAccountArchivedAction(a.id, true), t.archivedToast(a.name));
              }}
            >
              {t.archive}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}