import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getPortfolioSummary } from '@/actions/portfolio';
import { formatQuantity, formatAmount } from '@/lib/formatters';
import AllocationChart from '@/components/dashboard/allocation-chart';
import { SyncButton } from '@/components/assets/sync-button';
import Big from 'big.js';

const CHART_COLORS = [
  '#3b82f6',
  '#8b5cf6',
  '#10b981',
  '#f59e0b',
  '#ef4444',
  '#06b6d4',
];

export default async function DashboardPage() {
  const { positions, totalCnyValue, chartData, totalPnlCny } = await getPortfolioSummary();

  const formattedTotal = formatAmount(totalCnyValue);
  const formattedPnl = formatAmount(totalPnlCny);
  const pnlIsPositive = new Big(totalPnlCny).gte(0);

  const displayChartData = chartData.map((item) => ({
    ...item,
    value: Number(item.value),
  }));

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">欢迎来到 Omniledger</h1>
        <p className="text-muted-foreground">您的跨界记账中枢。</p>
      </div>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">总资产概览</CardTitle>
          <SyncButton />
        </CardHeader>
        <CardContent className="pt-6 pb-6">
          <div className="flex items-center gap-3">
            <span className="text-2xl font-semibold text-muted-foreground">
              ¥
            </span>
            <span className="text-5xl font-bold">
              {formattedTotal}
            </span>
            <span className="text-xl text-muted-foreground ml-2">
              总资产 (CNY)
            </span>
          </div>
          <div className="mt-2 flex items-center gap-2">
            <span className="text-sm text-muted-foreground">总盈亏:</span>
            <span className={`text-lg font-semibold ${pnlIsPositive ? 'text-green-500' : 'text-red-500'}`}>
              {pnlIsPositive ? '+' : ''}{formattedPnl}
            </span>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {positions.length === 0 ? (
          <Card>
            <CardContent className="pt-6">
              <p className="text-muted-foreground">暂无持仓，请先添加资产和交易记录。</p>
            </CardContent>
          </Card>
        ) : (
          positions.map((pos) => {
            const posPnl = new Big(pos.pnlCny);
            const posPnlPositive = posPnl.gte(0);
            const formattedPosPnl = formatAmount(pos.pnlCny);

            return (
              <Card key={pos.assetId}>
                <CardHeader>
                  <CardTitle className="flex items-center justify-between">
                    <div className="flex flex-col">
                      <span>{pos.name || pos.symbol}</span>
                      <span className="text-sm font-normal text-muted-foreground">{pos.symbol}</span>
                    </div>
                    <span className="text-sm font-normal text-muted-foreground">
                      {pos.type}
                    </span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">持仓数量</span>
                      <span className="font-medium">
                        {formatQuantity(pos.quantity, pos.type)}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">结算币种</span>
                      <span className="font-medium">{pos.baseCurrency}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">持仓成本 ({pos.baseCurrency})</span>
                      <span className="font-medium">
                        {formatAmount(pos.totalCostNative)}
                      </span>
                    </div>
                    {(() => {
                      const posPnlNative = new Big(pos.pnlNative);
                      const posPnlNativePositive = posPnlNative.gte(0);
                      return (
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">当前盈亏 ({pos.baseCurrency})</span>
                          <span className={`font-semibold ${posPnlNativePositive ? 'text-green-500' : 'text-red-500'}`}>
                            {posPnlNativePositive ? '+' : ''}{formatAmount(pos.pnlNative)}
                          </span>
                        </div>
                      );
                    })()}
                    <div className="flex justify-between opacity-50">
                      <span className="text-muted-foreground">成本 (CNY)</span>
                      <span className="font-medium">
                        ¥{formatAmount(pos.totalCostCny)}
                      </span>
                    </div>
                    <div className="flex justify-between opacity-50">
                      <span className="text-muted-foreground">盈亏 (CNY)</span>
                      <span className={`font-semibold ${posPnlPositive ? 'text-green-500' : 'text-red-500'}`}>
                        {posPnlPositive ? '+' : ''}{formatAmount(pos.pnlCny)}
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })
        )}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>资产分布</CardTitle>
        </CardHeader>
        <CardContent>
          <AllocationChart data={displayChartData} />
        </CardContent>
      </Card>
    </div>
  );
}