import { useEffect, useState } from 'react'
import { getToken } from '../../api/client'

export default function LLMCallsPage() {
  const [calls, setCalls] = useState<any[]>([])
  const [stats, setStats] = useState<any>({})

  useEffect(() => {
    fetchLLM()
    const interval = setInterval(fetchLLM, 5000)
    return () => clearInterval(interval)
  }, [])

  const fetchLLM = async () => {
    try {
      const token = getToken()
      const res = await fetch('/api/v1/admin/llm-calls', { headers: { Authorization: `Bearer ${token}` } })
      const data = await res.json()
      setCalls(data.calls || [])
      setStats(data.stats || {})
    } catch {}
  }

  return (
    <div className="p-6 space-y-4">
      <h2 className="text-lg font-semibold">LLM 调用日志</h2>

      {/* Stats */}
      <div className="grid grid-cols-4 gap-3">
        <MiniStat label="总调用" value={stats.total_calls || 0} />
        <MiniStat label="成功率" value={stats.total_calls ? `${Math.round(stats.success_calls/stats.total_calls*100)}%` : '-'} />
        <MiniStat label="平均耗时" value={stats.avg_duration_ms ? `${stats.avg_duration_ms}ms` : '-'} />
        <MiniStat label="总 Token" value={stats.total_tokens || 0} />
      </div>

      {/* Calls table */}
      <div className="bg-[var(--mx-surface)] rounded-[18px] border border-[var(--mx-outline)] overflow-hidden">
        {calls.length === 0 ? (
          <div className="p-8 text-center text-[var(--mx-text-dim)] text-sm">暂无 LLM 调用记录</div>
        ) : (
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-[var(--mx-divider)] text-[var(--mx-text-dim)] text-xs">
                <th className="text-left px-4 py-2 font-normal">时间</th>
                <th className="text-left px-4 py-2 font-normal">模型</th>
                <th className="text-left px-4 py-2 font-normal">用途</th>
                <th className="text-right px-4 py-2 font-normal">耗时</th>
                <th className="text-right px-4 py-2 font-normal">Token</th>
                <th className="text-center px-4 py-2 font-normal">状态</th>
              </tr>
            </thead>
            <tbody>
              {calls.map((c, i) => (
                <tr key={c.id || i} className="border-b border-[var(--mx-divider)]/50">
                  <td className="px-4 py-2.5 text-[var(--mx-text-dim)] text-xs font-mono">{c.time?.slice(11,19) || '-'}</td>
                  <td className="px-4 py-2.5 text-[var(--mx-text)]">{c.model || '-'}</td>
                  <td className="px-4 py-2.5 text-[var(--mx-text-dim)] text-xs">
                    <span className="px-1.5 py-0.5 rounded bg-[var(--mx-badge-blue)]/50 text-[var(--mx-tertiary-text)]">{c.purpose || '-'}</span>
                  </td>
                  <td className="px-4 py-2.5 text-[var(--mx-text-dim)] text-xs text-right">{c.duration_ms}ms</td>
                  <td className="px-4 py-2.5 text-[var(--mx-text-dim)] text-xs text-right">{(c.prompt_tokens||0)+(c.completion_tokens||0)}</td>
                  <td className="px-4 py-2.5 text-center">
                    <span className={`text-xs ${c.success ? 'text-[var(--mx-tertiary-text)]' : 'text-[var(--mx-error)]'}`}>
                      {c.success ? '✓' : '✗'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  )
}

function MiniStat({ label, value }: { label:string; value:string|number }) {
  return (
    <div className="bg-[var(--mx-surface)] border border-[var(--mx-outline)] rounded-[18px] px-4 py-3">
      <p className="text-xs text-[var(--mx-text-dim)] mb-1">{label}</p>
      <p className="text-lg font-bold text-[var(--mx-text)]">{value}</p>
    </div>
  )
}