"use client";

import { TrendingUp, Users, AlertTriangle, Heart, Smartphone, Activity, ArrowUpRight, Send } from "lucide-react";

const panelPatients = [
  { name: "Mary Njeri", dm: "red", htn: "green", hld: "green", asthma: "gray", risk: "high", app: true },
  { name: "John Kamau", dm: "gray", htn: "red", hld: "yellow", asthma: "gray", risk: "high", app: true },
  { name: "Fatuma Hassan", dm: "gray", htn: "gray", hld: "gray", asthma: "yellow", risk: "low", app: false },
  { name: "David Otieno", dm: "gray", htn: "gray", hld: "gray", asthma: "gray", risk: "low", app: true },
  { name: "Agnes Wambui", dm: "yellow", htn: "yellow", hld: "gray", asthma: "gray", risk: "moderate", app: false },
  { name: "Joseph Mwangi", dm: "gray", htn: "red", hld: "yellow", asthma: "gray", risk: "very_high", app: true },
];

const cellColor: Record<string, string> = { green: "bg-green-400", yellow: "bg-yellow-400", red: "bg-red-400", gray: "bg-slate-200" };
const riskConfig: Record<string, { label: string; color: string }> = {
  very_high: { label: "Very High", color: "bg-red-100 text-red-700" },
  high: { label: "High", color: "bg-orange-100 text-orange-700" },
  moderate: { label: "Moderate", color: "bg-yellow-100 text-yellow-700" },
  low: { label: "Low", color: "bg-green-100 text-green-700" },
};

export default function PopulationPage() {
  return (
    <div className="p-5 space-y-5">
      <div><h1 className="text-xl font-bold text-slate-900 flex items-center gap-2"><TrendingUp size={20} className="text-clinical-600" />Population Health Dashboard</h1>
        <p className="text-sm text-slate-500 mt-0.5">Dr. Wanjiku&apos;s panel — {panelPatients.length} attributed patients</p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
        {[
          { label: "Panel Size", value: "248", icon: Users, color: "text-clinical-600" },
          { label: "Care Gaps Open", value: "32", icon: AlertTriangle, color: "text-orange-600" },
          { label: "Chronic Controlled", value: "68%", icon: Heart, color: "text-green-600" },
          { label: "App Engaged", value: "74%", icon: Smartphone, color: "text-purple-600" },
          { label: "High Risk", value: "18", icon: Activity, color: "text-red-600" },
        ].map((s) => (
          <div key={s.label} className="bg-white border border-slate-200 rounded-xl p-4">
            <s.icon size={16} className={`${s.color} mb-2`} /><p className="text-2xl font-bold text-slate-900">{s.value}</p><p className="text-xs text-slate-500 mt-0.5">{s.label}</p>
          </div>
        ))}
      </div>

      {/* Condition Control Heatmap */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3">🗺️ Condition Control Heatmap</h3>
        <div className="overflow-x-auto">
          <table className="w-full"><thead><tr className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">
            <th className="text-left px-3 py-2">Patient</th><th className="text-center px-3 py-2">Diabetes</th><th className="text-center px-3 py-2">Hypertension</th><th className="text-center px-3 py-2">Hyperlipidemia</th><th className="text-center px-3 py-2">Asthma</th><th className="text-center px-3 py-2">Risk</th><th className="text-center px-3 py-2">App</th>
          </tr></thead>
          <tbody className="divide-y divide-slate-50">{panelPatients.map((p) => (
            <tr key={p.name} className="hover:bg-slate-50 cursor-pointer">
              <td className="px-3 py-2.5 text-xs font-medium text-slate-800">{p.name}</td>
              {(["dm", "htn", "hld", "asthma"] as const).map((c) => <td key={c} className="px-3 py-2.5 text-center"><div className={`w-6 h-6 rounded mx-auto ${cellColor[p[c]]}`} /></td>)}
              <td className="px-3 py-2.5 text-center"><span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${riskConfig[p.risk].color}`}>{riskConfig[p.risk].label}</span></td>
              <td className="px-3 py-2.5 text-center">{p.app ? <Smartphone size={14} className="text-green-500 mx-auto" /> : <span className="text-[10px] text-slate-400">—</span>}</td>
            </tr>
          ))}</tbody></table>
        </div>
        <div className="flex items-center gap-4 mt-3 text-[10px] text-slate-500">
          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-green-400" />Controlled</span>
          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-yellow-400" />Borderline</span>
          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-red-400" />Uncontrolled</span>
          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-slate-200" />No data / N/A</span>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Care Gaps */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📋 Care Gap Worklist</h3>
          <div className="space-y-2">
            {[
              { gap: "HbA1c Testing Overdue", count: 8, est: "KES 12,000" },
              { gap: "Cervical Cancer Screening", count: 12, est: "KES 8,400" },
              { gap: "Blood Pressure Recheck", count: 6, est: "KES 4,200" },
              { gap: "Diabetic Eye Exam", count: 5, est: "KES 15,000" },
              { gap: "Depression Screening (PHQ-9)", count: 15, est: "Quality measure" },
            ].map((g) => (
              <div key={g.gap} className="flex items-center justify-between p-2.5 bg-slate-50 rounded-lg">
                <div><p className="text-xs font-medium text-slate-700">{g.gap}</p><p className="text-[10px] text-slate-500">{g.count} patients • Est. revenue: {g.est}</p></div>
                <button className="flex items-center gap-1 px-2.5 py-1.5 bg-clinical-600 text-white rounded-lg text-[10px] font-semibold hover:bg-clinical-700"><Send size={10} />Outreach</button>
              </div>
            ))}
          </div>
        </div>

        {/* App Engagement Impact */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📱 App Engagement Impact</h3>
          <div className="space-y-3">
            {[
              { metric: "Medication Adherence", app: "89%", noApp: "64%", diff: "+25%" },
              { metric: "A1c at Goal", app: "72%", noApp: "48%", diff: "+24%" },
              { metric: "BP at Goal", app: "78%", noApp: "55%", diff: "+23%" },
              { metric: "ED Utilization (per 1k)", app: "45", noApp: "112", diff: "-60%" },
              { metric: "No-Show Rate", app: "8%", noApp: "24%", diff: "-67%" },
            ].map((m) => (
              <div key={m.metric} className="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
                <span className="text-xs text-slate-600">{m.metric}</span>
                <div className="flex items-center gap-3 text-xs">
                  <span className="font-bold text-green-600">📱 {m.app}</span>
                  <span className="text-slate-400">vs</span>
                  <span className="text-slate-600">{m.noApp}</span>
                  <span className="text-green-600 font-bold flex items-center gap-0.5"><ArrowUpRight size={10} />{m.diff}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}