"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import type { BankAccount } from "@/payload-types";
import { LandmarkIcon, WalletIcon } from "lucide-react";
import { Item, ItemContent, ItemHeader, ItemMedia, ItemTitle } from "@/components/ui/item";
import { formatAmount } from "@/lib/banking/format";
import { AccountCard } from "@/components/frontend/banking/AccountCard";
import { CreateAccountDialog } from "@/components/frontend/banking/CreateAccountDialog";
import { MyWalletCard } from "@/components/frontend/banking/MyWalletCard";

interface BankingOverviewProps {
  accounts: BankAccount[];
  currentUserId: number;
  isManager: boolean;
  factions: { id: number; name: string }[];
}

function Section({
  title,
  count,
  children,
}: {
  title: string;
  count: number;
  children: ReactNode;
}) {
  return (
    <section className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
          {title}
        </h2>
        <span className="text-xs text-muted-foreground">
          {count} account{count !== 1 ? "s" : ""}
        </span>
      </div>
      {count === 0 ? (
        <p className="text-sm text-muted-foreground italic">None.</p>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
          {children}
        </div>
      )}
    </section>
  );
}

export function BankingOverview({
  accounts,
  currentUserId,
  isManager,
  factions,
}: BankingOverviewProps) {
  const treasury = accounts.filter((a) => a.accountType === "treasury");
  const faction = accounts.filter((a) => a.accountType === "faction");
  const personal = accounts.filter((a) => a.accountType === "personal");

  const myAccount = personal.find((a) => {
    const ownerId = typeof a.ownerUser === "object" ? a.ownerUser?.id : a.ownerUser;
    return ownerId === currentUserId;
  });

  const unitFunds = [...treasury, ...faction].reduce(
    (sum, a) => sum + (a.balance ?? 0),
    0,
  );
  const currency =
    accounts.length > 0 && typeof accounts[0].currency === "object"
      ? accounts[0].currency
      : null;

  const accountTypeLabels: Record<string, string> = {
    treasury: "Treasury",
    faction: "Faction",
    personal: "Personal",
  };

  return (
    <div className="flex flex-col gap-8">
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <Item variant="outline">
          <ItemMedia variant="icon" className="bg-blue-500/10">
            <LandmarkIcon className="text-blue-400" />
          </ItemMedia>
          <ItemContent>
            <ItemHeader>
              <ItemTitle>Unit funds</ItemTitle>
            </ItemHeader>
            <span className="text-lg font-semibold font-mono">
              {formatAmount(unitFunds, currency)}
            </span>
          </ItemContent>
        </Item>

        <Item variant="outline">
          <ItemMedia variant="icon" className="bg-muted">
            <LandmarkIcon className="text-muted-foreground" />
          </ItemMedia>
          <ItemContent>
            <ItemHeader>
              <ItemTitle>Accounts</ItemTitle>
            </ItemHeader>
            <span className="text-lg font-semibold font-mono">
              {accounts.length}
            </span>
          </ItemContent>
        </Item>

        {myAccount ? (
          <Link href={`/logistics/banking/${myAccount.id}`} className="block">
            <Item variant="outline" className="transition-colors">
              <ItemMedia variant="icon" className="bg-emerald-500/10">
                <WalletIcon className="text-emerald-400" />
              </ItemMedia>
              <ItemContent>
                <ItemHeader>
                  <ItemTitle>My wallet</ItemTitle>
                </ItemHeader>
                <span className="text-lg font-semibold font-mono">
                  {formatAmount(myAccount.balance ?? 0, currency)}
                </span>
              </ItemContent>
            </Item>
          </Link>
        ) : (
          <MyWalletCard />
        )}
      </div>

      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
            Accounts
          </h2>
        </div>
        <CreateAccountDialog isManager={isManager} factions={factions} />
      </div>

      <Section title="Treasury" count={treasury.length}>
        {treasury.map((account) => (
          <AccountCard key={account.id} account={account} />
        ))}
      </Section>

      <Section title="Factions" count={faction.length}>
        {faction.map((account) => (
          <AccountCard key={account.id} account={account} />
        ))}
      </Section>

      <Section title="Personal" count={personal.length}>
        {personal.map((account) => (
          <AccountCard key={account.id} account={account} />
        ))}
      </Section>

      {accounts.length === 0 && (
        <p className="text-sm text-muted-foreground italic">
          No accounts yet. Create your first account to get started.
          {isManager ? "" : " (Ask logistics personnel to set up the unit treasury.)"}
        </p>
      )}

      <p className="text-xs text-muted-foreground">
        Account types: {Object.values(accountTypeLabels).join(" · ")}.
        Balances are denominated in the main currency set in Game Rules.
      </p>
    </div>
  );
}