import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { getPortfolioPositions } from '@/actions/portfolio';
import { formatQuantity } from '@/lib/formatters';
import AllocationChart from '@/components/dashboard/allocation-chart';

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

export default async function DashboardPage() {
  const positions = await getPortfolioPositions();

  const chartData = positions.map((pos, index) => ({
    name: pos.symbol,
    value: Number(pos.quantity),
    fill: CHART_COLORS[index % CHART_COLORS.length],
  }));

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

      <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) => (
            <Card key={pos.assetId}>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>{pos.symbol}</span>
                  <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>
              </CardContent>
            </Card>
          ))
        )}
      </div>

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