import { Link } from 'react-router-dom'
import { ClipboardList, Crosshair, Crown, ShieldCheck, Users } from 'lucide-react'
import { useCandidates, useRequirements } from '../lib/queries'
import { Badge, Panel, Stat } from '../components/ui'
import { clearanceLabel } from '../lib/format'

export function Dashboard() {
  const candidates = useCandidates()
  const requirements = useRequirements()
  const cs = candidates.data ?? []
  const rs = requirements.data ?? []
  const available = cs.filter((c) => c.available).length
  const keyP = rs.filter((r) => r.key_personnel).length

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <Stat label="Candidates" value={cs.length} icon={<Users size={18} />} />
        <Stat label="Open Requirements" value={rs.length} accent="var(--color-gold)" icon={<ClipboardList size={18} />} />
        <Stat label="Available Now" value={available} accent="var(--color-ok)" icon={<ShieldCheck size={18} />} />
        <Stat label="Key Personnel Roles" value={keyP} accent="var(--color-blue-soft)" icon={<Crown size={18} />} />
      </div>

      <Panel className="flex flex-wrap items-center justify-between gap-4 bg-gradient-to-r from-navy-800/70 to-surface">
        <div>
          <h2 className="text-lg font-bold">Evaluate a candidate against a requirement</h2>
          <p className="text-sm text-muted">Run screenMATCH™ to generate an explainable Mission Readiness score.</p>
        </div>
        <Link
          to="/screen"
          className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-5 py-2.5 text-sm font-bold text-white hover:brightness-110"
        >
          <Crosshair size={16} /> Screen Candidate
        </Link>
      </Panel>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Panel title="Open Requirements" hint="requiring evaluation">
          <ul className="divide-y divide-line/50">
            {rs.length === 0 && <li className="py-3 text-sm text-faint">No requirements yet.</li>}
            {rs.slice(0, 6).map((r) => (
              <li key={r.id} className="flex items-center justify-between py-2.5">
                <div>
                  <div className="text-sm font-semibold">{r.title}</div>
                  <div className="text-xs text-muted">{r.customer_agency ?? 'No specific customer'}</div>
                </div>
                <Badge color="var(--color-blue)" subtle>
                  {clearanceLabel[r.required_level] ?? r.required_level}
                </Badge>
              </li>
            ))}
          </ul>
        </Panel>
        <Panel title="Recent Candidates" hint="Demo data">
          <ul className="divide-y divide-line/50">
            {cs.length === 0 && <li className="py-3 text-sm text-faint">No candidates yet.</li>}
            {cs.slice(0, 6).map((c) => (
              <li key={c.id} className="flex items-center justify-between py-2.5">
                <div>
                  <div className="text-sm font-semibold">{c.full_name}</div>
                  <div className="text-xs text-muted">{c.years_experience} yrs experience</div>
                </div>
                <Badge color={c.available ? 'var(--color-ok)' : 'var(--color-warn)'} subtle>
                  {clearanceLabel[c.clearance_level] ?? c.clearance_level}
                </Badge>
              </li>
            ))}
          </ul>
          <p className="mt-3 text-[11px] text-faint">
            Clearance is a self reported, detected indicator, not verified. Candidates are Demo data.
          </p>
        </Panel>
      </div>
    </div>
  )
}