'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useDashboardStats } from '../hooks/use-dashboard-stats';
import { formatDecimal, formatCompactNumber } from '@/lib/utils/format';
import { TrendingUp, TrendingDown } from 'lucide-react';

export function PriceOverview() {
  const { data: stats } = useDashboardStats();

  const priceChange = stats?.priceChange24h ?? 0;
  const isPriceUp = priceChange >= 0;

  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle className="text-lg">价格概览</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-6">
          <div className="space-y-2">
            <p className="text-sm text-muted-foreground">当前价格</p>
            <div className="flex items-baseline gap-2">
              <span className="text-3xl font-bold">{formatDecimal(stats?.currentPrice, 8)}</span>
              <span className="text-sm text-muted-foreground">绿积分/股</span>
            </div>
            <div className={`flex items-center gap-1 text-sm ${isPriceUp ? 'text-green-500' : 'text-red-500'}`}>
              {isPriceUp ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
              <span>{isPriceUp ? '+' : ''}{(priceChange * 100).toFixed(2)}%</span>
              <span className="text-muted-foreground">24h</span>
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <p className="text-sm text-muted-foreground">已分配</p>
              <p className="text-lg font-semibold">{formatCompactNumber(stats?.totalDistributed)}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">已销毁</p>
              <p className="text-lg font-semibold">{formatCompactNumber(stats?.totalBurned)}</p>
            </div>
          </div>
        </div>

        <div className="mt-6 pt-6 border-t">
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <p className="text-xs text-muted-foreground">有效算力</p>
              <p className="text-sm font-medium">{formatCompactNumber(stats?.networkEffectiveContribution)}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">层级待解锁</p>
              <p className="text-sm font-medium">{formatCompactNumber(stats?.networkLevelPending)}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">团队待解锁</p>
              <p className="text-sm font-medium">{formatCompactNumber(stats?.networkBonusPending)}</p>
            </div>
          </div>
          <div className="grid grid-cols-3 gap-4 text-center mt-4">
            <div>
              <p className="text-xs text-muted-foreground">认种树总数</p>
              <p className="text-sm font-medium">{stats?.totalTrees?.toLocaleString() ?? '-'}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">认种用户</p>
              <p className="text-sm font-medium">{stats?.adoptedUsers?.toLocaleString() ?? '-'}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">流通池</p>
              <p className="text-sm font-medium">{formatCompactNumber(stats?.circulationPool)}</p>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
