"use client";

import type { PatientData } from "@/lib/types";
import { DollarSign, Shield, CheckCircle, AlertTriangle, Clock } from "lucide-react";

export function FinancialTab({ data }: { data: PatientData }) {
  const isShaNhif = data.patient.insuranceName?.includes("SHA") || data.patient.insuranceName?.includes("NHIF");
  
  return (
    <div className="space-y-5 max-w-5xl">
      {/* Insurance Status */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
          <Shield size={14} className="text-clinical-600" />
          Insurance Status 🇰🇪
        </h3>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-[10px] text-slate-500">Primary Insurance</p>
            <p className="text-sm font-bold text-slate-800">{data.patient.insuranceName}</p>
            <div className="flex items-center gap-1 mt-1">
              <CheckCircle size={10} className="text-green-500" />
              <span className="text-[10px] text-green-600">{data.patient.insuranceStatus}</span>
            </div>
          </div>
          {isShaNhif ? (
            <>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">SHA Package</p>
                <p className="text-sm font-bold text-slate-800">Enhanced Benefits</p>
                <p className="text-[10px] text-slate-400">Chronic disease cover active</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">Facility Level</p>
                <p className="text-sm font-bold text-slate-800">Level 5 - KNH</p>
                <p className="text-[10px] text-slate-400">Referral active</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">Today&apos;s Copay</p>
                <p className="text-sm font-bold text-clinical-600">KES 0</p>
                <p className="text-[10px] text-slate-400">SHA covered</p>
              </div>
            </>
          ) : (
            <>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">Annual Limit</p>
                <p className="text-sm font-bold text-slate-800">KES 2.5M / 5M</p>
                <div className="w-full h-1.5 bg-slate-200 rounded-full overflow-hidden mt-1">
                  <div className="h-full bg-clinical-500 rounded-full" style={{ width: "50%" }} />
                </div>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">Outpatient Balance</p>
                <p className="text-sm font-bold text-slate-800">KES 85,000</p>
                <p className="text-[10px] text-slate-400">of KES 150,000</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-[10px] text-slate-500">Today&apos;s Copay</p>
                <p className="text-sm font-bold text-clinical-600">KES 500</p>
                <p className="text-[10px] text-slate-400">Consultation fee</p>
              </div>
            </>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Pre-Authorization Tracker */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">📋 Pre-Authorization Tracker</h3>
          <div className="space-y-2">
            <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
              <div className="flex items-center justify-between">
                <p className="text-xs font-medium text-green-800">Diabetes Medications (Metformin, Glibenclamide)</p>
                <span className="px-2 py-0.5 bg-green-200 text-green-800 rounded-full text-[10px] font-medium">Approved</span>
              </div>
              <p className="text-[10px] text-green-600 mt-0.5">SHA pre-auth valid • Expires 31/12/2025</p>
            </div>
            <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
              <div className="flex items-center justify-between">
                <p className="text-xs font-medium text-yellow-800">GLP-1 RA (Semaglutide)</p>
                <span className="px-2 py-0.5 bg-yellow-200 text-yellow-800 rounded-full text-[10px] font-medium flex items-center gap-1">
                  <Clock size={10} /> Pending
                </span>
              </div>
              <p className="text-[10px] text-yellow-600 mt-0.5">Submitted to {data.patient.insuranceName} • Expected: 5 working days</p>
            </div>
            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="flex items-center justify-between">
                <p className="text-xs font-medium text-blue-800">Continuous Glucose Monitor</p>
                <span className="px-2 py-0.5 bg-blue-200 text-blue-800 rounded-full text-[10px] font-medium">Submitted</span>
              </div>
              <p className="text-[10px] text-blue-600 mt-0.5">Special request for chronic disease management</p>
            </div>
          </div>
        </div>

        {/* Billing Code Summary */}
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-1.5">
            <DollarSign size={14} className="text-clinical-600" />
            Billing Summary
          </h3>
          <div className="space-y-2">
            <div className="p-3 bg-slate-50 rounded-lg">
              <div className="flex items-center justify-between">
                <p className="text-xs font-medium text-slate-700">Consultation Type</p>
                <span className="text-xs font-bold text-clinical-700">Follow-up Visit</span>
              </div>
              <p className="text-[10px] text-slate-500 mt-0.5">Specialist consultation - Internal Medicine</p>
            </div>
            <div className="p-3 bg-slate-50 rounded-lg">
              <p className="text-xs font-medium text-slate-700 mb-1">Diagnosis Codes (ICD-10)</p>
              <div className="space-y-1">
                <p className="text-[10px] text-slate-600">• E11.65 — Type 2 DM with hyperglycemia (Primary)</p>
                <p className="text-[10px] text-slate-600">• I10 — Essential hypertension</p>
                <p className="text-[10px] text-slate-600">• E78.5 — Hyperlipidemia, unspecified</p>
              </div>
            </div>
            <div className="p-3 bg-slate-50 rounded-lg">
              <div className="flex items-center justify-between">
                <p className="text-xs font-medium text-slate-700">Est. Claim Amount</p>
                <span className="text-sm font-bold text-green-600">KES 3,500</span>
              </div>
              <p className="text-[10px] text-slate-400">Auto-submitted to {data.patient.insuranceName}</p>
            </div>
          </div>
        </div>

        {/* Kenya-specific compliance */}
        <div className="bg-white border border-slate-200 rounded-xl p-4 lg:col-span-2">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">🇰🇪 Kenya Healthcare Compliance</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
            {[
              { item: "SHA Registration", status: "complete", detail: "Active member" },
              { item: "KMHFL Facility Code", status: "complete", detail: "KNH - 13021" },
              { item: "Clinical Officer Sign-off", status: "not_required", detail: "Physician visit" },
              { item: "Referral Letter", status: "complete", detail: "From Kiambu L4" },
            ].map((c) => (
              <div key={c.item} className={`p-3 rounded-lg ${
                c.status === "complete" ? "bg-green-50" :
                c.status === "not_required" ? "bg-slate-50" : "bg-yellow-50"
              }`}>
                <div className="flex items-center gap-1.5">
                  {c.status === "complete" ? (
                    <CheckCircle size={12} className="text-green-500" />
                  ) : c.status === "not_required" ? (
                    <span className="text-slate-400 text-[10px]">—</span>
                  ) : (
                    <AlertTriangle size={12} className="text-yellow-500" />
                  )}
                  <span className={`text-xs font-medium ${
                    c.status === "complete" ? "text-green-700" :
                    c.status === "not_required" ? "text-slate-500" : "text-yellow-700"
                  }`}>{c.item}</span>
                </div>
                <p className="text-[10px] text-slate-500 mt-0.5">{c.detail}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Patient Account */}
        <div className="bg-white border border-slate-200 rounded-xl p-4 lg:col-span-2">
          <h3 className="text-sm font-semibold text-slate-800 mb-3">💳 Patient Account</h3>
          <div className="grid grid-cols-3 gap-3">
            <div className="bg-slate-50 rounded-lg p-3 text-center">
              <p className="text-[10px] text-slate-500">Outstanding Balance</p>
              <p className="text-lg font-bold text-slate-800">KES 2,450</p>
              <p className="text-[10px] text-slate-400">Lab co-pays pending</p>
            </div>
            <div className="bg-slate-50 rounded-lg p-3 text-center">
              <p className="text-[10px] text-slate-500">Payment Options</p>
              <p className="text-sm font-bold text-green-600">M-Pesa / Card</p>
              <p className="text-[10px] text-slate-400">Paybill: 123456</p>
            </div>
            <div className="bg-slate-50 rounded-lg p-3 text-center">
              <p className="text-[10px] text-slate-500">Insurance Claims</p>
              <p className="text-sm font-bold text-clinical-600">3 Pending</p>
              <p className="text-[10px] text-slate-400">Avg processing: 14 days</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}