'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useRealtimeData } from '../hooks/use-dashboard-stats';
import { formatDecimal } from '@/lib/utils/format';
import { formatRelative } from '@/lib/utils/date';
import { Activity, Flame, Clock, ShoppingCart } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';

function RealtimePanelSkeleton() {
  return (
    <Card className="h-full">
      <CardHeader>
        <Skeleton className="h-5 w-32" />
      </CardHeader>
      <CardContent className="space-y-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="flex items-center justify-between">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-4 w-16" />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}

export function RealtimePanel() {
  const { data, isLoading } = useRealtimeData();

  if (isLoading) {
    return <RealtimePanelSkeleton />;
  }

  const items = [
    {
      label: '本分钟分配',
      value: formatDecimal(data?.currentMinuteDistribution, 8),
      unit: '股',
      icon: Activity,
      iconColor: 'text-green-500',
    },
    {
      label: '本分钟销毁',
      value: formatDecimal(data?.currentMinuteBurn, 8),
      unit: '股',
      icon: Flame,
      iconColor: 'text-orange-500',
    },
    {
      label: '活跃订单',
      value: data?.activeOrders?.toString() ?? '-',
      icon: ShoppingCart,
      iconColor: 'text-blue-500',
    },
    {
      label: '待处理交易',
      value: data?.pendingTrades?.toString() ?? '-',
      icon: Clock,
      iconColor: 'text-purple-500',
    },
  ];

  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle className="text-lg">实时数据</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {items.map((item) => (
          <div key={item.label} className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <item.icon className={`h-4 w-4 ${item.iconColor}`} />
              <span className="text-sm text-muted-foreground">{item.label}</span>
            </div>
            <div className="text-sm font-medium">
              {item.value}
              {item.unit && <span className="text-muted-foreground ml-1">{item.unit}</span>}
            </div>
          </div>
        ))}

        <div className="pt-4 border-t">
          <div className="flex items-center justify-between">
            <span className="text-xs text-muted-foreground">价格更新时间</span>
            <span className="text-xs">{formatRelative(data?.lastPriceUpdateAt)}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
