'use client';

import { PageHeader } from '@/components/layout/page-header';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api/client';
import { formatDecimal } from '@/lib/utils/format';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Skeleton } from '@/components/ui/skeleton';
import { Building2, Flame, ShoppingCart, Coins } from 'lucide-react';

interface SystemAccount {
  id: string;
  accountType: string;
  accountName: string;
  balance: string;
  description: string;
}

const accountIcons: Record<string, typeof Building2> = {
  DISTRIBUTION_POOL: Coins,
  BLACK_HOLE: Flame,
  CIRCULATION_POOL: ShoppingCart,
  SYSTEM_OPERATION: Building2,
  SYSTEM_PROVINCE: Building2,
  SYSTEM_CITY: Building2,
};

const accountColors: Record<string, string> = {
  DISTRIBUTION_POOL: 'text-green-500',
  BLACK_HOLE: 'text-orange-500',
  CIRCULATION_POOL: 'text-blue-500',
  SYSTEM_OPERATION: 'text-purple-500',
  SYSTEM_PROVINCE: 'text-indigo-500',
  SYSTEM_CITY: 'text-pink-500',
};

export default function SystemAccountsPage() {
  const { data: accounts, isLoading } = useQuery({
    queryKey: ['system-accounts'],
    queryFn: async () => {
      const response = await apiClient.get('/system-accounts');
      return response.data.data as SystemAccount[];
    },
  });

  const mainAccounts = accounts?.filter((a) =>
    ['DISTRIBUTION_POOL', 'BLACK_HOLE', 'CIRCULATION_POOL'].includes(a.accountType)
  );
  const systemAccounts = accounts?.filter((a) =>
    ['SYSTEM_OPERATION', 'SYSTEM_PROVINCE', 'SYSTEM_CITY'].includes(a.accountType)
  );

  return (
    <div className="space-y-6">
      <PageHeader title="系统账户" description="查看系统账户余额" />

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {isLoading
          ? [...Array(3)].map((_, i) => (
              <Card key={i}>
                <CardContent className="p-6">
                  <Skeleton className="h-20 w-full" />
                </CardContent>
              </Card>
            ))
          : mainAccounts?.map((account) => {
              const Icon = accountIcons[account.accountType] || Building2;
              const color = accountColors[account.accountType] || 'text-gray-500';
              return (
                <Card key={account.id}>
                  <CardContent className="p-6">
                    <div className="flex items-start justify-between">
                      <div>
                        <p className="text-sm text-muted-foreground">{account.accountName}</p>
                        <p className="text-2xl font-bold font-mono mt-1">{formatDecimal(account.balance, 4)}</p>
                        <p className="text-xs text-muted-foreground mt-2">{account.description}</p>
                      </div>
                      <Icon className={`h-8 w-8 ${color}`} />
                    </div>
                  </CardContent>
                </Card>
              );
            })}
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">系统分配账户</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>账户类型</TableHead>
                <TableHead>账户名称</TableHead>
                <TableHead className="text-right">余额</TableHead>
                <TableHead>描述</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                [...Array(3)].map((_, i) => (
                  <TableRow key={i}>
                    {[...Array(4)].map((_, j) => (
                      <TableCell key={j}>
                        <Skeleton className="h-4 w-full" />
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              ) : (
                systemAccounts?.map((account) => (
                  <TableRow key={account.id}>
                    <TableCell className="font-mono">{account.accountType}</TableCell>
                    <TableCell>{account.accountName}</TableCell>
                    <TableCell className="text-right font-mono">{formatDecimal(account.balance, 4)}</TableCell>
                    <TableCell className="text-muted-foreground">{account.description}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}
