polaris-task-force/src/components/frontend/banking/BankingOverview.tsx

"use client";

import { useState, type ReactNode } from "react";
import type { BankAccount, BankTransaction, Resource } from "@/payload-types";
import { LandmarkIcon, PlusIcon } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AccountCard } from "@/components/frontend/banking/AccountCard";
import { CreateAccountDialog } from "@/components/frontend/banking/CreateAccountDialog";
import { WalletHero } from "@/components/frontend/banking/WalletHero";
import { ActivityFeed } from "@/components/frontend/banking/ActivityFeed";
import { currencyLabel, type CurrencyConfig } from "@/lib/banking/format";
import { CurrencyAmount } from "@/components/frontend/banking/CurrencyAmount";
import { usePageCommands } from "@/components/command-palette/CommandPaletteContext";

interface BankingOverviewProps {
  accounts: BankAccount[];
  recentTransactions: BankTransaction[];
  currentUser: { id: number; username: string; displayName?: string } | null;
  currencyResource: Resource | null;
  currencyConfig: CurrencyConfig;
  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">
        <h3 className="font-mono text-[11px] font-medium uppercase tracking-wider text-muted-foreground/80">
          {title}
        </h3>
        <span className="font-mono text-[10px] text-muted-foreground/50">
          {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,
  recentTransactions,
  currentUser,
  currencyResource,
  currencyConfig,
  isManager,
  factions,
}: BankingOverviewProps) {
  const [createAccountOpen, setCreateAccountOpen] = useState(false);

  usePageCommands([
    {
      id: "banking:create-account",
      group: "Banking",
      label: "Create Bank Account",
      icon: PlusIcon,
      keywords: ["new", "account", "bank"],
      onSelect: () => setCreateAccountOpen(true),
    },
  ]);

  const treasury = accounts.filter((a) => a.accountType === "treasury");
  const factionAccounts = accounts.filter((a) => a.accountType === "faction");
  const personal = accounts.filter((a) => a.accountType === "personal");

  const myAccount = currentUser
    ? personal.find((a) => {
        if (!a.ownerUser) return false;
        const ownerId = typeof a.ownerUser === "object" ? a.ownerUser.id : a.ownerUser;
        return ownerId === currentUser.id;
      })
    : undefined;

  // Regular users see only their own personal account; managers see everything.
  const visiblePersonal = isManager ? personal : myAccount ? [myAccount] : [];

  const unitFundsTotal = [...treasury, ...factionAccounts].reduce(
    (sum, a) => sum + (a.balance ?? 0),
    0,
  );

  const visibleAccountsCount =
    (isManager ? treasury.length + factionAccounts.length : 0) + visiblePersonal.length;

  const tickerCurrency = (label: string): string =>
    label.length > 8 ? `${label.slice(0, 8)}…` : label;

  return (
    <div className="flex flex-col gap-6">
      <WalletHero
        account={myAccount ?? null}
        currentUser={currentUser}
        currencyResource={currencyResource}
        currencyConfig={currencyConfig}
      />

      <Tabs defaultValue="activity" className="flex flex-col gap-4">
        <div className="flex flex-wrap items-end justify-between gap-2">
          <TabsList variant="line" className="grid w-full max-w-sm grid-cols-2 items-stretch">
            <TabsTrigger
              value="activity"
              className="font-mono text-[10px] uppercase tracking-wider"
            >
              Activity
            </TabsTrigger>
            <TabsTrigger
              value="accounts"
              className="font-mono text-[10px] uppercase tracking-wider"
            >
              Accounts
            </TabsTrigger>
          </TabsList>

          {isManager && (
            <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70">
              UNIT FUNDS&nbsp;
              <CurrencyAmount value={unitFundsTotal} currency={currencyConfig} />
            </p>
          )}
        </div>

        <TabsContent value="activity" className="m-0">
          <ActivityFeed transactions={recentTransactions} currencyConfig={currencyConfig} />
        </TabsContent>

        <TabsContent value="accounts" className="m-0 pt-4 flex flex-col gap-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <LandmarkIcon className="size-4 text-muted-foreground" />
              <h2 className="font-mono text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                Unit Accounts
              </h2>
              <span className="font-mono text-[10px] text-muted-foreground/50">
                {visibleAccountsCount}
              </span>
            </div>
            <CreateAccountDialog
              isManager={isManager}
              factions={factions}
              open={createAccountOpen}
              onOpenChange={setCreateAccountOpen}
            />
          </div>

          {visibleAccountsCount === 0 ? (
            <p className="text-sm text-muted-foreground italic">
              No accessible accounts.{" "}
              {!isManager && "Ask logistics personnel to set up the unit treasury."}
            </p>
          ) : (
            <>
              {isManager && treasury.length > 0 && (
                <Section title="Treasury" count={treasury.length}>
                  {treasury.map((account) => (
                    <AccountCard
                      key={account.id}
                      account={account}
                      currencyConfig={currencyConfig}
                    />
                  ))}
                </Section>
              )}

              {isManager && factionAccounts.length > 0 && (
                <Section title="Factions" count={factionAccounts.length}>
                  {factionAccounts.map((account) => (
                    <AccountCard
                      key={account.id}
                      account={account}
                      currencyConfig={currencyConfig}
                    />
                  ))}
                </Section>
              )}

              {visiblePersonal.length > 0 && (
                <Section
                  title={isManager ? "Personal" : "My Account"}
                  count={visiblePersonal.length}
                >
                  {visiblePersonal.map((account) => (
                    <AccountCard
                      key={account.id}
                      account={account}
                      currencyConfig={currencyConfig}
                    />
                  ))}
                </Section>
              )}
            </>
          )}
        </TabsContent>
      </Tabs>

      {accounts.length === 0 && (
        <p className="text-sm text-muted-foreground italic">
          No accounts yet. Create your first account to get started.
        </p>
      )}

      <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/40">
        SYS.BANKING / currency={tickerCurrency(currencyLabel(currencyConfig))}
      </p>
    </div>
  );
}