"use client";

import type { PatientData } from "@/lib/types";
import { Users, MessageCircle, Phone, Send } from "lucide-react";

export function CareTeamTab({ data }: { data: PatientData }) {
  const careTeam = [
    { name: "Dr. Grace Wanjiku", role: "Primary Physician", specialty: "Internal Medicine", lastInteraction: "Today", status: "available", initials: "GW" },
    { name: "Dr. Peter Ochieng", role: "Collaborating Physician", specialty: "Family Medicine", lastInteraction: "3 days ago", status: "available", initials: "PO" },
    { name: "Nurse Jane Akinyi", role: "Primary Nurse", specialty: "Medical-Surgical", lastInteraction: "Today", status: "available", initials: "JA" },
    { name: "Dr. Stephen Kimani", role: "Endocrinology Consult", specialty: "Endocrinology - KNH", lastInteraction: "2 weeks ago", status: "unavailable", initials: "SK" },
    { name: "Pharm. Lucy Muthoni", role: "Clinical Pharmacist", specialty: "Pharmacy", lastInteraction: "1 week ago", status: "available", initials: "LM" },
    { name: "Susan Wairimu, CHW", role: "Community Health Worker", specialty: "Primary Care Link", lastInteraction: "1 month ago", status: "available", initials: "SW" },
  ];

  const recentMessages = [
    { from: "Nurse Jane Akinyi", time: "2 hours ago", message: "Patient vitals stable. BP 128/78. Reports feeling better after lunch." },
    { from: "Dr. Peter Ochieng", time: "Yesterday", message: "Reviewed diabetes management plan. Agree with GLP-1 RA initiation if available. Happy to co-manage." },
    { from: "Pharm. Lucy Muthoni", time: "3 days ago", message: "Metformin ER formulation available at KNH pharmacy. Consider for GI tolerability." },
  ];

  return (
    <div className="space-y-5 max-w-5xl">
      {/* Care Team Directory */}
      <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">
          <Users size={14} className="text-clinical-600" />
          <h3 className="text-sm font-semibold text-slate-800">Care Team</h3>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
          {careTeam.map((member) => (
            <div key={member.name} className="flex items-center gap-3 p-3 bg-slate-50 rounded-xl hover:bg-slate-100 transition-colors cursor-pointer">
              <div className="w-10 h-10 rounded-full bg-clinical-100 text-clinical-600 flex items-center justify-center text-xs font-bold shrink-0">
                {member.initials}
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-semibold text-slate-800 truncate">{member.name}</p>
                  <span className={`w-2 h-2 rounded-full shrink-0 ${member.status === "available" ? "bg-green-500" : "bg-slate-300"}`} />
                </div>
                <p className="text-[10px] text-slate-500">{member.role} • {member.specialty}</p>
                <p className="text-[10px] text-slate-400">Last: {member.lastInteraction}</p>
              </div>
              <div className="flex items-center gap-1 shrink-0">
                <button className="p-1.5 hover:bg-white rounded-lg transition-colors">
                  <MessageCircle size={12} className="text-clinical-600" />
                </button>
                <button className="p-1.5 hover:bg-white rounded-lg transition-colors">
                  <Phone size={12} className="text-slate-400" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Secure Messaging */}
        <div className="bg-white border border-slate-200 rounded-xl">
          <div className="px-4 py-3 border-b border-slate-100">
            <h3 className="text-sm font-semibold text-slate-800 flex items-center gap-1.5">
              <MessageCircle size={14} className="text-clinical-600" />
              Recent Messages
            </h3>
          </div>
          <div className="divide-y divide-slate-50">
            {recentMessages.map((msg, i) => (
              <div key={i} className="px-4 py-3">
                <div className="flex items-center justify-between">
                  <p className="text-xs font-semibold text-slate-700">{msg.from}</p>
                  <span className="text-[10px] text-slate-400">{msg.time}</span>
                </div>
                <p className="text-xs text-slate-600 mt-1">{msg.message}</p>
              </div>
            ))}
          </div>
          <div className="p-3 border-t border-slate-100">
            <div className="flex items-center gap-2">
              <input
                placeholder="Type a message..."
                className="flex-1 px-3 py-2 bg-slate-50 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-clinical-500"
              />
              <button className="p-2 bg-clinical-600 text-white rounded-lg hover:bg-clinical-700 transition-colors">
                <Send size={14} />
              </button>
            </div>
          </div>
        </div>

        {/* SBAR Tool & Patient App Bridge */}
        <div className="space-y-4">
          {/* SBAR */}
          <div className="bg-white border border-slate-200 rounded-xl p-4">
            <h3 className="text-sm font-semibold text-slate-800 mb-3">📋 SBAR Communication</h3>
            <div className="space-y-2">
              {[
                { label: "Situation", value: `${data.patient.firstName} ${data.patient.lastName} with uncontrolled T2DM, A1c 10.2%` },
                { label: "Background", value: "57F with T2DM, HTN, HLD. On metformin, lisinopril, atorvastatin. Referred from Kiambu County Hospital." },
                { label: "Assessment", value: "A1c significantly worsened. Metformin alone insufficient. Patient compliant but reports GI side effects." },
                { label: "Recommendation", value: "Initiate GLP-1 RA if available. Consider KNH Diabetes Clinic referral for intensification." },
              ].map((item) => (
                <div key={item.label} className="bg-slate-50 rounded-lg p-2">
                  <p className="text-[10px] font-bold text-clinical-700">{item.label}</p>
                  <p className="text-[10px] text-slate-600 mt-0.5">{item.value}</p>
                </div>
              ))}
            </div>
            <button className="mt-3 w-full px-3 py-2 bg-clinical-600 text-white rounded-lg text-xs font-semibold hover:bg-clinical-700 transition-colors">
              Send SBAR
            </button>
          </div>

          {/* Patient App Bridge */}
          <div className="bg-white border border-slate-200 rounded-xl p-4">
            <h3 className="text-sm font-semibold text-slate-800 mb-3">📱 Patient App Messages</h3>
            <div className="bg-purple-50 rounded-lg p-3 mb-3">
              <p className="text-[10px] font-medium text-purple-700">From {data.patient.firstName}:</p>
              <p className="text-xs text-purple-600 mt-1 italic">
                &ldquo;Daktari, nimekuwa nikijisikia kizunguzungu asubuhi — nadhani inaweza kuwa dawa ya pressure.&rdquo;
              </p>
              <p className="text-[10px] text-purple-400 mt-1">Sent 2 days ago via Clevora App • Unread</p>
            </div>
            <div className="flex items-center gap-2">
              <input
                placeholder="Reply to patient..."
                className="flex-1 px-3 py-2 bg-slate-50 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
              <button className="p-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                <Send size={14} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}