import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, getDoc, onSnapshot, query, addDoc, updateDoc, deleteDoc, arrayUnion } from 'firebase/firestore';
import { 
  Plus, Users, ClipboardList, Activity, TestTube, Image as ImageIcon, 
  Search, ChevronRight, Save, Trash2, ArrowRight, UserPlus, Clock, 
  FileText, Menu, X, LogOut, Camera, Ruler, Weight, Stethoscope, ListChecks, Lock, Key, ShieldCheck, FileDown, Eye
} from 'lucide-react';

// --- إعدادات النظام السحابي ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'hostinger-med-app';

// --- مكونات واجهة المستخدم ---

const Card = ({ children, className = "" }) => (
  <div className={`bg-white rounded-2xl shadow-sm border border-slate-100 ${className}`}>
    {children}
  </div>
);

const Input = ({ label, ...props }) => (
  <div className="flex flex-col gap-1 w-full text-right">
    {label && <label className="text-xs font-bold text-slate-500 mr-1">{label}</label>}
    <input 
      {...props} 
      className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm rtl"
    />
  </div>
);

const Select = ({ label, options, ...props }) => (
  <div className="flex flex-col gap-1 w-full text-right">
    {label && <label className="text-xs font-bold text-slate-500 mr-1">{label}</label>}
    <select 
      {...props} 
      className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm rtl"
    >
      <option value="">اختر...</option>
      {options.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
    </select>
  </div>
);

const TextArea = ({ label, ...props }) => (
  <div className="flex flex-col gap-1 w-full text-right">
    {label && <label className="text-xs font-bold text-slate-500 mr-1">{label}</label>}
    <textarea 
      {...props} 
      rows={4}
      className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm rtl leading-relaxed"
    />
  </div>
);

// --- التطبيق الرئيسي ---

export default function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [activeTab, setActiveTab] = useState('list'); 
  const [patients, setPatients] = useState([]);
  const [selectedPatientId, setSelectedPatientId] = useState(null);
  const [searchQuery, setSearchQuery] = useState("");
  const [isSidebarOpen, setSidebarOpen] = useState(false);
  const [passInput, setPassInput] = useState("");
  const [loginError, setLoginError] = useState(false);

  const APP_PASSWORD = "1234"; 

  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Connection error:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  useEffect(() => {
    if (!user || !isAuthenticated) return;
    const q = collection(db, 'artifacts', appId, 'users', user.uid, 'patients');
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setPatients(data);
    }, (err) => console.error("Data fetch error:", err));
    return () => unsubscribe();
  }, [user, isAuthenticated]);

  const handleLogin = (e) => {
    e.preventDefault();
    if (passInput === APP_PASSWORD) {
      setIsAuthenticated(true);
      setLoginError(false);
    } else {
      setLoginError(true);
      setPassInput("");
    }
  };

  const handleAddPatient = async (patientData) => {
    if (!user) return;
    try {
      const docRef = await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'patients'), {
        ...patientData,
        createdAt: new Date().toISOString(),
        vitals: [],
        labs: [],
        images: [],
        recommendations: "",
        exam_notes: ""
      });
      setSelectedPatientId(docRef.id);
      setActiveTab('details');
    } catch (err) {
      console.error("Save error:", err);
    }
  };

  const selectedPatient = patients.find(p => p.id === selectedPatientId);

  if (loading) return (
    <div className="h-screen w-full flex items-center justify-center bg-slate-50">
      <div className="animate-spin rounded-full h-10 w-10 border-4 border-blue-600 border-t-transparent"></div>
    </div>
  );

  if (!isAuthenticated) {
    return (
      <div className="h-screen w-full flex items-center justify-center bg-slate-100 p-4 rtl text-right" dir="rtl">
        <Card className="w-full max-w-md p-6 md:p-10 shadow-2xl border-none">
          <div className="flex flex-col items-center mb-8 md:mb-10">
            <div className="w-20 h-20 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl flex items-center justify-center mb-6 shadow-xl rotate-3">
              <ShieldCheck className="text-white w-10 h-10" />
            </div>
            <h1 className="text-2xl font-black text-slate-800">سجلاتي الطبية</h1>
            <p className="text-slate-500 text-xs mt-2 text-center font-medium">نظام المتابعة الخاص والمؤمن</p>
          </div>
          
          <form onSubmit={handleLogin} className="space-y-6">
            <div>
              <label className="text-xs font-bold text-slate-400 block mb-2 mr-1">كلمة المرور</label>
              <div className="relative">
                <input 
                  type="password"
                  autoFocus
                  className={`w-full px-5 py-4 rounded-2xl border-2 focus:outline-none transition-all pr-14 text-lg tracking-widest ${loginError ? 'border-red-500 bg-red-50' : 'border-slate-100 bg-slate-50 focus:border-blue-500'}`}
                  placeholder="••••"
                  value={passInput}
                  onChange={(e) => setPassInput(e.target.value)}
                />
                <Key className={`absolute right-5 top-1/2 -translate-y-1/2 w-6 h-6 ${loginError ? 'text-red-500' : 'text-slate-300'}`} />
              </div>
              {loginError && <p className="text-red-500 text-xs mt-3 font-bold animate-pulse text-center">كلمة المرور خاطئة!</p>}
            </div>
            
            <button 
              type="submit"
              className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-3 text-lg"
            >
              <ArrowRight className="w-5 h-5 rotate-180" /> دخول النظام
            </button>
          </form>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 flex flex-col md:flex-row rtl" dir="rtl">
      {/* Sidebar Responsive */}
      <aside className={`${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'} md:translate-x-0 fixed md:relative z-40 w-72 h-full bg-white border-l border-slate-200 transition-transform duration-300 flex flex-col shadow-xl md:shadow-none`}>
        <div className="p-8 border-b border-slate-100 flex justify-between items-center md:block">
          <div>
            <div className="flex items-center gap-3 mb-1">
              <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white shadow-lg">
                <ClipboardList className="w-6 h-6" />
              </div>
              <h1 className="text-xl font-black text-blue-800">طبيبي الرقمي</h1>
            </div>
            <p className="text-[10px] text-slate-400 font-bold uppercase mr-1">Hostinger Private Edition</p>
          </div>
          <button onClick={() => setSidebarOpen(false)} className="md:hidden p-2 text-slate-400 hover:bg-slate-50 rounded-lg">
            <X className="w-6 h-6" />
          </button>
        </div>

        <nav className="flex-1 p-5 space-y-3">
          <button 
            onClick={() => { setActiveTab('list'); setSidebarOpen(false); }}
            className={`w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all ${activeTab === 'list' ? 'bg-blue-50 text-blue-700 font-black shadow-sm' : 'hover:bg-slate-50 text-slate-500'}`}
          >
            <Users className="w-5 h-5" /> قائمة المرضى
          </button>
          <button 
            onClick={() => { setActiveTab('add'); setSidebarOpen(false); }}
            className={`w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all ${activeTab === 'add' ? 'bg-blue-50 text-blue-700 font-black shadow-sm' : 'hover:bg-slate-50 text-slate-500'}`}
          >
            <UserPlus className="w-5 h-5" /> مريض جديد
          </button>
        </nav>

        <div className="p-6 border-t border-slate-100 text-center">
            <button 
              onClick={() => setIsAuthenticated(false)}
              className="w-full flex items-center justify-center gap-3 py-3 rounded-xl text-sm font-bold text-red-500 hover:bg-red-50 transition-colors"
            >
              <LogOut className="w-4 h-4" /> خروج آمن
            </button>
        </div>
      </aside>

      <main className="flex-1 flex flex-col min-w-0 h-screen overflow-hidden text-right">
        {/* Header */}
        <header className="bg-white border-b border-slate-200 px-4 md:px-6 py-4 flex items-center justify-between sticky top-0 z-30">
          <div className="flex items-center gap-3 overflow-hidden">
            <button onClick={() => setSidebarOpen(true)} className="md:hidden p-2 hover:bg-slate-100 rounded-xl transition-colors">
              <Menu className="w-6 h-6" />
            </button>
            <h2 className="text-base md:text-xl font-black text-slate-700 truncate">
              {activeTab === 'list' && "قائمة المرضى"}
              {activeTab === 'add' && "إضافة مريض"}
              {activeTab === 'details' && `${selectedPatient?.name || ''}`}
            </h2>
          </div>
          
          {activeTab === 'list' && (
            <div className="relative w-40 md:w-64 lg:w-96">
              <Search className="w-4 h-4 absolute right-3 md:right-4 top-1/2 -translate-y-1/2 text-slate-400" />
              <input 
                type="text" 
                placeholder="بحث سريع..."
                className="w-full pr-10 md:pr-12 pl-4 py-2 md:py-3 bg-slate-50 border border-slate-100 rounded-2xl text-xs md:text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all rtl"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          )}
        </header>

        {/* Dynamic Content */}
        <div className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-10">
          {activeTab === 'list' && (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
              {patients.filter(p => p.name.includes(searchQuery)).map(p => (
                <Card 
                  key={p.id} 
                  className="cursor-pointer hover:border-blue-300 hover:shadow-xl transition-all group overflow-hidden"
                >
                  <div onClick={() => { setSelectedPatientId(p.id); setActiveTab('details'); }} className="p-5 md:p-6">
                    <div className="flex justify-between items-start mb-4">
                      <div className="w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-blue-100 to-indigo-50 text-blue-600 rounded-2xl flex items-center justify-center font-black text-lg">
                        {p.name.charAt(0)}
                      </div>
                      <div className="text-[8px] md:text-[9px] bg-blue-600 text-white px-2 py-1 rounded-full font-bold uppercase tracking-widest">
                        {p.age} Y
                      </div>
                    </div>
                    <h3 className="font-black text-lg text-slate-800 mb-1 truncate">{p.name}</h3>
                    <p className="text-xs text-slate-500 line-clamp-1 mb-4">{p.reason || 'لا يوجد سبب قبول'}</p>
                    <div className="flex items-center justify-between pt-4 border-t border-slate-50 text-[10px] text-slate-400 font-bold">
                      <span className="flex items-center gap-1.5"><Activity className="w-3.5 h-3.5" /> {p.vitals?.length || 0} متابعة</span>
                      <ChevronRight className="w-5 h-5 text-slate-200 group-hover:text-blue-500" />
                    </div>
                  </div>
                </Card>
              ))}
              {patients.length === 0 && <div className="col-span-full py-20 text-center text-slate-300 font-bold">لا يوجد بيانات حالياً</div>}
            </div>
          )}

          {activeTab === 'add' && <PatientAddForm onSave={handleAddPatient} />}

          {activeTab === 'details' && selectedPatient && (
            <PatientDetailsView 
              patient={selectedPatient} 
              onUpdate={async (updates) => {
                await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'patients', selectedPatient.id), updates);
              }}
              onDelete={async () => {
                if (window.confirm("حذف ملف المريض نهائياً؟")) {
                  await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'patients', selectedPatient.id));
                  setActiveTab('list');
                }
              }}
            />
          )}
        </div>
      </main>

      {isSidebarOpen && <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 bg-slate-900/40 z-30 md:hidden backdrop-blur-sm transition-opacity"></div>}
    </div>
  );
}

// --- نموذج إضافة مريض جديد ---

function PatientAddForm({ onSave }) {
  const [data, setData] = useState({
    name: "", age: "", gender: "", maritalStatus: "", 
    job: "", companion: "", reason: "",
    height: "", weight: "",
    surgical_history: "", drug_history: "", medical_history: "",
    family_history: "", allergy_history: "", smoking: "",
    complaint_details: "",
    procedures_initial: "", 
    exam_head: "", exam_chest: "", exam_heart: "", exam_abdomen: "", exam_limbs: "", exam_neuro: ""
  });

  return (
    <div className="max-w-4xl mx-auto pb-24">
      <Card className="p-6 md:p-10 shadow-xl border-none">
        <div className="space-y-10">
          <section>
            <h3 className="text-lg font-black text-blue-700 mb-6 flex items-center gap-3"><UserPlus className="w-5 h-5" /> المعلومات الأساسية</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6">
              <Input label="الاسم الرباعي" value={data.name} onChange={e => setData({...data, name: e.target.value})} />
              <Input label="العمر" value={data.age} onChange={e => setData({...data, age: e.target.value})} />
              <div className="grid grid-cols-2 gap-4">
                <Select label="الجنس" value={data.gender} onChange={e => setData({...data, gender: e.target.value})} options={[{label: "ذكر", value: "male"}, {label: "أنثى", value: "female"}]} />
                <Select label="الحالة الاجتماعية" value={data.maritalStatus} onChange={e => setData({...data, maritalStatus: e.target.value})} options={[{label: "أعزب", value: "single"}, {label: "متزوج", value: "married"}]} />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <Input label="الطول (سم)" value={data.height} onChange={e => setData({...data, height: e.target.value})} />
                <Input label="الوزن (كغ)" value={data.weight} onChange={e => setData({...data, weight: e.target.value})} />
              </div>
              <div className="md:col-span-2">
                <Input label="سبب القبول" value={data.reason} onChange={e => setData({...data, reason: e.target.value})} />
              </div>
            </div>
          </section>

          <section>
            <h3 className="text-lg font-black text-blue-700 mb-6 flex items-center gap-3"><Stethoscope className="w-5 h-5" /> السوابق والإجراءات</h3>
            <TextArea label="تم إجراء (الإجراءات الفورية):" value={data.procedures_initial} onChange={e => setData({...data, procedures_initial: e.target.value})} />
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
              <TextArea label="السوابق المرضية" value={data.medical_history} onChange={e => setData({...data, medical_history: e.target.value})} />
              <TextArea label="السوابق الجراحية" value={data.surgical_history} onChange={e => setData({...data, surgical_history: e.target.value})} />
            </div>
          </section>

          <div className="pt-6 border-t flex justify-end">
            <button onClick={() => onSave(data)} className="w-full md:w-auto px-10 py-4 bg-blue-600 text-white font-black rounded-2xl shadow-xl flex items-center justify-center gap-3">
              <Save className="w-5 h-5" /> حفظ الملف الطبي
            </button>
          </div>
        </div>
      </Card>
    </div>
  );
}

// --- شاشة عرض التفاصيل والأرشيف المتعدد ---

function PatientDetailsView({ patient, onUpdate, onDelete }) {
  const [subTab, setSubTab] = useState('vitals'); 
  const [isAddingVital, setIsAddingVital] = useState(false);
  const [isAddingLab, setIsAddingLab] = useState(false);

  const [newVital, setNewVital] = useState({ time: "8 صباحاً", hr: "", bp: "", sat: "", t: "", rr: "", uop: "", glu: "", note: "" });
  const labKeys = ["WBC", "N/L", "HGB", "MCV", "PLT", "GLU", "ALBU", "K", "NA", "CL", "I.Ca", "UR", "CR", "CRP"];
  const [newLab, setNewLab] = useState({ date: new Date().toLocaleDateString('en-GB') });

  const handleAddVital = () => {
    onUpdate({ vitals: arrayUnion({ ...newVital, timestamp: new Date().toISOString() }) });
    setIsAddingVital(false);
    setNewVital({ time: "8 صباحاً", hr: "", bp: "", sat: "", t: "", rr: "", uop: "", glu: "", note: "" });
  };

  const handleAddLab = () => {
    onUpdate({ labs: arrayUnion({ ...newLab, timestamp: new Date().toISOString() }) });
    setIsAddingLab(false);
    setNewLab({ date: new Date().toLocaleDateString('en-GB') });
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      // تم حذف شرط الحجم (file.size) بناءً على طلب المستخدم
      const reader = new FileReader();
      reader.onloadend = () => {
        onUpdate({ 
          images: arrayUnion({ 
            data: reader.result, 
            type: file.type, 
            title: prompt("عنوان التقرير أو الأشعة:") || "تقرير طبي", 
            date: new Date().toISOString() 
          }) 
        });
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="max-w-6xl mx-auto pb-24 text-right">
      {/* Tabs Responsive Scrollable on Mobile */}
      <div className="flex overflow-x-auto pb-2 mb-6 gap-2 no-scrollbar">
        {[
          {id: 'summary', label: 'السيرة', icon: FileText},
          {id: 'vitals', label: 'المتابعة', icon: Activity},
          {id: 'labs', label: 'التحاليل', icon: TestTube},
          {id: 'images', label: 'الأرشيف', icon: ImageIcon},
          {id: 'notes', label: 'هامش', icon: ClipboardList},
        ].map(t => (
          <button 
            key={t.id}
            onClick={() => setSubTab(t.id)}
            className={`flex-shrink-0 flex items-center gap-2 px-5 py-3 rounded-2xl text-xs font-black transition-all ${subTab === t.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-100 scale-105' : 'bg-white text-slate-500 hover:bg-slate-50 border border-slate-100'}`}
          >
            <t.icon className="w-4 h-4" /> {t.label}
          </button>
        ))}
        <button onClick={onDelete} className="mr-auto px-4 py-3 rounded-2xl bg-red-50 text-red-600 border border-red-100"><Trash2 className="w-4 h-4" /></button>
      </div>

      {subTab === 'summary' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card className="p-6 md:p-8 shadow-lg border-none">
            <h4 className="text-lg font-black text-blue-800 mb-6 border-b pb-4">الإجراءات الأولية</h4>
            <TextArea value={patient.procedures_initial || ""} onChange={e => onUpdate({ procedures_initial: e.target.value })} />
          </Card>
          <Card className="p-6 md:p-8 shadow-lg border-none">
            <h4 className="text-lg font-black text-blue-800 mb-6 border-b pb-4">بيانات المريض</h4>
            <div className="grid grid-cols-2 gap-y-4 text-xs font-bold">
              <span className="text-slate-400 font-medium">الاسم:</span> <b>{patient.name}</b>
              <span className="text-slate-400 font-medium">العمر/الجنس:</span> <b>{patient.age} / {patient.gender === 'male' ? 'ذكر' : 'أنثى'}</b>
              <span className="text-slate-400 font-medium">الحالة:</span> <b>{patient.maritalStatus || '-'}</b>
              <span className="text-slate-400 font-medium">الوزن/الطول:</span> <b>{patient.weight || '-'} / {patient.height || '-'}</b>
              <span className="text-slate-400 font-medium text-red-400">الشكاية:</span> <b className="text-red-600">{patient.reason}</b>
            </div>
          </Card>
          <Card className="p-6 md:p-8 shadow-lg border-none md:col-span-2">
            <h4 className="text-lg font-black text-blue-800 mb-6 border-b pb-4">السوابق المرضية</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs leading-relaxed">
              <div className="bg-slate-50 p-4 rounded-2xl"><span className="text-slate-400 block mb-2 font-bold">مرضية:</span> {patient.medical_history || 'لا يوجد'}</div>
              <div className="bg-slate-50 p-4 rounded-2xl"><span className="text-slate-400 block mb-2 font-bold">جراحية:</span> {patient.surgical_history || 'لا يوجد'}</div>
            </div>
          </Card>
        </div>
      )}

      {subTab === 'vitals' && (
        <div className="space-y-6">
          <Card className="overflow-hidden border-none shadow-lg">
            <div className="p-5 border-b bg-slate-50 flex justify-between items-center">
              <h4 className="font-black text-slate-700 text-sm">متابعة العلامات الحيوية</h4>
              <button onClick={() => setIsAddingVital(true)} className="px-4 py-2 bg-blue-600 text-white rounded-xl text-[10px] font-black flex items-center gap-2">
                <Plus className="w-3.5 h-3.5" /> إضافة
              </button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-right text-sm">
                <thead className="bg-slate-100 text-slate-500 font-bold uppercase">
                  <tr>
                    <th className="px-4 py-4 border-l">TIME</th>
                    <th className="px-4 py-4">HR</th><th className="px-4 py-4">BP</th>
                    <th className="px-4 py-4">SAT</th><th className="px-4 py-4">T</th>
                    <th className="px-4 py-4">RR</th><th className="px-4 py-4">UOP</th>
                    <th className="px-4 py-4">GLU</th><th className="px-4 py-4">ملاحظات</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {patient.vitals?.sort((a,b) => b.timestamp.localeCompare(a.timestamp)).map((v, i) => (
                    <tr key={i} className="hover:bg-blue-50/20 font-medium">
                      <td className="px-4 py-4 font-black text-blue-700 border-l">{v.time}</td>
                      <td className="px-4 py-4">{v.hr}</td><td className="px-4 py-4 font-mono">{v.bp}</td>
                      <td className="px-4 py-4 text-blue-600 font-bold">{v.sat}</td><td className="px-4 py-4">{v.t}</td>
                      <td className="px-4 py-4">{v.rr}</td><td className="px-4 py-4">{v.uop}</td>
                      <td className="px-4 py-4 text-orange-600 font-bold">{v.glu}</td><td className="px-4 py-4 text-[10px] text-slate-400">{v.note}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
          <Card className="p-6 md:p-8 border-2 border-blue-50 shadow-xl">
            <h4 className="text-lg font-black text-blue-800 mb-6 flex items-center gap-3"><ListChecks className="w-5 h-5" /> التوصيات الطبية اليومية</h4>
            <TextArea 
              rows={10}
              placeholder="سجل الخطط العلاجية والأوامر الطبية هنا..."
              value={patient.recommendations || ""}
              onChange={e => onUpdate({ recommendations: e.target.value })}
              className="bg-white border-blue-100 text-lg"
            />
          </Card>
        </div>
      )}

      {subTab === 'labs' && (
        <Card className="overflow-hidden shadow-lg border-none">
          <div className="p-5 border-b bg-slate-50 flex justify-between items-center">
            <h4 className="font-black text-slate-700 text-sm">أرشيف التحاليل المخبرية</h4>
            <button onClick={() => setIsAddingLab(true)} className="px-4 py-2 bg-blue-600 text-white rounded-xl text-[10px] font-black flex items-center gap-2">
              <Plus className="w-3.5 h-3.5" /> جديد
            </button>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-right text-[10px] md:text-xs">
              <thead className="bg-slate-100 text-slate-500 font-black">
                <tr>
                  <th className="px-4 py-4 border-l">التاريخ</th>
                  {labKeys.map(k => <th key={k} className="px-2 py-4 text-center">{k}</th>)}
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {patient.labs?.map((l, i) => (
                  <tr key={i} className="hover:bg-slate-50 font-mono">
                    <td className="px-4 py-4 font-black text-blue-700 border-l">{l.date}</td>
                    {labKeys.map(k => <td key={k} className={`px-2 py-4 text-center ${l[k] ? 'text-slate-800 font-bold' : 'text-slate-300'}`}>{l[k] || '-'}</td>)}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {subTab === 'images' && (
        <div className="space-y-8">
          <Card className="p-10 border-dashed border-4 border-slate-100 flex flex-col items-center justify-center bg-white hover:bg-blue-50 hover:border-blue-200 transition-all cursor-pointer relative group rounded-3xl">
            <input type="file" accept="image/*,application/pdf" onChange={handleFileUpload} className="absolute inset-0 opacity-0 cursor-pointer" />
            <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
               <Camera className="w-8 h-8 text-blue-600" />
            </div>
            <p className="font-black text-base text-slate-700">رفع مرفقات (صورة أشعة / إيكو / تقرير PDF)</p>
            <p className="text-[10px] text-slate-400 mt-1 font-bold">يدعم كافة صيغ الصور و مستندات الـ PDF</p>
          </Card>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            {patient.images?.map((img, i) => (
              <Card key={i} className="overflow-hidden group hover:shadow-2xl transition-all border-none rounded-3xl bg-white">
                <div className="aspect-square relative overflow-hidden bg-slate-50 flex items-center justify-center">
                  {img.type === 'application/pdf' ? (
                    <div className="flex flex-col items-center gap-3">
                       <FileText className="w-16 h-16 text-blue-500" />
                       <span className="text-[10px] font-black text-slate-400">مستند PDF</span>
                    </div>
                  ) : (
                    <img src={img.data} className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-700" alt="" />
                  )}
                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-3">
                    <button 
                      onClick={() => {
                         const win = window.open();
                         if (img.type === 'application/pdf') {
                           win.document.write(`<iframe src="${img.data}" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>`);
                         } else {
                           win.document.write(`<body style="margin:0; background:#000; display:flex; justify-content:center; align-items:center;"><img src="${img.data}" style="max-width:100%; max-height:100%"/></body>`);
                         }
                      }}
                      className="p-3 bg-white text-slate-900 rounded-full shadow-xl"
                    >
                      <Eye className="w-5 h-5" />
                    </button>
                    <a href={img.data} download={img.title} className="p-3 bg-blue-600 text-white rounded-full shadow-xl">
                       <FileDown className="w-5 h-5" />
                    </a>
                  </div>
                </div>
                <div className="p-4 border-t border-slate-50">
                  <b className="text-slate-800 text-xs block mb-1 truncate">{img.title}</b>
                  <span className="text-[9px] text-slate-400 font-bold uppercase">{new Date(img.date).toLocaleDateString()}</span>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {subTab === 'notes' && (
        <Card className="p-6 md:p-10 border-none shadow-xl rounded-3xl">
          <h4 className="text-lg font-black text-slate-700 mb-6 flex items-center gap-2">
            <ClipboardList className="w-6 h-6 text-blue-600" /> هامش الإضافة والتعديل
          </h4>
          <TextArea 
            placeholder="ملاحظات إضافية، تفاصيل تاريخ العائلة، متابعات خاصة..."
            value={patient.exam_notes || ""}
            onChange={e => onUpdate({ exam_notes: e.target.value })}
            className="min-h-[500px] text-base md:text-lg bg-slate-50/50 border-none"
          />
        </Card>
      )}

      {/* مودال المتابعة */}
      {isAddingVital && (
        <div className="fixed inset-0 bg-slate-900/70 z-50 flex items-center justify-center p-4 backdrop-blur-md">
          <div className="bg-white rounded-3xl w-full max-w-lg p-6 md:p-8 shadow-2xl text-right overflow-y-auto max-h-[90vh]">
            <div className="flex justify-between items-center mb-8"><h3 className="text-xl font-black">متابعة جديدة</h3><button onClick={() => setIsAddingVital(false)} className="p-2 hover:bg-slate-100 rounded-full"><X/></button></div>
            <div className="grid grid-cols-2 gap-4 mb-8">
              <Select label="الوقت" value={newVital.time} onChange={e => setNewVital({...newVital, time: e.target.value})} options={[{label:"8 صباحاً", value:"8 صباحاً"},{label:"12 ظهراً", value:"12 ظهراً"},{label:"6 مساءً", value:"6 مساءً"},{label:"12 ليلاً", value:"12 ليلاً"},{label:"6 صباحاً", value:"6 صباحاً"}]} />
              <Input label="HR" value={newVital.hr} onChange={e => setNewVital({...newVital, hr: e.target.value})} />
              <Input label="BP" value={newVital.bp} onChange={e => setNewVital({...newVital, bp: e.target.value})} />
              <Input label="SAT" value={newVital.sat} onChange={e => setNewVital({...newVital, sat: e.target.value})} />
              <Input label="T" value={newVital.t} onChange={e => setNewVital({...newVital, t: e.target.value})} />
              <Input label="RR" value={newVital.rr} onChange={e => setNewVital({...newVital, rr: e.target.value})} />
              <Input label="UOP" value={newVital.uop} onChange={e => setNewVital({...newVital, uop: e.target.value})} />
              <Input label="GLU" value={newVital.glu} onChange={e => setNewVital({...newVital, glu: e.target.value})} />
            </div>
            <TextArea label="ملاحظات القياس" value={newVital.note} onChange={e => setNewVital({...newVital, note: e.target.value})} />
            <button onClick={handleAddVital} className="w-full mt-6 py-4 bg-blue-600 text-white rounded-2xl font-black shadow-lg">حفظ القياسات</button>
          </div>
        </div>
      )}

      {/* مودال التحاليل */}
      {isAddingLab && (
        <div className="fixed inset-0 bg-slate-900/70 z-50 flex items-center justify-center p-4 backdrop-blur-md">
          <div className="bg-white rounded-3xl w-full max-w-5xl p-6 md:p-8 shadow-2xl overflow-y-auto max-h-[90vh] text-right">
            <div className="flex justify-between items-center mb-8"><h3 className="text-xl font-black">نتائج مخبرية</h3><button onClick={() => setIsAddingLab(false)} className="p-2 hover:bg-slate-100 rounded-full"><X/></button></div>
            <Input label="التاريخ" value={newLab.date} onChange={e => setNewLab({...newLab, date: e.target.value})} />
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3 md:gap-4 my-8">
              {labKeys.map(k => <Input key={k} label={k} value={newLab[k] || ""} onChange={e => setNewLab({...newLab, [k]: e.target.value})} />)}
            </div>
            <button onClick={handleAddLab} className="w-full py-4 bg-blue-600 text-white rounded-2xl font-black shadow-lg">حفظ في الأرشيف</button>
          </div>
        </div>
      )}
    </div>
  );
}