"use client";

import type { PatientData } from "@/lib/types";
import { History, FileText, Building2, Upload } from "lucide-react";

export function HistoryTab({ data }: { data: PatientData }) {
  const encounters = [
    { date: "3 months ago", type: "Office Visit", provider: "Dr. James Chen", facility: "Clevora Medical Center", dx: "T2DM follow-up", notes: "A1c improved to 7.8%. Continue current regimen." },
    { date: "6 months ago", type: "Office Visit", provider: "Dr. James Chen", facility: "Clevora Medical Center", dx: "T2DM, HTN follow-up", notes: "A1c 8.4%, increased metformin. BP stable." },
    { date: "9 months ago", type: "Office Visit", provider: "Dr. Rebecca Torres", facility: "Clevora Medical Center", dx: "Annual Wellness Visit", notes: "Comprehensive exam. Care gaps addressed." },
    { date: "1 year ago", type: "ED Visit", provider: "Dr. Amy Liu", facility: "General Hospital", dx: "Hypoglycemia", notes: "Episode of hypoglycemia after missed meal. Glucose 52. Treated with D50. Discharged." },
  ];

  const hospitalizations = [
    { admission: "2 years ago", discharge: "2 years ago", facility: "General Hospital", reason: "Community-acquired pneumonia", los: "3 days", readmitRisk: "Low" },
  ];

  const externalRecords = [
    { source: "General Hospital", type: "ED Visit Summary", date: "1 year ago", status: "Reviewed" },
    { source: "City Lab Services", type: "Laboratory Results", date: "6 months ago", status: "Integrated" },
    { source: "Regional Cardiology", type: "Cardiology Consult", date: "8 months ago", status: "Pending Review" },
  ];

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Encounter History */}
      <div className="bg-white border border-slate-200 rounded-xl">
        <div className="px-5 py-3 border-b border-slate-100 flex items-center gap-2">
          <History size={14} className="text-clinical-600" />
          <h3 className="text-sm font-semibold text-slate-800">Encounter History</h3>
        </div>
        <div className="divide-y divide-slate-50">
          {encounters.map((enc, i) => (
            <div key={i} className="px-5 py-3.5 hover:bg-slate-50 transition-colors cursor-pointer">
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <p className="text-sm font-medium text-slate-800">{enc.type}</p>
                    <span className="text-[10px] text-slate-400">{enc.date}</span>
                  </div>
                  <p className="text-xs text-slate-600 mt-0.5">{enc.provider} • {enc.facility}</p>
                  <p className="text-xs text-slate-500 mt-0.5">Dx: {enc.dx}</p>
                  <p className="text-[10px] text-slate-400 mt-0.5 italic">{enc.notes}</p>
                </div>
                <FileText size={14} className="text-slate-300 shrink-0" />
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Hospitalization History */}
        <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">
            <Building2 size={14} className="text-clinical-600" />
            Hospitalization History
          </h3>
          {hospitalizations.map((h, i) => (
            <div key={i} className="p-3 bg-slate-50 rounded-lg">
              <p className="text-xs font-medium text-slate-700">{h.reason}</p>
              <p className="text-[10px] text-slate-500 mt-0.5">{h.facility} • {h.admission}</p>
              <div className="flex items-center gap-3 mt-1">
                <span className="text-[10px] text-slate-400">LOS: {h.los}</span>
                <span className="text-[10px] text-slate-400">30-day readmit risk: {h.readmitRisk}</span>
              </div>
            </div>
          ))}
        </div>

        {/* External Records */}
        <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">
            🔄 External Records (Clevora Exchange)
          </h3>
          <div className="space-y-2">
            {externalRecords.map((rec, i) => (
              <div key={i} className="flex items-center justify-between p-2 bg-slate-50 rounded-lg">
                <div>
                  <p className="text-xs font-medium text-slate-700">{rec.type}</p>
                  <p className="text-[10px] text-slate-500">{rec.source} • {rec.date}</p>
                </div>
                <span className={`px-2 py-0.5 rounded-full text-[10px] font-medium ${
                  rec.status === "Reviewed" ? "bg-green-100 text-green-700" :
                  rec.status === "Integrated" ? "bg-blue-100 text-blue-700" :
                  "bg-yellow-100 text-yellow-700"
                }`}>{rec.status}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Document Vault */}
        <div className="bg-white border border-slate-200 rounded-xl p-4 lg:col-span-2">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-semibold text-slate-800">📂 Document Vault</h3>
            <button className="flex items-center gap-1 px-3 py-1.5 bg-clinical-100 text-clinical-700 rounded-lg text-xs font-medium hover:bg-clinical-200 transition-colors">
              <Upload size={12} />
              Upload
            </button>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
            {[
              { name: "Advance Directive", status: "Not on file" },
              { name: "Insurance Auth", status: "On file" },
              { name: "Consent Forms", status: "Signed 3 months ago" },
              { name: "Lab External", status: "2 documents" },
            ].map((doc, i) => (
              <div key={i} className="p-3 bg-slate-50 rounded-lg text-center cursor-pointer hover:bg-slate-100 transition-colors">
                <FileText size={20} className="text-slate-400 mx-auto" />
                <p className="text-xs font-medium text-slate-700 mt-1">{doc.name}</p>
                <p className="text-[10px] text-slate-400">{doc.status}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Clinical Notes History */}
        <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">📝 Signed Notes</h3>
          {data.notes.length > 0 ? (
            <div className="space-y-2">
              {data.notes.map((note) => (
                <details key={note.id} className="bg-slate-50 rounded-lg">
                  <summary className="px-4 py-2.5 cursor-pointer hover:bg-slate-100 transition-colors">
                    <span className="text-xs font-medium text-slate-700">
                      {note.noteType} Note — {new Date(note.visitDate).toLocaleDateString()} — {note.status}
                    </span>
                  </summary>
                  <div className="px-4 py-3 border-t border-slate-200">
                    <pre className="text-[11px] text-slate-600 whitespace-pre-wrap font-mono leading-relaxed">
                      {note.content}
                    </pre>
                  </div>
                </details>
              ))}
            </div>
          ) : (
            <p className="text-xs text-slate-400">No signed notes available</p>
          )}
        </div>
      </div>
    </div>
  );
}