"use client";

import type { ReactNode } from "react";
import type { BankAccount, BankTransaction, Resource } from "@/payload-types";
import { LandmarkIcon } from "lucide-react";
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} 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, formatAmount } from "@/lib/banking/format";

interface BankingOverviewProps {
  accounts: BankAccount[];
  recentTransactions: BankTransaction[];
  currentUser: { id: number; username: string; displayName?: string } | null;
  currencyResource: Resource | null;
  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,
  isManager,
  factions,
}: BankingOverviewProps) {
  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}
      />

      <Tabs defaultValue="activity" className="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"
          >
            <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;
              {formatAmount(unitFundsTotal, currencyResource)}
            </p>
          )}
        </div>

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

        <TabsContent value="accounts" className="m-0 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} />
          </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} />
                  ))}
                </Section>
              )}

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

              {visiblePersonal.length > 0 && (
                <Section
                  title={isManager ? "Personal" : "My Account"}
                  count={visiblePersonal.length}
                >
                  {visiblePersonal.map((account) => (
                    <AccountCard key={account.id} account={account} />
                  ))}
                </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(currencyResource))}
      </p>
    </div>
  );
}