import { useEffect, useMemo, useState } from "react";
import { format } from "date-fns";
import { ArrowDown, ArrowUp, ArrowUpDown, Plus, SearchX, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
import { CategoryBadge, MerchantAvatar } from "@/components/elements/CategoryIcon";
import { CategoryPicker } from "@/components/elements/CategoryPicker";
import { TagFilterPicker } from "@/components/elements/TagFilterPicker";
import { SearchInput } from "@/components/elements/SearchInput";
import { EmptyState } from "@/components/elements/EmptyState";
import { TransactionDetail } from "@/components/TransactionDetail";
import { TransferBadge } from "@/components/transactions/TransferBadge";
import { DuplicateBadge } from "@/components/transactions/DuplicateBadge";
import { SplitBadge } from "@/components/transactions/SplitBadge";
import { AddTransactionDialog } from "@/components/transactions/AddTransactionDialog";
import { StatCard } from "@/components/dashboard/StatCard";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMoney } from "@/hooks/useMoney";
import { useElementHeight } from "@/hooks/useElementHeight";
import { useTransactionSearch } from "@/hooks/useTransactionSearch";
import { useMerchantRefinements } from "@/hooks/useMerchantRefinements";
import { useSuggestedTransfers, useTransferAction } from "@/hooks/useTransfers";
import { useSuggestedDuplicates, useDuplicateAction } from "@/hooks/useDuplicates";
import { useTags } from "@/hooks/useTags";
import { dayLabel, withDayHeaders, type DayHeaderRow } from "@/lib/dayGroups";
import { refinedMerchantLabel } from "@/lib/merchant";
import { isAssetAccount, canHoldTransactions } from "@/lib/accounts";
import { CATEGORIES } from "@/lib/categories";
import { cn, parseLocalDate } from "@/lib/utils";
import { toast } from "sonner";
import type { Account, Transaction } from "@/types/finance";

/** Same choices, default and remembered value as the main Transactions table. */
const PAGE_SIZES = [10, 20, 50, 100] as const;
const DEFAULT_PAGE_SIZE = 20;
const PAGE_SIZE_KEY = "txn-page-size";
/** Height of the app's sticky top bar (Layout's h-12); the filter bar sticks below it. */
const APP_HEADER = 48;

type SortKey = "date" | "description" | "amount";

const isDayHeader = (r: Transaction | DayHeaderRow): r is DayHeaderRow => "isDayHeader" in r;

function loadPageSize(): number {
  try {
    const n = Number(localStorage.getItem(PAGE_SIZE_KEY));
    return (PAGE_SIZES as readonly number[]).includes(n) ? n : DEFAULT_PAGE_SIZE;
  } catch {
    return DEFAULT_PAGE_SIZE;
  }
}

/** Which tags an asset last showed, so opening the Honda page again is still the Honda view. */
const tagMemoryKey = (accountId: string) => `account-tags:${accountId}`;
function loadTags(accountId: string): string[] {
  try {
    const raw = localStorage.getItem(tagMemoryKey(accountId));
    const parsed = raw ? JSON.parse(raw) : [];
    return Array.isArray(parsed) ? parsed.filter((v) => typeof v === "string") : [];
  } catch {
    return [];
  }
}

const fmtDate = (d: string) => {
  try { return format(parseLocalDate(d), "MMM d, yyyy"); } catch { return d; }
};

/**
 * The transaction table for one account, built like the Transactions page:
 * a filter bar, a column header and per-day headers that all stick as you
 * scroll, server-side paging with a rows-per-page choice, and a detail panel
 * that opens right here instead of navigating away.
 *
 * Cars, homes, loans and cash rarely have transactions of their own; what
 * belongs to them (insurance, repairs, repayments) sits in your bank accounts.
 * So on those accounts, picking a tag shows everything carrying that tag from
 * every account, with a switch back to only this account's own rows.
 */
export function AccountTransactions({ account }: { account: Account }) {
  const { updateTransactions, addTransaction } = useFinanceData();
  const { moneyAbs: fmtMoney } = useMoney(account.currency);
  const { data: refinements } = useMerchantRefinements();
  const { data: tags = [] } = useTags();
  const { byTxnId: suggestedTransfers } = useSuggestedTransfers();
  const { byTxnId: suggestedDuplicates } = useSuggestedDuplicates();

  const assetLike = isAssetAccount(account.type);

  const [search, setSearch] = useState("");
  const [category, setCategory] = useState("all");
  const [type, setType] = useState("all");
  const [tagIds, setTagIdsState] = useState<string[]>(() => loadTags(account.id));
  const [tagScope, setTagScope] = useState<"all" | "account">("all");
  const [sortKey, setSortKey] = useState<SortKey>("date");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSizeState] = useState(loadPageSize);
  const [detailTxn, setDetailTxn] = useState<Transaction | null>(null);
  const [addOpen, setAddOpen] = useState(false);

  const [filterBarRef, filterBarHeight] = useElementHeight<HTMLDivElement>();
  const [columnHeaderRef, columnHeaderHeight] = useElementHeight<HTMLDivElement>();

  // A tag that has since been deleted must not leave the table empty behind an invisible filter.
  useEffect(() => {
    if (tagIds.length > 0 && tags.length > 0) {
      const stillExists = tagIds.filter((id) => tags.some((t) => t.id === id));
      if (stillExists.length !== tagIds.length) setTagIdsState(stillExists);
    }
  }, [tags, tagIds]);

  const setTags = (ids: string[]) => {
    setTagIdsState(ids);
    setPage(1);
    try { localStorage.setItem(tagMemoryKey(account.id), JSON.stringify(ids)); } catch { /* not remembered in private mode */ }
  };
  const setPageSize = (n: number) => {
    setPageSizeState(n);
    setPage(1);
    try { localStorage.setItem(PAGE_SIZE_KEY, String(n)); } catch { /* ditto */ }
  };

  // Asset-like accounts follow a tag across every account; bank accounts keep the account.
  const acrossAccounts = assetLike && tagIds.length > 0 && tagScope === "all";
  const filters = {
    search,
    category,
    type,
    tagIds,
    accountId: acrossAccounts ? "all" : account.id,
    sort: sortKey,
    direction: sortDir,
  };
  const { rows, filteredCount, income, expenses, loading, error, refresh } = useTransactionSearch(filters, { pageSize, page });
  const { confirm: confirmTransfer, reject: rejectTransfer } = useTransferAction(refresh);
  const { merge: mergeDuplicate, dismiss: dismissDuplicate } = useDuplicateAction(refresh);

  const activeTags = tags.filter((t) => tagIds.includes(t.id));
  const filtersActive = search !== "" || category !== "all" || type !== "all" || tagIds.length > 0;
  const clearFilters = () => { setSearch(""); setCategory("all"); setType("all"); setTags([]); setPage(1); };

  const totalPages = Math.max(1, Math.ceil(filteredCount / pageSize));
  useEffect(() => { if (page > totalPages) setPage(totalPages); }, [page, totalPages]);
  const rangeStart = filteredCount === 0 ? 0 : (page - 1) * pageSize + 1;
  const rangeEnd = Math.min(page * pageSize, filteredCount);

  const display = useMemo(() => (sortKey === "date" ? withDayHeaders(rows) : rows), [rows, sortKey]);

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) setSortDir(sortDir === "asc" ? "desc" : "asc");
    else { setSortKey(key); setSortDir(key === "description" ? "asc" : "desc"); }
    setPage(1);
  };
  const SortIcon = ({ k }: { k: SortKey }) =>
    sortKey !== k ? <ArrowUpDown size={11} strokeWidth={1.5} className="opacity-40" />
      : sortDir === "asc" ? <ArrowUp size={11} strokeWidth={1.5} /> : <ArrowDown size={11} strokeWidth={1.5} />;

  const handleCategoryChange = (txnId: string, newCategory: string) => {
    updateTransactions([{ id: txnId, category: newCategory }], { applyToMerchant: true })
      .then((n) => {
        void refresh();
        const others = typeof n === "number" ? n : 0;
        toast.success(others > 0 ? `Moved to ${newCategory}, and ${others} more from this merchant` : `Moved to ${newCategory}`);
      })
      .catch(() => toast.error("Couldn't update the category"));
    setDetailTxn((d) => (d && d.id === txnId ? { ...d, category: newCategory } : d));
  };

  const columns = "grid-cols-[1fr_auto] sm:grid-cols-[minmax(0,1fr)_120px_130px_120px]";
  const activeTagNames = activeTags.map((t) => t.name);
  const activeTagLabel =
    activeTagNames.length <= 2
      ? activeTagNames.join(" and ")
      : `${activeTagNames.slice(0, -1).join(", ")} and ${activeTagNames[activeTagNames.length - 1]}`;

  return (
    <section className="space-y-3" aria-label="Transactions">
      <div className="flex flex-wrap items-end justify-between gap-3 px-1">
        <div>
          <h2 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground/60">Transactions</h2>
          <p className="text-sm text-muted-foreground mt-0.5">
            {acrossAccounts && activeTags.length > 0
              ? <>Everything tagged <span className="font-medium text-foreground">{activeTagLabel}</span>, from all your accounts</>
              : "Activity recorded on this account"}
          </p>
        </div>
        {canHoldTransactions(account.type) && (
          <Button size="sm" className="gap-1.5" onClick={() => setAddOpen(true)}>
            <Plus size={14} strokeWidth={1.5} /> Add transaction
          </Button>
        )}
      </div>

      {/* Totals for whatever's currently filtered (tags included) - not just
          this account's lifetime totals, so narrowing by tag shows exactly
          what that slice adds up to. */}
      {filteredCount > 0 && (
        <div className="grid grid-cols-2 gap-3 px-1">
          <StatCard title="Total Credits" value={`+${fmtMoney(income)}`} />
          <StatCard title="Total Debits" value={`-${fmtMoney(expenses)}`} />
        </div>
      )}

      {/* Sticks under the app header; the column header and day rows stack below it. */}
      <div
        ref={filterBarRef}
        style={{ top: APP_HEADER }}
        className="sticky z-20 bg-background -mx-2 px-2 pt-2 pb-3 border-b border-border/30 space-y-2"
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
          <SearchInput
            value={search}
            onChange={(v) => { setSearch(v); setPage(1); }}
            placeholder="Search this table…"
            shortcut={false}
          />
          <CategoryPicker
            value={category}
            onChange={(v) => { setCategory(v); setPage(1); }}
            categories={CATEGORIES}
            allLabel="All Categories"
            aria-label="Filter by category"
          />
          <Select value={type} onValueChange={(v) => { setType(v); setPage(1); }}>
            <SelectTrigger className="bg-background" aria-label="Filter by type"><SelectValue placeholder="Type" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Types</SelectItem>
              <SelectItem value="income">Income</SelectItem>
              <SelectItem value="expense">Expense</SelectItem>
            </SelectContent>
          </Select>
          <TagFilterPicker tags={tags} selectedIds={tagIds} onChange={setTags} />
        </div>

        {(filtersActive || (assetLike && tagIds.length > 0)) && (
          <div className="flex flex-wrap items-center gap-2 text-xs">
            {assetLike && tagIds.length > 0 && (
              <div role="group" aria-label="Tag scope" className="inline-flex rounded-md border border-border/60 p-0.5 bg-muted/40">
                {([["all", "All accounts"], ["account", "This account only"]] as const).map(([v, label]) => (
                  <button
                    key={v}
                    onClick={() => { setTagScope(v); setPage(1); }}
                    aria-pressed={tagScope === v}
                    className={cn(
                      "px-2.5 py-1 rounded-[5px] transition-colors",
                      tagScope === v ? "bg-background text-foreground shadow-sm font-medium" : "text-muted-foreground hover:text-foreground"
                    )}
                  >
                    {label}
                  </button>
                ))}
              </div>
            )}
            {filtersActive && (
              <Button variant="ghost" size="sm" className="h-7 gap-1 text-muted-foreground" onClick={clearFilters}>
                <X size={12} strokeWidth={1.5} /> Clear filters
              </Button>
            )}
          </div>
        )}
      </div>

      <Card className="border-border/50">
        <CardContent className="p-0">
          <div
            ref={columnHeaderRef}
            style={{ top: APP_HEADER + filterBarHeight }}
            className={cn("sticky z-10 bg-card grid gap-2 px-5 py-2.5 border-b border-border/30 text-xs text-muted-foreground items-center", columns)}
          >
            <button className="flex items-center gap-1 text-left hover:text-foreground w-fit" onClick={() => toggleSort("description")}>
              Merchant <SortIcon k="description" />
            </button>
            <button className="hidden sm:flex items-center gap-1 hover:text-foreground w-fit" onClick={() => toggleSort("date")}>
              Date <SortIcon k="date" />
            </button>
            <span className="hidden sm:block">Category</span>
            <button className="flex items-center gap-1 justify-end hover:text-foreground ml-auto" onClick={() => toggleSort("amount")}>
              Amount <SortIcon k="amount" />
            </button>
          </div>

          {error && <p className="text-sm text-chart-red text-center py-10">Couldn't load transactions. Try again in a moment.</p>}

          {!error && !loading && display.length === 0 && (
            <EmptyState
              icon={SearchX}
              title={filtersActive ? "No transactions match" : "No transactions yet"}
              description={
                filtersActive
                  ? "Try removing a filter."
                  : assetLike
                    ? "Add one here, or tag transactions from your bank accounts and pick that tag above to see them together."
                    : "Nothing has been recorded on this account yet."
              }
              className="py-14"
            />
          )}

          {display.map((row) => {
            if (isDayHeader(row)) {
              return (
                <div
                  key={row.id}
                  style={{ top: APP_HEADER + filterBarHeight + columnHeaderHeight }}
                  className="sticky z-[5] flex items-center justify-between px-5 py-1.5 bg-muted border-b border-border/30 text-xs text-muted-foreground"
                >
                  <span className="font-medium">{dayLabel(row.date)}</span>
                  <span className={cn("tabular-nums", row.net > 0 && "text-chart-green")}>
                    {row.net > 0 ? "+" : row.net < 0 ? "-" : ""}{fmtMoney(row.net)}
                  </span>
                </div>
              );
            }
            const txn = row;
            return (
              <div
                key={txn.id}
                role="button"
                tabIndex={0}
                onClick={() => setDetailTxn(txn)}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setDetailTxn(txn); } }}
                className={cn(
                  "grid gap-2 px-5 py-3 border-b border-border/20 last:border-0 items-center cursor-pointer transition-colors",
                  "hover:bg-muted/30 focus-visible:outline-none focus-visible:bg-muted/40 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/40",
                  detailTxn?.id === txn.id && "bg-muted/40",
                  columns
                )}
              >
                <div className="flex items-center gap-3 min-w-0">
                  <MerchantAvatar description={txn.description} category={txn.category} />
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-foreground truncate" title={txn.description}>
                      {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}
                    </p>
                    <p className="text-xs text-muted-foreground sm:hidden">{fmtDate(txn.date)}</p>
                  </div>
                </div>
                <span className="hidden sm:block text-sm text-muted-foreground">{fmtDate(txn.date)}</span>
                <span className="hidden sm:flex items-center min-w-0" onClick={(e) => e.stopPropagation()}>
                  {suggestedDuplicates.has(txn.id) ? (
                    <DuplicateBadge
                      suggested={suggestedDuplicates.get(txn.id)!}
                      onMerge={() => mergeDuplicate.mutate(suggestedDuplicates.get(txn.id)!.id)}
                      onDismiss={() => dismissDuplicate.mutate(suggestedDuplicates.get(txn.id)!.id)}
                      busy={mergeDuplicate.isPending || dismissDuplicate.isPending}
                    />
                  ) : txn.isTransfer ? (
                    <TransferBadge
                      suggested={suggestedTransfers.get(txn.id)}
                      onConfirm={() => confirmTransfer.mutate(suggestedTransfers.get(txn.id)!.id)}
                      onReject={() => rejectTransfer.mutate(suggestedTransfers.get(txn.id)!.id)}
                      busy={confirmTransfer.isPending || rejectTransfer.isPending}
                    />
                  ) : txn.isSplit ? (
                    <SplitBadge count={txn.splitCount ?? 0} />
                  ) : (
                    <CategoryBadge category={txn.category} />
                  )}
                </span>
                <span className={cn("text-sm font-medium text-right tabular-nums", txn.amount >= 0 ? "text-chart-green" : "text-foreground")}>
                  {txn.amount >= 0 ? "+" : "-"}{fmtMoney(txn.amount)}
                </span>
              </div>
            );
          })}

          {filteredCount > 0 && (
            <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 border-t border-border/30 px-5 py-3">
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <span>Rows per page</span>
                <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
                  <SelectTrigger className="h-8 w-[72px] text-xs" aria-label="Rows per page"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {PAGE_SIZES.map((n) => <SelectItem key={n} value={String(n)}>{n}</SelectItem>)}
                  </SelectContent>
                </Select>
                <span className="tabular-nums ml-2">{rangeStart}–{rangeEnd} of {filteredCount}</span>
              </div>
              {totalPages > 1 && (
                <Pagination className="mx-0 w-auto">
                  <PaginationContent>
                    <PaginationItem><PaginationPrevious onClick={() => setPage(Math.max(1, page - 1))} className={cn("cursor-pointer", page === 1 && "pointer-events-none opacity-50")} /></PaginationItem>
                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                      const start = Math.max(1, Math.min(page - 2, totalPages - 4));
                      const p = start + i;
                      return (
                        <PaginationItem key={p}>
                          <PaginationLink className="cursor-pointer" isActive={p === page} onClick={() => setPage(p)}>{p}</PaginationLink>
                        </PaginationItem>
                      );
                    })}
                    <PaginationItem><PaginationNext onClick={() => setPage(Math.min(totalPages, page + 1))} className={cn("cursor-pointer", page === totalPages && "pointer-events-none opacity-50")} /></PaginationItem>
                  </PaginationContent>
                </Pagination>
              )}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Opens on this page: clicking a row never leaves the account. */}
      <TransactionDetail
        transaction={detailTxn}
        open={!!detailTxn}
        onOpenChange={(o) => { if (!o) setDetailTxn(null); }}
        onCategoryChange={handleCategoryChange}
        onNoteChange={async (txnId, note) => {
          try {
            await updateTransactions([{ id: txnId, note }]);
            void refresh();
            setDetailTxn((d) => (d && d.id === txnId ? { ...d, note } : d));
          } catch {
            toast.error("Couldn't save the note");
          }
        }}
        onSplitsChange={() => void refresh()}
        categories={[...CATEGORIES]}
      />

      <AddTransactionDialog
        open={addOpen}
        onOpenChange={setAddOpen}
        accounts={[account]}
        onAdd={async (t) => {
          await addTransaction(t);
          void refresh();
        }}
      />
    </section>
  );
}