"use client";

import Link from "next/link";
import type { BankAccount } from "@/payload-types";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { LandmarkIcon, UsersIcon, WalletIcon } from "lucide-react";
import { formatAmount } from "@/lib/banking/format";
import {
  accountStatusBase,
  accountStatusClass,
  type AccountStatus,
} from "@/lib/banking/ui";

const accountTypeMeta = {
  treasury: {
    label: "Treasury",
    icon: LandmarkIcon,
    accent: "text-blue-400",
    iconBg: "bg-blue-500/10",
  },
  faction: {
    label: "Faction",
    icon: UsersIcon,
    accent: "text-amber-400",
    iconBg: "bg-amber-500/10",
  },
  personal: {
    label: "Personal",
    icon: WalletIcon,
    accent: "text-emerald-400",
    iconBg: "bg-emerald-500/10",
  },
} as const;

export function accountTypeInfo(accountType: string) {
  return accountTypeMeta[accountType as keyof typeof accountTypeMeta] ?? accountTypeMeta.personal;
}

export function AccountCard({ account }: { account: BankAccount }) {
  const meta = accountTypeInfo(account.accountType);
  const Icon = meta.icon;
  const currency = typeof account.currency === "object" ? account.currency : null;

  const owner =
    account.accountType === "personal"
      ? typeof account.ownerUser === "object" && account.ownerUser
        ? (account.ownerUser.displayName ?? account.ownerUser.username)
        : null
      : account.accountType === "faction" && typeof account.ownerFaction === "object"
        ? account.ownerFaction?.name
        : null;

  const statusKey = (account.status ?? "open") as AccountStatus;

  return (
    <Link href={`/logistics/banking/${account.id}`} className="block">
      <Item
        variant="outline"
        className="hover:border-border/80 transition-colors [&[data-variant=outline]]:border-border"
      >
        <ItemMedia variant="icon" className={meta.iconBg}>
          <Icon className={meta.accent} />
        </ItemMedia>
        <ItemContent>
          <ItemHeader>
            <ItemTitle>{account.name}</ItemTitle>
            <span
              className={`${accountStatusBase} ${accountStatusClass[statusKey] ?? accountStatusClass.open}`}
            >
              {statusKey}
            </span>
          </ItemHeader>
          <ItemDescription>
            {meta.label}
            {owner ? ` · ${owner}` : ""}
          </ItemDescription>
          <div className="mt-1">
            <span className="text-lg font-semibold font-mono">
              {formatAmount(account.balance ?? 0, currency)}
            </span>
          </div>
        </ItemContent>
      </Item>
    </Link>
  );
}