import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
import { 
  Heart, Calendar, Pill, TestTube, MessageSquare, Bell, User, LogOut, 
  Clock, FileText, Download, Plus, ChevronRight, CheckCircle, AlertCircle,
  Activity, Stethoscope, Mail, Shield, TrendingUp
} from 'lucide-react';

// Mock Data (since connections are pending credentials)
const mockAppointments = [
  { id: 'apt-001', date: '2026-01-18', time: '10:00 AM', provider: 'Dr. Chen', specialty: 'Primary Care', location: 'Main Clinic', type: 'Follow-up', status: 'confirmed' },
  { id: 'apt-002', date: '2026-02-02', time: '2:30 PM', provider: 'Lab Services', specialty: 'Diagnostics', location: 'Lab Wing', type: 'Blood Draw', status: 'pending' },
  { id: 'apt-003', date: '2026-02-15', time: '11:00 AM', provider: 'Dr. Patel', specialty: 'Endocrinology', location: 'Specialty Clinic', type: 'Consultation', status: 'confirmed' },
];

const mockPrescriptions = [
  { id: 'rx-001', medication: 'Metformin', dosage: '500mg', frequency: 'Twice daily', prescriber: 'Dr. Chen', refillsRemaining: 3, nextRefillDate: '2026-01-20', status: 'active', refillable: true },
  { id: 'rx-002', medication: 'Lisinopril', dosage: '10mg', frequency: 'Once daily', prescriber: 'Dr. Chen', refillsRemaining: 1, nextRefillDate: '2026-01-17', status: 'refill-needed', refillable: true },
  { id: 'rx-003', medication: 'Atorvastatin', dosage: '20mg', frequency: 'Once daily at bedtime', prescriber: 'Dr. Patel', refillsRemaining: 5, nextRefillDate: '2026-02-01', status: 'active', refillable: true },
];

const mockLabResults = [
  { id: 'lab-001', testName: 'HbA1c', date: '2025-12-15', value: '6.8', unit: '%', referenceRange: '4.0-5.6', status: 'borderline', category: 'Chemistry', trend: [6.5, 6.6, 6.7, 6.8, 6.8] },
  { id: 'lab-002', testName: 'Fasting Glucose', date: '2025-12-15', value: '112', unit: 'mg/dL', referenceRange: '70-100', status: 'borderline', category: 'Chemistry', trend: [105, 108, 110, 112, 112] },
  { id: 'lab-003', testName: 'Total Cholesterol', date: '2025-12-15', value: '195', unit: 'mg/dL', referenceRange: '<200', status: 'normal', category: 'Lipid Panel', trend: [210, 205, 198, 195, 195] },
  { id: 'lab-004', testName: 'LDL Cholesterol', date: '2025-12-15', value: '118', unit: 'mg/dL', referenceRange: '<100', status: 'borderline', category: 'Lipid Panel', trend: [130, 125, 120, 118, 118] },
  { id: 'lab-005', testName: 'HDL Cholesterol', date: '2025-12-15', value: '58', unit: 'mg/dL', referenceRange: '>40', status: 'normal', category: 'Lipid Panel', trend: [52, 54, 56, 57, 58] },
];

const mockMessages = [
  { id: 'msg-001', sender: 'Dr. Chen', subject: 'Lab Results Review', date: '2026-01-14', read: false, preview: 'Hi Sarah, I reviewed your recent lab results...' },
  { id: 'msg-002', sender: 'Billing Department', subject: 'Insurance Verification', date: '2026-01-12', read: true, preview: 'We have successfully verified your insurance...' },
  { id: 'msg-003', sender: 'Pharmacy Team', subject: 'Prescription Ready', date: '2026-01-10', read: true, preview: 'Your prescription refill is ready for pickup...' },
];

const mockTrendData = [
  { date: 'Aug', hba1c: 6.5, glucose: 105 },
  { date: 'Sep', hba1c: 6.6, glucose: 108 },
  { date: 'Oct', hba1c: 6.7, glucose: 110 },
  { date: 'Nov', hba1c: 6.8, glucose: 112 },
  { date: 'Dec', hba1c: 6.8, glucose: 112 },
];

export default function App() {
  const [activeTab, setActiveTab] = useState('appointments');
  const [selectedLab, setSelectedLab] = useState(null);
  const [selectedAppointment, setSelectedAppointment] = useState(null);
  const [selectedMessage, setSelectedMessage] = useState(null);
  const [showRefillModal, setShowRefillModal] = useState(null);
  const [calendarView, setCalendarView] = useState('month');
  const [notifications, setNotifications] = useState(2);

  // Get status badge color
  const getStatusColor = (status) => {
    switch (status) {
      case 'normal': case 'confirmed': case 'active': return 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20';
      case 'borderline': case 'pending': case 'refill-needed': return 'bg-amber-500/10 text-amber-400 border-amber-500/20';
      case 'abnormal': case 'critical': return 'bg-red-500/10 text-red-400 border-red-500/20';
      default: return 'bg-slate-500/10 text-slate-400 border-slate-500/20';
    }
  };

  const getStatusIcon = (status) => {
    switch (status) {
      case 'normal': case 'confirmed': case 'active': return <CheckCircle className="w-4 h-4" />;
      case 'borderline': case 'pending': case 'refill-needed': return <AlertCircle className="w-4 h-4" />;
      default: return <Activity className="w-4 h-4" />;
    }
  };

  // Health Summary Cards Data
  const nextAppointment = mockAppointments[0];
  const medsDueThisWeek = mockPrescriptions.filter(rx => {
    const refillDate = new Date(rx.nextRefillDate);
    const weekFromNow = new Date();
    weekFromNow.setDate(weekFromNow.getDate() + 7);
    return refillDate <= weekFromNow;
  });
  const pendingLabs = mockLabResults.filter(lab => lab.status !== 'normal');
  const unreadMessages = mockMessages.filter(msg => !msg.read);

  const tabs = [
    { id: 'appointments', label: 'Appointments', icon: Calendar },
    { id: 'prescriptions', label: 'Prescriptions', icon: Pill },
    { id: 'lab-results', label: 'Lab Results', icon: TestTube },
    { id: 'messages', label: 'Messages', icon: MessageSquare },
    { id: 'health-records', label: 'Health Records', icon: FileText },
  ];

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#e2e8f0]">
      {/* Header */}
      <header className="sticky top-0 z-100 bg-white/[0.03] backdrop-blur-xl border-b border-white/[0.08]">
        <div className="flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
              <Heart className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-white">Patient Portal</h1>
              <p className="text-xs text-slate-400">Healthcare Dashboard</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <button className="relative p-2 hover:bg-white/[0.05] rounded-lg transition-colors">
              <Bell className="w-5 h-5 text-slate-400" />
              {notifications > 0 && (
                <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full text-xs flex items-center justify-center text-white font-semibold">
                  {notifications}
                </span>
              )}
            </button>
            <div className="flex items-center gap-3 pl-4 border-l border-white/[0.08]">
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center">
                <User className="w-4 h-4 text-white" />
              </div>
              <div className="hidden md:block">
                <p className="text-sm font-medium text-white">Sarah Johnson</p>
                <p className="text-xs text-slate-400">Patient</p>
              </div>
            </div>
            <button className="p-2 hover:bg-white/[0.05] rounded-lg transition-colors text-slate-400 hover:text-red-400">
              <LogOut className="w-5 h-5" />
            </button>
          </div>
        </div>
      </header>

      {/* Welcome Banner */}
      <div className="px-6 py-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-semibold text-white">Welcome back, Sarah</h2>
            <p className="text-slate-400 mt-1">Here's your health overview for today</p>
          </div>
          <div className="text-right hidden md:block">
            <p className="text-slate-400 text-sm">Monday, January 15, 2026</p>
          </div>
        </div>
      </div>

      {/* Health Summary Grid */}
      <div className="px-6 pb-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {/* Next Appointment Card */}
          <div 
            className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5 cursor-pointer hover:border-cyan-500/30 transition-all hover:-translate-y-1"
            onClick={() => setActiveTab('appointments')}
          >
            <div className="flex items-center gap-2 mb-3">
              <Calendar className="w-5 h-5 text-cyan-400" />
              <span className="text-xs uppercase tracking-wide text-slate-400">Next Appointment</span>
            </div>
            <p className="text-2xl font-bold text-white">{nextAppointment.date.split('-')[1]}/{nextAppointment.date.split('-')[2]}</p>
            <p className="text-sm text-slate-400 mt-1">{nextAppointment.time}</p>
            <p className="text-sm text-cyan-400 mt-2">{nextAppointment.provider}</p>
          </div>

          {/* Medications Due Card */}
          <div 
            className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5 cursor-pointer hover:border-emerald-500/30 transition-all hover:-translate-y-1"
            onClick={() => setActiveTab('prescriptions')}
          >
            <div className="flex items-center gap-2 mb-3">
              <Pill className="w-5 h-5 text-emerald-400" />
              <span className="text-xs uppercase tracking-wide text-slate-400">Meds to Refill</span>
            </div>
            <p className="text-2xl font-bold text-white">{medsDueThisWeek.length}</p>
            <p className="text-sm text-slate-400 mt-1">due this week</p>
            {medsDueThisWeek.length > 0 && (
              <p className="text-sm text-emerald-400 mt-2">{medsDueThisWeek[0].medication}</p>
            )}
          </div>

          {/* Pending Labs Card */}
          <div 
            className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5 cursor-pointer hover:border-amber-500/30 transition-all hover:-translate-y-1"
            onClick={() => setActiveTab('lab-results')}
          >
            <div className="flex items-center gap-2 mb-3">
              <TestTube className="w-5 h-5 text-amber-400" />
              <span className="text-xs uppercase tracking-wide text-slate-400">Pending Results</span>
            </div>
            <p className="text-2xl font-bold text-white">{pendingLabs.length}</p>
            <p className="text-sm text-slate-400 mt-1">need attention</p>
            {pendingLabs.length > 0 && (
              <p className="text-sm text-amber-400 mt-2">Ready to review</p>
            )}
          </div>

          {/* Messages Card */}
          <div 
            className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5 cursor-pointer hover:border-blue-500/30 transition-all hover:-translate-y-1"
            onClick={() => setActiveTab('messages')}
          >
            <div className="flex items-center gap-2 mb-3">
              <MessageSquare className="w-5 h-5 text-blue-400" />
              <span className="text-xs uppercase tracking-wide text-slate-400">Messages</span>
            </div>
            <p className="text-2xl font-bold text-white">{unreadMessages.length}</p>
            <p className="text-sm text-slate-400 mt-1">unread</p>
            {unreadMessages.length > 0 && (
              <p className="text-sm text-blue-400 mt-2">From: {unreadMessages[0].sender}</p>
            )}
          </div>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="px-6 pb-4 border-b border-white/[0.08]">
        <div className="flex gap-1 overflow-x-auto">
          {tabs.map((tab) => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-3 rounded-t-lg font-medium text-sm transition-all whitespace-nowrap ${
                  activeTab === tab.id
                    ? 'text-cyan-400 border-b-2 border-cyan-400 bg-white/[0.02]'
                    : 'text-slate-400 hover:text-slate-300 hover:bg-white/[0.02]'
                }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Main Content Area */}
      <div className="px-6 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-2">
            {/* Appointments Tab */}
            {activeTab === 'appointments' && (
              <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
                <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.08]">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <Calendar className="w-5 h-5 text-cyan-400" />
                    Upcoming Appointments
                  </h3>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setCalendarView('week')}
                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                        calendarView === 'week' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-white/[0.05] text-slate-400 hover:text-white'
                      }`}
                    >
                      Week
                    </button>
                    <button
                      onClick={() => setCalendarView('month')}
                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                        calendarView === 'month' ? 'bg-cyan-500/20 text-cyan-400' : 'bg-white/[0.05] text-slate-400 hover:text-white'
                      }`}
                    >
                      Month
                    </button>
                  </div>
                </div>
                <div className="p-5">
                  {mockAppointments.map((apt) => (
                    <div
                      key={apt.id}
                      onClick={() => setSelectedAppointment(apt)}
                      className="flex items-center gap-4 p-4 rounded-xl bg-white/[0.02] border border-white/[0.05] mb-3 cursor-pointer hover:border-cyan-500/30 transition-all"
                    >
                      <div className="w-16 h-16 rounded-xl bg-cyan-500/10 flex flex-col items-center justify-center flex-shrink-0">
                        <span className="text-lg font-bold text-cyan-400">{apt.date.split('-')[2]}</span>
                        <span className="text-xs text-slate-400 uppercase">{apt.date.split('-')[1]}</span>
                      </div>
                      <div className="flex-1">
                        <h4 className="font-semibold text-white">{apt.provider}</h4>
                        <p className="text-sm text-slate-400">{apt.specialty} • {apt.type}</p>
                        <p className="text-sm text-slate-500 mt-1">{apt.time} • {apt.location}</p>
                      </div>
                      <div className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStatusColor(apt.status)}`}>
                        {getStatusIcon(apt.status)}
                        <span className="capitalize">{apt.status}</span>
                      </div>
                    </div>
                  ))}
                  <button className="w-full mt-4 py-3 rounded-xl bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 font-medium hover:bg-cyan-500/20 transition-colors flex items-center justify-center gap-2">
                    <Plus className="w-4 h-4" />
                    Schedule New Appointment
                  </button>
                </div>
              </div>
            )}

            {/* Prescriptions Tab */}
            {activeTab === 'prescriptions' && (
              <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
                <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.08]">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <Pill className="w-5 h-5 text-emerald-400" />
                    Current Medications
                  </h3>
                  <button className="px-4 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm font-medium hover:bg-emerald-500/20 transition-colors">
                    Request Refill
                  </button>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-white/[0.08]">
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Medication</th>
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Dosage</th>
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Frequency</th>
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Next Refill</th>
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Status</th>
                        <th className="text-left px-5 py-3 text-xs uppercase tracking-wide text-slate-400 font-medium">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      {mockPrescriptions.map((rx) => (
                        <tr key={rx.id} className="border-b border-white/[0.05] hover:bg-white/[0.02]">
                          <td className="px-5 py-4">
                            <p className="font-medium text-white">{rx.medication}</p>
                            <p className="text-xs text-slate-400">{rx.prescriber}</p>
                          </td>
                          <td className="px-5 py-4 text-slate-300">{rx.dosage}</td>
                          <td className="px-5 py-4 text-slate-300">{rx.frequency}</td>
                          <td className="px-5 py-4 text-slate-300">{rx.nextRefillDate}</td>
                          <td className="px-5 py-4">
                            <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 w-fit ${getStatusColor(rx.status)}`}>
                              {getStatusIcon(rx.status)}
                              <span className="capitalize">{rx.status.replace('-', ' ')}</span>
                            </span>
                          </td>
                          <td className="px-5 py-4">
                            {rx.refillable && (
                              <button 
                                onClick={() => setShowRefillModal(rx)}
                                className="px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-medium hover:bg-emerald-500/20 transition-colors"
                              >
                                Refill
                              </button>
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* Lab Results Tab */}
            {activeTab === 'lab-results' && (
              <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
                <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.08]">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <TestTube className="w-5 h-5 text-amber-400" />
                    Lab Results
                  </h3>
                  <button className="px-4 py-2 rounded-lg bg-white/[0.05] border border-white/[0.08] text-slate-300 text-sm font-medium hover:bg-white/[0.08] transition-colors flex items-center gap-2">
                    <Download className="w-4 h-4" />
                    Download All
                  </button>
                </div>
                <div className="p-5">
                  {mockLabResults.map((lab) => (
                    <div
                      key={lab.id}
                      onClick={() => setSelectedLab(lab)}
                      className="flex items-center gap-4 p-4 rounded-xl bg-white/[0.02] border border-white/[0.05] mb-3 cursor-pointer hover:border-amber-500/30 transition-all"
                    >
                      <div className="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center flex-shrink-0">
                        <TestTube className="w-6 h-6 text-amber-400" />
                      </div>
                      <div className="flex-1">
                        <h4 className="font-semibold text-white">{lab.testName}</h4>
                        <p className="text-sm text-slate-400">{lab.date} • {lab.category}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-lg font-semibold text-white">{lab.value} <span className="text-sm text-slate-400">{lab.unit}</span></p>
                        <p className="text-xs text-slate-500">Ref: {lab.referenceRange}</p>
                      </div>
                      <div className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${getStatusColor(lab.status)}`}>
                        {getStatusIcon(lab.status)}
                        <span className="capitalize">{lab.status}</span>
                      </div>
                      <ChevronRight className="w-5 h-5 text-slate-500" />
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Messages Tab */}
            {activeTab === 'messages' && (
              <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
                <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.08]">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <MessageSquare className="w-5 h-5 text-blue-400" />
                    Secure Messages
                  </h3>
                  <button className="px-4 py-2 rounded-lg bg-blue-500/10 border border-blue-500/30 text-blue-400 text-sm font-medium hover:bg-blue-500/20 transition-colors flex items-center gap-2">
                    <Plus className="w-4 h-4" />
                    New Message
                  </button>
                </div>
                <div className="p-5">
                  {mockMessages.map((msg) => (
                    <div
                      key={msg.id}
                      onClick={() => setSelectedMessage(msg)}
                      className={`flex items-center gap-4 p-4 rounded-xl border mb-3 cursor-pointer transition-all ${
                        msg.read 
                          ? 'bg-white/[0.02] border-white/[0.05] hover:border-blue-500/30' 
                          : 'bg-blue-500/5 border-blue-500/20 hover:border-blue-500/40'
                      }`}
                    >
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 flex items-center justify-center flex-shrink-0">
                        <span className="text-white font-semibold text-sm">{msg.sender.charAt(0)}</span>
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between">
                          <h4 className={`font-medium ${msg.read ? 'text-slate-300' : 'text-white'}`}>{msg.sender}</h4>
                          <span className="text-xs text-slate-500">{msg.date}</span>
                        </div>
                        <p className={`text-sm ${msg.read ? 'text-slate-400' : 'text-slate-300 font-medium'}`}>{msg.subject}</p>
                        <p className="text-xs text-slate-500 mt-1 truncate">{msg.preview}</p>
                      </div>
                      {!msg.read && (
                        <div className="w-2 h-2 rounded-full bg-blue-400 flex-shrink-0" />
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Health Records Tab */}
            {activeTab === 'health-records' && (
              <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
                <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.08]">
                  <h3 className="font-semibold text-white flex items-center gap-2">
                    <FileText className="w-5 h-5 text-purple-400" />
                    Health Records
                  </h3>
                  <button className="px-4 py-2 rounded-lg bg-white/[0.05] border border-white/[0.08] text-slate-300 text-sm font-medium hover:bg-white/[0.08] transition-colors flex items-center gap-2">
                    <Download className="w-4 h-4" />
                    Export All
                  </button>
                </div>
                <div className="p-5">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {[
                      { title: 'Visit Summaries', count: 12, icon: FileText, color: 'cyan' },
                      { title: 'Immunizations', count: 8, icon: Shield, color: 'emerald' },
                      { title: 'Allergies', count: 3, icon: AlertCircle, color: 'amber' },
                      { title: 'Vitals History', count: 24, icon: Activity, color: 'blue' },
                    ].map((record, idx) => {
                      const Icon = record.icon;
                      const colorClasses = {
                        cyan: 'bg-cyan-500/10 border-cyan-500/20 text-cyan-400',
                        emerald: 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400',
                        amber: 'bg-amber-500/10 border-amber-500/20 text-amber-400',
                        blue: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
                      };
                      return (
                        <div key={idx} className={`p-4 rounded-xl border ${colorClasses[record.color]} cursor-pointer hover:opacity-80 transition-opacity`}>
                          <div className="flex items-center gap-3">
                            <Icon className="w-8 h-8" />
                            <div>
                              <h4 className="font-semibold text-white">{record.title}</h4>
                              <p className="text-sm text-slate-400">{record.count} records</p>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Quick Actions Panel */}
          <div className="lg:col-span-1">
            <div className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] rounded-2xl p-5 sticky top-24">
              <h3 className="font-semibold text-white mb-4 flex items-center gap-2">
                <Activity className="w-5 h-5 text-cyan-400" />
                Quick Actions
              </h3>
              <div className="space-y-3">
                <button 
                  onClick={() => setActiveTab('appointments')}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 font-medium hover:bg-cyan-500/20 transition-colors"
                >
                  <Calendar className="w-5 h-5" />
                  Schedule Appointment
                </button>
                <button 
                  onClick={() => setActiveTab('prescriptions')}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 font-medium hover:bg-emerald-500/20 transition-colors"
                >
                  <Pill className="w-5 h-5" />
                  Request Refill
                </button>
                <button 
                  onClick={() => setActiveTab('messages')}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-blue-400 font-medium hover:bg-blue-500/20 transition-colors"
                >
                  <MessageSquare className="w-5 h-5" />
                  Message Care Team
                </button>
                <button 
                  onClick={() => setActiveTab('health-records')}
                  className="w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-purple-500/10 border border-purple-500/30 text-purple-400 font-medium hover:bg-purple-500/20 transition-colors"
                >
                  <Download className="w-5 h-5" />
                  Download Records
                </button>
              </div>

              {/* HbA1c Trend Chart */}
              <div className="mt-6 pt-6 border-t border-white/[0.08]">
                <h4 className="font-semibold text-white mb-4 flex items-center gap-2">
                  <TrendingUp className="w-4 h-4 text-amber-400" />
                  HbA1c Trend
                </h4>
                <div className="h-40">
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={mockTrendData}>
                      <defs>
                        <linearGradient id="hba1cGradient" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.3}/>
                          <stop offset="95%" stopColor="#f59e0b" stopOpacity={0}/>
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
                      <XAxis dataKey="date" stroke="#64748b" fontSize={12} />
                      <YAxis stroke="#64748b" fontSize={12} domain={[5.5, 7.5]} />
                      <Tooltip 
                        contentStyle={{ 
                          backgroundColor: 'rgba(10,14,26,0.95)', 
                          border: '1px solid rgba(255,255,255,0.08)',
                          borderRadius: '8px',
                          color: '#e2e8f0'
                        }}
                      />
                      <Area type="monotone" dataKey="hba1c" stroke="#f59e0b" fill="url(#hba1cGradient)" strokeWidth={2} />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-3 flex items-center justify-between text-xs">
                  <span className="text-slate-400">Target: &lt;5.7%</span>
                  <span className="text-amber-400 font-medium">Current: 6.8%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="px-6 py-8 border-t border-white/[0.08] mt-8">
        <div className="text-center">
          <p className="text-red-400 font-semibold text-sm mb-2">
            ⚠️ Not for emergency use. Call 911 for medical emergencies.
          </p>
          <div className="flex items-center justify-center gap-6 text-sm text-slate-400 mb-4">
            <a href="#" className="hover:text-cyan-400 transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">HIPAA Notice</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">Terms of Service</a>
            <a href="#" className="hover:text-cyan-400 transition-colors">Contact Support</a>
          </div>
          <p className="text-xs text-slate-500">
            Last updated: January 15, 2026 at 10:30 AM
          </p>
        </div>
      </footer>

      {/* Lab Result Detail Modal */}
      {selectedLab && (
        <div 
          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={() => setSelectedLab(null)}
        >
          <div 
            className="bg-[#0a0e1a] border border-white/[0.08] rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
            onClick={e => e.stopPropagation()}
          >
            <div className="p-6 border-b border-white/[0.08]">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center">
                    <TestTube className="w-6 h-6 text-amber-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white">{selectedLab.testName}</h3>
                    <p className="text-sm text-slate-400">{selectedLab.date} • {selectedLab.category}</p>
                  </div>
                </div>
                <button 
                  onClick={() => setSelectedLab(null)}
                  className="p-2 hover:bg-white/[0.05] rounded-lg transition-colors text-slate-400"
                >
                  ✕
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="grid grid-cols-2 gap-4 mb-6">
                <div className="p-4 rounded-xl bg-white/[0.02] border border-white/[0.05]">
                  <p className="text-xs text-slate-400 mb-1">Result Value</p>
                  <p className="text-2xl font-bold text-white">{selectedLab.value} <span className="text-sm text-slate-400">{selectedLab.unit}</span></p>
                </div>
                <div className="p-4 rounded-xl bg-white/[0.02] border border-white/[0.05]">
                  <p className="text-xs text-slate-400 mb-1">Reference Range</p>
                  <p className="text-lg font-semibold text-white">{selectedLab.referenceRange}</p>
                </div>
              </div>
              
              <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 ${getStatusColor(selectedLab.status)}`}>
                {getStatusIcon(selectedLab.status)}
                <span className="font-medium capitalize">Status: {selectedLab.status}</span>
              </div>

              <h4 className="font-semibold text-white mb-4 flex items-center gap-2">
                <TrendingUp className="w-4 h-4 text-cyan-400" />
                Historical Trend
              </h4>
              <div className="h-48 mb-6">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={mockTrendData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
                    <XAxis dataKey="date" stroke="#64748b" fontSize={12} />
                    <YAxis stroke="#64748b" fontSize={12} />
                    <Tooltip 
                      contentStyle={{ 
                        backgroundColor: 'rgba(10,14,26,0.95)', 
                        border: '1px solid rgba(255,255,255,0.08)',
                        borderRadius: '8px',
                        color: '#e2e8f0'
                      }}
                    />
                    <Line type="monotone" dataKey={selectedLab.testName === 'HbA1c' ? 'hba1c' : 'glucose'} stroke="#3b82f6" strokeWidth={2} dot={{ fill: '#3b82f6' }} />
                  </LineChart>
                </ResponsiveContainer>
              </div>

              <div className="p-4 rounded-xl bg-blue-500/10 border border-blue-500/20 mb-6">
                <h5 className="font-medium text-blue-400 mb-2">What This Means</h5>
                <p className="text-sm text-slate-300">
                  {selectedLab.status === 'normal' 
                    ? `Your ${selectedLab.testName} level is within the normal range. Continue following your current health plan.`
                    : selectedLab.status === 'borderline'
                    ? `Your ${selectedLab.testName} level is slightly elevated. Consider discussing lifestyle modifications with your healthcare provider.`
                    : `Your ${selectedLab.testName} level is outside the normal range. Please schedule a follow-up appointment with your doctor.`
                  }
                </p>
              </div>

              <div className="flex gap-3">
                <button className="flex-1 py-3 rounded-xl bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 font-medium hover:bg-cyan-500/20 transition-colors flex items-center justify-center gap-2">
                  <Download className="w-4 h-4" />
                  Download PDF
                </button>
                <button className="flex-1 py-3 rounded-xl bg-white/[0.05] border border-white/[0.08] text-slate-300 font-medium hover:bg-white/[0.08] transition-colors">
                  Message Doctor
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Appointment Detail Modal */}
      {selectedAppointment && (
        <div 
          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={() => setSelectedAppointment(null)}
        >
          <div 
            className="bg-[#0a0e1a] border border-white/[0.08] rounded-2xl max-w-lg w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="p-6 border-b border-white/[0.08]">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-cyan-500/10 flex items-center justify-center">
                    <Calendar className="w-6 h-6 text-cyan-400" />
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white">{selectedAppointment.type}</h3>
                    <p className="text-sm text-slate-400">{selectedAppointment.date} at {selectedAppointment.time}</p>
                  </div>
                </div>
                <button 
                  onClick={() => setSelectedAppointment(null)}
                  className="p-2 hover:bg-white/[0.05] rounded-lg transition-colors text-slate-400"
                >
                  ✕
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="space-y-4 mb-6">
                <div className="flex items-start gap-3">
                  <Stethoscope className="w-5 h-5 text-slate-400 mt-0.5" />
                  <div>
                    <p className="text-sm text-slate-400">Provider</p>
                    <p className="text-white font-medium">{selectedAppointment.provider}</p>
                    <p className="text-sm text-slate-400">{selectedAppointment.specialty}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Clock className="w-5 h-5 text-slate-400 mt-0.5" />
                  <div>
                    <p className="text-sm text-slate-400">Date & Time</p>
                    <p className="text-white font-medium">{selectedAppointment.date} at {selectedAppointment.time}</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Activity className="w-5 h-5 text-slate-400 mt-0.5" />
                  <div>
                    <p className="text-sm text-slate-400">Location</p>
                    <p className="text-white font-medium">{selectedAppointment.location}</p>
                  </div>
                </div>
              </div>

              <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 ${getStatusColor(selectedAppointment.status)}`}>
                {getStatusIcon(selectedAppointment.status)}
                <span className="font-medium capitalize">Status: {selectedAppointment.status}</span>
              </div>

              <div className="flex gap-3">
                <button className="flex-1 py-3 rounded-xl bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 font-medium hover:bg-cyan-500/20 transition-colors">
                  Reschedule
                </button>
                <button className="flex-1 py-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 font-medium hover:bg-red-500/20 transition-colors">
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Message Detail Modal */}
      {selectedMessage && (
        <div 
          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={() => setSelectedMessage(null)}
        >
          <div 
            className="bg-[#0a0e1a] border border-white/[0.08] rounded-2xl max-w-2xl w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="p-6 border-b border-white/[0.08]">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 flex items-center justify-center">
                    <span className="text-white font-semibold text-sm">{selectedMessage.sender.charAt(0)}</span>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white">{selectedMessage.subject}</h3>
                    <p className="text-sm text-slate-400">From: {selectedMessage.sender} • {selectedMessage.date}</p>
                  </div>
                </div>
                <button 
                  onClick={() => setSelectedMessage(null)}
                  className="p-2 hover:bg-white/[0.05] rounded-lg transition-colors text-slate-400"
                >
                  ✕
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="prose prose-invert max-w-none mb-6">
                <p className="text-slate-300">{selectedMessage.preview}</p>
                <p className="text-slate-300 mt-4">
                  Please review your recent lab results and let me know if you have any questions. 
                  I recommend scheduling a follow-up appointment to discuss the borderline HbA1c levels.
                </p>
                <p className="text-slate-300 mt-4">
                  Best regards,<br />
                  Dr. Chen
                </p>
              </div>

              <div className="flex gap-3">
                <button className="flex-1 py-3 rounded-xl bg-blue-500/10 border border-blue-500/30 text-blue-400 font-medium hover:bg-blue-500/20 transition-colors">
                  Reply
                </button>
                <button className="flex-1 py-3 rounded-xl bg-white/[0.05] border border-white/[0.08] text-slate-300 font-medium hover:bg-white/[0.08] transition-colors">
                  Forward
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Refill Request Modal */}
      {showRefillModal && (
        <div 
          className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={() => setShowRefillModal(null)}
        >
          <div 
            className="bg-[#0a0e1a] border border-white/[0.08] rounded-2xl max-w-md w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="p-6 border-b border-white/[0.08]">
              <div className="flex items-center justify-between">
                <h3 className="text-lg font-semibold text-white">Request Refill</h3>
                <button 
                  onClick={() => setShowRefillModal(null)}
                  className="p-2 hover:bg-white/[0.05] rounded-lg transition-colors text-slate-400"
                >
                  ✕
                </button>
              </div>
            </div>
            <div className="p-6">
              <div className="mb-6">
                <p className="text-sm text-slate-400 mb-1">Medication</p>
                <p className="text-white font-semibold">{showRefillModal.medication} ({showRefillModal.dosage})</p>
              </div>
              <div className="mb-6">
                <p className="text-sm text-slate-400 mb-1">Current Refills Remaining</p>
                <p className="text-white font-semibold">{showRefillModal.refillsRemaining}</p>
              </div>
              <div className="mb-6">
                <p className="text-sm text-slate-400 mb-1">Pharmacy</p>
                <p className="text-white font-semibold">CVS Pharmacy #1234</p>
              </div>
              <div className="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 mb-6">
                <p className="text-sm text-emerald-400">
                  ✓ This medication is eligible for refill. Your request will be sent to {showRefillModal.prescriber} for approval.
                </p>
              </div>
              <button 
                onClick={() => setShowRefillModal(null)}
                className="w-full py-3 rounded-xl bg-emerald-500 text-white font-medium hover:bg-emerald-600 transition-colors"
              >
                Submit Refill Request
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}