"use client";

import type { PatientData } from "@/lib/types";
import { Pill, AlertTriangle, CheckCircle, Search, Plus } from "lucide-react";

export function MedicationsTab({ data }: { data: PatientData }) {
  const activeMeds = data.medications.filter((m) => m.isActive);

  const adherenceColor = (rate: number | null) => {
    if (!rate) return "text-slate-400";
    if (rate >= 90) return "text-green-600";
    if (rate >= 75) return "text-orange-600";
    return "text-red-600";
  };

  const adherenceBg = (rate: number | null) => {
    if (!rate) return "bg-slate-200";
    if (rate >= 90) return "bg-green-500";
    if (rate >= 75) return "bg-orange-500";
    return "bg-red-500";
  };

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Action Bar */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="relative flex-1 min-w-[300px]">
            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              placeholder="Search or prescribe medication..."
              className="w-full pl-9 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-clinical-500"
            />
          </div>
          <button className="flex items-center gap-1.5 px-4 py-2.5 bg-clinical-600 text-white rounded-xl text-sm font-semibold hover:bg-clinical-700 transition-colors">
            <Plus size={14} />
            New Prescription
          </button>
        </div>
      </div>

      {/* Discrepancy Alert */}
      <div className="bg-orange-50 border border-orange-200 rounded-xl p-3 flex items-start gap-3">
        <AlertTriangle size={16} className="text-orange-500 mt-0.5 shrink-0" />
        <div>
          <p className="text-xs font-semibold text-orange-800">Medication Discrepancy Detected</p>
          <p className="text-xs text-orange-700 mt-0.5">
            Patient app shows dose different from prescribed: Metformin listed as 500mg BID in app but prescribed as 1000mg BID. Patient may be self-adjusting.
          </p>
        </div>
      </div>

      {/* Active Medications */}
      <div className="bg-white border border-slate-200 rounded-xl">
        <div className="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Pill size={14} className="text-clinical-600" />
            <h3 className="text-sm font-semibold text-slate-800">
              Active Medications ({activeMeds.length})
            </h3>
          </div>
          <span className="text-xs text-slate-400">Reconciled from 3 sources</span>
        </div>
        <div className="divide-y divide-slate-50">
          {activeMeds.map((med) => (
            <div key={med.id} className="px-5 py-4 hover:bg-slate-50 transition-colors">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="text-sm font-semibold text-slate-800">{med.name}</p>
                    <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
                      med.fillStatus === "Filled" ? "bg-green-100 text-green-700" :
                      med.fillStatus === "Overdue" ? "bg-red-100 text-red-700" :
                      "bg-slate-100 text-slate-600"
                    }`}>
                      {med.fillStatus}
                    </span>
                  </div>
                  <p className="text-xs text-slate-600 mt-0.5">
                    {med.dose} • {med.route} • {med.frequency}
                  </p>
                  <p className="text-[10px] text-slate-400 mt-0.5">
                    Indication: {med.indication || "Not specified"}
                  </p>
                </div>
                <div className="text-right">
                  <p className={`text-sm font-bold ${adherenceColor(med.adherenceRate)}`}>
                    {med.adherenceRate ? `${med.adherenceRate}%` : "N/A"}
                  </p>
                  <p className="text-[10px] text-slate-400">Adherence</p>
                  <div className="w-20 h-1.5 bg-slate-100 rounded-full overflow-hidden mt-1">
                    <div
                      className={`h-full rounded-full ${adherenceBg(med.adherenceRate)}`}
                      style={{ width: `${med.adherenceRate || 0}%` }}
                    />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Refill Queue */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3">
          📋 Refill Request Queue
        </h3>
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center justify-between">
          <div>
            <p className="text-xs font-medium text-blue-800">
              Sertraline 50mg — Maria Garcia (pending from Clevora Patient app)
            </p>
            <p className="text-[10px] text-blue-600 mt-0.5">
              Last fill: 28 days ago • Adherence: 92% • AI Recommendation: Approve
            </p>
          </div>
          <div className="flex items-center gap-2">
            <button className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-semibold hover:bg-green-700 transition-colors flex items-center gap-1">
              <CheckCircle size={12} /> Approve
            </button>
            <button className="px-3 py-1.5 bg-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-300 transition-colors">
              Modify
            </button>
          </div>
        </div>
      </div>

      {/* Drug Interactions */}
      <div className="bg-white border border-slate-200 rounded-xl p-4">
        <h3 className="text-sm font-semibold text-slate-800 mb-3">
          ⚠️ Interaction Check
        </h3>
        <div className="flex items-center gap-2 text-xs text-green-600">
          <CheckCircle size={14} />
          <span>No significant drug-drug interactions detected in current regimen</span>
        </div>
      </div>
    </div>
  );
}