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

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

  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>
    </div>
  );
}