import { useEffect } from 'react';
import { useGatewayStore } from '../../store/gatewayStore';

export function UsageStats() {
  const { usageStats, loadUsageStats, connectionState } = useGatewayStore();

  useEffect(() => {
    if (connectionState === 'connected') {
      loadUsageStats();
    }
  }, [connectionState]);

  const stats = usageStats || { totalSessions: 0, totalMessages: 0, totalTokens: 0, byModel: {} };
  const models = Object.entries(stats.byModel || {});

  const formatTokens = (n: number) => {
    if (n >= 1_000_000) return `~${(n / 1_000_000).toFixed(1)} M`;
    if (n >= 1_000) return `~${(n / 1_000).toFixed(1)} k`;
    return `${n}`;
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-900">用量统计</h1>
        <button onClick={() => loadUsageStats()} className="text-sm text-gray-500 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50">
          刷新
        </button>
      </div>
      <p className="text-sm text-gray-500 mb-6">本设备所有已保存对话的 Token 用量汇总。</p>

      <div className="grid grid-cols-3 gap-4 mb-8">
        <StatCard label="会话数" value={stats.totalSessions} />
        <StatCard label="消息数" value={stats.totalMessages} />
        <StatCard label="总 Token" value={formatTokens(stats.totalTokens)} />
      </div>

      <h2 className="text-sm font-medium text-gray-700 mb-3">按模型</h2>
      <div className="bg-gray-50 rounded-xl p-5 space-y-4">
        {models.length === 0 && (
          <p className="text-sm text-gray-400 text-center py-4">暂无数据</p>
        )}
        {models.map(([model, data]) => {
          const total = data.inputTokens + data.outputTokens;
          const maxTokens = Math.max(...models.map(([, d]) => d.inputTokens + d.outputTokens), 1);
          const pct = (total / maxTokens) * 100;
          return (
            <div key={model}>
              <div className="flex justify-between items-center mb-1">
                <span className="text-sm font-medium text-gray-900">{model}</span>
                <span className="text-xs text-gray-500">{data.messages} 条消息</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2 mb-1">
                <div className="bg-orange-500 h-2 rounded-full" style={{ width: `${pct}%` }} />
              </div>
              <div className="flex justify-between text-xs text-gray-400">
                <span>输入: {formatTokens(data.inputTokens)}</span>
                <span>输出: {formatTokens(data.outputTokens)}</span>
                <span>总计: {formatTokens(total)}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StatCard({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="bg-gray-50 rounded-xl p-4 text-center">
      <div className="text-2xl font-bold text-gray-900">{value}</div>
      <div className="text-xs text-gray-500 mt-1">{label}</div>
    </div>
  );
}
