'use client';

import { useEffect, useState } from 'react';
import { AdminShell } from '@/components/AdminShell';
import { getDataQuality } from '@/lib/api';

function Pct({ value }: { value: number }) {
  const pct = (value * 100).toFixed(1);
  const color = value < 0.05 ? 'text-green-400' : value < 0.2 ? 'text-yellow-400' : 'text-red-400';
  return <span className={color}>{pct}%</span>;
}

export default function DataQualityPage() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getDataQuality>> | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    getDataQuality()
      .then(setData)
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <AdminShell>
      <div className="space-y-6">
        <h1 className="text-xl font-semibold">Data quality</h1>
        {error && <p className="text-red-400 text-sm">{error}</p>}
        {loading && <p className="text-gray-500 text-sm">Loading…</p>}

        {data && (
          <>
            <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
              <div className="bg-gray-900 border border-gray-800 rounded p-4">
                <div className="text-xs text-gray-500 mb-1">Scoring calls (30d)</div>
                <div className="text-2xl font-semibold">{data.scoringCallsLast30d}</div>
              </div>
              <div className="bg-gray-900 border border-gray-800 rounded p-4">
                <div className="text-xs text-gray-500 mb-1">Missing feature rate</div>
                <div className="text-2xl font-semibold"><Pct value={data.missingFeatureRate} /></div>
              </div>
              <div className="bg-gray-900 border border-gray-800 rounded p-4">
                <div className="text-xs text-gray-500 mb-1">Integration tokens</div>
                <div className="text-2xl font-semibold">{data.totalTokens}</div>
              </div>
              <div className="bg-gray-900 border border-gray-800 rounded p-4">
                <div className="text-xs text-gray-500 mb-1">Stale token rate (&gt;7d)</div>
                <div className="text-2xl font-semibold"><Pct value={data.staleTokenRate} /></div>
              </div>
            </div>

            <div className="space-y-2">
              <h2 className="text-sm font-medium text-gray-400">Daily feature completeness (14d)</h2>
              <table className="w-full text-xs">
                <thead>
                  <tr className="border-b border-gray-800 text-gray-500 text-left">
                    <th className="py-2 pr-4">Date</th>
                    <th className="py-2 pr-4">Scoring calls</th>
                    <th className="py-2 pr-4">With features</th>
                    <th className="py-2 pr-4">Coverage</th>
                    <th className="py-2">Avg candidates</th>
                  </tr>
                </thead>
                <tbody>
                  {data.dailyQuality.map((row) => {
                    const coverage = row.total > 0 ? row.withFeatures / row.total : 0;
                    return (
                      <tr key={row.date} className="border-b border-gray-800/50">
                        <td className="py-1.5 pr-4 font-mono text-gray-500">{row.date}</td>
                        <td className="py-1.5 pr-4 text-gray-300">{row.total}</td>
                        <td className="py-1.5 pr-4 text-gray-300">{row.withFeatures}</td>
                        <td className="py-1.5 pr-4"><Pct value={coverage} /></td>
                        <td className="py-1.5 text-gray-300">{row.avgCandidates?.toFixed(1) ?? '—'}</td>
                      </tr>
                    );
                  })}
                  {data.dailyQuality.length === 0 && (
                    <tr><td colSpan={5} className="py-4 text-center text-gray-600">No data yet</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </AdminShell>
  );
}