import { useState, useEffect, useMemo, useCallback, useRef } from "react";

const DEFAULT_TEACHERS = [
  {name:"خالد علي العطوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"احمد ظافر الشهري",id:"",specialty:"",jobNum:"",phone:""},
  {name:"اسامة عبدالرحمن العتيق",id:"",specialty:"",jobNum:"",phone:""},
  {name:"سهل عبدالله البلوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"عمر فالح البلوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"فهد محمد الشامان",id:"",specialty:"",jobNum:"",phone:""},
  {name:"طارق حسن حكمي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"سلمان عوده البلوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"احمد موسى نوح",id:"",specialty:"",jobNum:"",phone:""},
  {name:"عبدالهادي عمر العنزي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"سلطان صالح الشمري",id:"",specialty:"",jobNum:"",phone:""},
  {name:"صالح شرفاتي العبدلي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"سليمان حمد العطوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"محمد عياد البلوي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"عبدالله محمد سلامي",id:"",specialty:"",jobNum:"",phone:""},
  {name:"محمد مسلم البلوي",id:"",specialty:"",jobNum:"",phone:""}
];

const TASK_KEYS=["morning","waiting","supervision","duty","madrasati"];
const TASK_LABELS=["الطابور الصباحي","الانتظار","الإشراف","المناوبة","منصة مدرستي"];
const DAYS_AR=["الأحد","الإثنين","الثلاثاء","الأربعاء","الخميس"];
const MONTHS_G=["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
const SK="task_reg_v5";
const DEFAULT_SCHOOL={schoolName:"مسلمة بن عبدالملك الابتدائية",region:"الإدارة العامة للتعليم بمنطقة تبوك",principal:"صالح فريج الحويطي",vice:"سعد عتيق العطوي",gender:"male"};
const GL={male:{principal:"مدير المدرسة",vice:"وكيل المدرسة",teacher:"المعلم",teachers:"المعلمين"},female:{principal:"مديرة المدرسة",vice:"وكيلة المدرسة",teacher:"المعلمة",teachers:"المعلمات"}};

function dk(d){return`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`}
function fmtD(d){return`${d.getDate()} ${MONTHS_G[d.getMonth()]} ${d.getFullYear()}م`}
function dayN(d){return["الأحد","الإثنين","الثلاثاء","الأربعاء","الخميس","الجمعة","السبت"][d.getDay()]}
function dayI(d){return d.getDay()}
function wkD(b){const d=new Date(b),diff=d.getDate()-d.getDay();return Array.from({length:5},(_,i)=>{const x=new Date(d);x.setDate(diff+i);return x})}
function mKey(d){return`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`}
function getWD(y,m){const days=[],dim=new Date(y,m+1,0).getDate();for(let i=1;i<=dim;i++){const d=new Date(y,m,i);if(d.getDay()<=4)days.push(d)}return days}

const Chk=()=><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;
const Xm=()=><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
const Lk=()=><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" opacity=".25"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>;
const ARi=()=><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>;
const ALi=()=><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>;

export default function App(){
  const[teachers,setTeachers]=useState(DEFAULT_TEACHERS);
  const[records,setRecords]=useState({});
  const[att,setAtt]=useState({});
  const[schedules,setSchedules]=useState({supervisionDay:{},dutyMonth:{},dailyDuty:{}});
  const[school,setSchool]=useState(DEFAULT_SCHOOL);
  const[curDate,setCurDate]=useState(new Date());
  const[page,setPage]=useState("daily");
  const[toast,setToast]=useState(null);
  const[loaded,setLoaded]=useState(false);
  const[accForm,setAccForm]=useState(null);

  const dKey=dk(curDate),tDI=dayI(curDate),gl=GL[school.gender]||GL.male;

  useEffect(()=>{(async()=>{try{if(window.storage){const r=await window.storage.get(SK);if(r?.value){const p=JSON.parse(r.value);if(p.teachers)setTeachers(p.teachers);if(p.records)setRecords(p.records);if(p.att)setAtt(p.att);if(p.schedules)setSchedules(s=>({...s,...p.schedules}));if(p.school)setSchool(s=>({...s,...p.school}));}}}catch(e){}setLoaded(true)})();},[]);

  const save=useCallback((t,r,s,sc,a)=>{try{window.storage?.set(SK,JSON.stringify({teachers:t,records:r,schedules:s,school:sc,att:a}))}catch(e){}},[]);
  const upT=t=>{setTeachers(t);save(t,records,schedules,school,att)};
  const upR=r=>{setRecords(r);save(teachers,r,schedules,school,att)};
  const upS=s=>{setSchedules(s);save(teachers,records,s,school,att)};
  const upSc=sc=>{setSchool(sc);save(teachers,records,schedules,sc,att)};
  const upA=a=>{setAtt(a);save(teachers,records,schedules,school,a)};

  const emptyDay=useCallback(()=>teachers.map(()=>TASK_KEYS.map(()=>null)),[teachers]);
  const dayData=useMemo(()=>records[dKey]||emptyDay(),[records,dKey,emptyDay]);
  const dayAtt=useMemo(()=>att[dKey]||{},[att,dKey]);

  const setDD=useCallback(nd=>{upR({...records,[dKey]:nd})},[dKey,records]);
  const togAtt=useCallback(ti=>{const na={...att};if(!na[dKey])na[dKey]={};const cur=na[dKey][ti];na[dKey][ti]=cur===undefined?true:cur===true?false:undefined;if(na[dKey][ti]===undefined)delete na[dKey][ti];upA(na)},[att,dKey]);

  const appTasks=useMemo(()=>teachers.map((_,ti)=>TASK_KEYS.map(key=>{
    if(dayAtt[ti]===false)return false;
    if(key==="supervision")return schedules.supervisionDay[ti]!==undefined&&schedules.supervisionDay[ti]===tDI;
    if(key==="duty"){if(schedules.dailyDuty?.[ti])return true;const mk2=mKey(curDate),dm=schedules.dutyMonth?.[mk2];if(dm)return Object.entries(dm).some(([d2,idx])=>idx===ti&&d2===dKey);return false}
    return true
  })),[schedules,tDI,teachers,curDate,dKey,dayAtt]);

  const togCell=useCallback((ti,ki)=>{if(!appTasks[ti]?.[ki])return;const nd=dayData.map(r=>[...r]);const c=nd[ti]?.[ki];nd[ti][ki]=c===null?1:c===1?0:null;setDD(nd)},[dayData,setDD,appTasks]);

  const stats=useMemo(()=>{let comp=0,nonC=0,absent=0,present=0;teachers.forEach((_,ti)=>{if(dayAtt[ti]===false){absent++;return}if(dayAtt[ti]===true)present++;let has=false,allG=true;(dayData[ti]||[]).forEach((v,ki)=>{if(!appTasks[ti]?.[ki])return;if(v!==null){has=true;if(v!==1)allG=false}});if(has){if(allG)comp++;else nonC++}});const rated=comp+nonC;return{total:teachers.length,comp,nonC,rate:rated>0?Math.round(comp/rated*100):0,absent,present}},[dayData,appTasks,teachers,dayAtt]);

  const nav=n=>{const d=new Date(curDate);d.setDate(d.getDate()+n);setCurDate(d)};
  const sToast=m=>{setToast(m);setTimeout(()=>setToast(null),2500)};

  if(!loaded)return <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100vh',fontFamily:'Tajawal,sans-serif',direction:'rtl'}}><div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:800,color:'#1a5c3a'}}>سجل متابعة المهام</div><div style={{fontSize:12,color:'#999',marginTop:6}}>جاري التحميل...</div></div></div>;

  return(<div dir="rtl" style={{fontFamily:"'Tajawal',sans-serif",background:'#f0f2f5',minHeight:'100vh',padding:'14px 14px 90px'}}>
    <style>{`@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@600;700;900&display=swap');*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}@keyframes su{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bg{from{width:0}}.su{animation:su .35s ease-out}.bg{animation:bg .6s ease-out}button{cursor:pointer;border:none;background:none;font-family:inherit}button:active{transform:scale(0.95)}input,select{font-family:'Tajawal',sans-serif}@media print{.no-print{display:none!important}}`}</style>

    <div style={{background:'linear-gradient(135deg,#1a5c3a,#0d3d25)',borderRadius:14,padding:'16px 18px',marginBottom:10,position:'relative',overflow:'hidden',boxShadow:'0 5px 18px rgba(26,92,58,.2)'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',position:'relative',zIndex:1}}>
        <div style={{display:'flex',alignItems:'center',gap:7}}><div style={{width:32,height:32,background:'rgba(255,255,255,.12)',borderRadius:8,display:'flex',alignItems:'center',justifyContent:'center'}}><svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z"/></svg></div><div style={{color:'white',fontWeight:700,fontSize:11}}>وزارة التعليم</div></div>
        <div style={{textAlign:'left',color:'rgba(255,255,255,.65)',fontSize:8,lineHeight:1.7}}>{school.region}<br/>{school.schoolName}</div>
      </div>
      <div style={{textAlign:'center',marginTop:6,position:'relative',zIndex:1}}><h1 style={{fontFamily:"'Cairo',sans-serif",fontSize:17,fontWeight:900,color:'white',margin:0}}>سجل متابعة المهام</h1></div>
    </div>

    <div className="no-print" style={{display:'flex',gap:3,marginBottom:9}}>
      {[{k:'daily',l:'📋 اليومية'},{k:'teachers',l:`👥 ${gl.teachers}`},{k:'schedules',l:'📅 الجداول'},{k:'reports',l:'📊 التقارير'},{k:'settings',l:'⚙️'}].map(t=><button key={t.k} onClick={()=>setPage(t.k)} style={{flex:1,padding:'8px 2px',borderRadius:8,background:page===t.k?'#1a5c3a':'white',color:page===t.k?'white':'#666',fontWeight:700,fontSize:9.5,boxShadow:page===t.k?'0 3px 8px rgba(26,92,58,.3)':'0 1px 2px rgba(0,0,0,.04)',border:page===t.k?'none':'1px solid #e8e8e8'}}>{t.l}</button>)}
    </div>

    {page==='daily'&&<DailyPage {...{teachers,curDate,nav,dayData,togCell,stats,appTasks,schedules,dKey,gl,dayAtt,togAtt,school,setAccForm,sToast,emptyDay,records,att,upR:setDD,upA}} goToday={()=>setCurDate(new Date())} resetDay={()=>{if(confirm('مسح بيانات هذا اليوم؟')){setDD(emptyDay());const na={...att};delete na[dKey];upA(na);sToast('تم ✓')}}}/>}
    {page==='teachers'&&<TeachersPage {...{teachers,gl,sToast}} upT={upT}/>}
    {page==='schedules'&&<SchedPage {...{teachers,schedules,curDate,sToast,gl}} upS={upS}/>}
    {page==='reports'&&<ReportsPage {...{teachers,curDate,nav,records,schedules,att,gl}}/>}
    {page==='settings'&&<SettPage {...{school,sToast,gl}} upSc={upSc}/>}

    {accForm&&<AccModal {...{accForm,teachers,school,gl}} onClose={()=>setAccForm(null)}/>}

    <div className="no-print" style={{background:'white',borderRadius:8,padding:'9px 12px',display:'flex',justifyContent:'space-between',marginTop:10,border:'1px solid #eee'}}>
      <div style={{textAlign:'center'}}><div style={{fontSize:7,color:'#aaa'}}>{gl.vice}</div><div style={{fontWeight:700,fontSize:10,color:'#0d3d25'}}>{school.vice}</div></div>
      <div style={{textAlign:'center'}}><div style={{fontSize:7,color:'#aaa'}}>{gl.principal}</div><div style={{fontWeight:700,fontSize:10,color:'#0d3d25'}}>{school.principal}</div></div>
    </div>
    {toast&&<div style={{position:'fixed',bottom:22,left:'50%',transform:'translateX(-50%)',background:'#0d3d25',color:'white',padding:'9px 20px',borderRadius:9,fontSize:11,fontWeight:700,boxShadow:'0 5px 16px rgba(0,0,0,.2)',zIndex:999}} className="su">{toast}</div>}
  </div>);
}

/* ═══════ DAILY ═══════ */
function DailyPage({teachers,curDate,nav,dayData,togCell,stats,appTasks,goToday,resetDay,dKey,gl,dayAtt,togAtt,school,setAccForm,sToast,emptyDay}){
  const isToday=dk(curDate)===dk(new Date()),isWE=dayI(curDate)>=5;
  const exportCSV=()=>{let csv='\uFEFF#,الحالة,اسم '+gl.teacher+','+TASK_LABELS.join(',')+'\n';dayData.forEach((row,i)=>{if(i>=teachers.length)return;const a=dayAtt[i]===false?'غائب':'حاضر';const vals=row.map((v,ki)=>!appTasks[i]?.[ki]?'غير مطلوب':v===1?'ملتزم':v===0?'غير ملتزم':'-');csv+=[i+1,a,teachers[i].name,...vals].join(',')+'\n'});const b=new Blob([csv],{type:'text/csv;charset=utf-8;'});const a=document.createElement('a');a.href=URL.createObjectURL(b);a.download=`سجل_${dKey}.csv`;a.click();sToast('تم التصدير ✓')};

  return <div className="su">
    <div className="no-print" style={{background:'white',borderRadius:9,padding:'8px 10px',marginBottom:9,display:'flex',alignItems:'center',justifyContent:'space-between',border:'1px solid #eee'}}>
      <button onClick={()=>nav(1)} style={{padding:4,borderRadius:5,background:'#f0f2f5'}}><ARi/></button>
      <div style={{textAlign:'center'}}><div style={{fontWeight:800,fontSize:12,color:'#1a1a2e'}}>{dayN(curDate)} - {fmtD(curDate)}</div>{!isToday&&<button onClick={goToday} style={{color:'#1a5c3a',fontSize:9,fontWeight:600,textDecoration:'underline',padding:0}}>العودة لليوم</button>}{isToday&&<div style={{fontSize:8,color:'#22c55e',fontWeight:600}}>● اليوم</div>}</div>
      <button onClick={()=>nav(-1)} style={{padding:4,borderRadius:5,background:'#f0f2f5'}}><ALi/></button>
    </div>

    {isWE?<div style={{background:'#fdf6e3',border:'2px solid #c8a951',borderRadius:9,padding:'12px',textAlign:'center'}}><div style={{fontSize:13,fontWeight:800,color:'#92700c'}}>عطلة نهاية الأسبوع</div></div>:<>
      <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:4,marginBottom:9}}>
        {[{l:'إجمالي',v:stats.total,c:'#1a5c3a'},{l:'حاضر',v:stats.present,c:'#3b82f6'},{l:'غائب',v:stats.absent,c:'#f59e0b'},{l:'ملتزم',v:stats.comp,c:'#22c55e'},{l:'الالتزام',v:stats.rate+'%',c:'#c8a951'}].map((s,i)=>
          <div key={i} style={{background:'white',borderRadius:7,padding:'7px 2px',textAlign:'center',border:'1px solid #eee'}}>
            <div style={{fontFamily:"'Cairo',sans-serif",fontSize:18,fontWeight:900,color:s.c,lineHeight:1}}>{s.v}</div>
            <div style={{fontSize:7,color:'#999',marginTop:1}}>{s.l}</div>
          </div>)}
      </div>

      <div style={{background:'white',borderRadius:11,overflow:'hidden',boxShadow:'0 2px 8px rgba(0,0,0,.05)',border:'1px solid #eee',marginBottom:9}}>
        <div style={{background:'linear-gradient(135deg,#e8f5ee,#f0faf5)',padding:'7px 10px',borderBottom:'1px solid #e2e5ea',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span style={{fontSize:11,fontWeight:700,color:'#0d3d25'}}>بيانات {gl.teachers}</span>
        </div>
        <div style={{overflowX:'auto',WebkitOverflowScrolling:'touch'}}>
          <table style={{width:'100%',borderCollapse:'collapse',minWidth:800}}>
            <thead><tr>
              <th style={TH}>#</th>
              <th style={{...TH,minWidth:52}}>الحضور</th>
              <th style={{...TH,textAlign:'right',paddingRight:8,minWidth:130}}>اسم {gl.teacher}</th>
              {TASK_LABELS.map((t,i)=><th key={i} style={TH}>{t}</th>)}
              <th style={TH}>إجراء</th>
            </tr></thead>
            <tbody>{teachers.map((t,ti)=>{
              const isAbs=dayAtt[ti]===false,isPres=dayAtt[ti]===true;
              const hasViol=(dayData[ti]||[]).some((v,ki)=>appTasks[ti]?.[ki]&&v===0);
              return <tr key={ti} style={{borderBottom:'1px solid #f0f0f0',background:isAbs?'#fffbeb':ti%2===0?'white':'#fafbfc',opacity:isAbs?.55:1}}>
                <td style={{...TD,fontWeight:700,color:'#bbb',fontSize:9,width:24}}>{ti+1}</td>
                <td style={TD}><button onClick={()=>togAtt(ti)} style={{padding:'3px 8px',borderRadius:5,fontSize:9,fontWeight:700,background:isAbs?'#fef3c7':isPres?'#dcfce7':'#f5f5f5',color:isAbs?'#92400e':isPres?'#166534':'#aaa',border:`1.5px solid ${isAbs?'#f59e0b':isPres?'#22c55e':'#ddd'}`,minWidth:38}}>{isAbs?'غائب':isPres?'حاضر':'—'}</button></td>
                <td style={{...TD,textAlign:'right',paddingRight:8,fontWeight:600,fontSize:10,whiteSpace:'nowrap'}}>{t.name}</td>
                {TASK_KEYS.map((_,ki)=>{const ap=appTasks[ti]?.[ki],val=dayData[ti]?.[ki]??null;return <td key={ki} style={TD}>{ap?<button onClick={()=>togCell(ti,ki)} style={{width:30,height:30,borderRadius:6,border:`2px solid ${val===1?'#22c55e':val===0?'#ef4444':'#e2e5ea'}`,background:val===1?'#f0fdf4':val===0?'#fef2f2':'white',color:val===1?'#22c55e':val===0?'#ef4444':'#ddd',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>{val===1?<Chk/>:val===0?<Xm/>:'–'}</button>:<div style={{width:30,height:30,borderRadius:6,background:'#f7f7f7',border:'1px solid #eee',display:'inline-flex',alignItems:'center',justifyContent:'center'}}><Lk/></div>}</td>})}
                <td style={TD}>
                  {isAbs&&<button onClick={()=>setAccForm({ti,task:'غياب',date:dKey,type:'absence'})} style={{padding:'2px 6px',borderRadius:4,background:'#fef3c7',color:'#92400e',fontSize:8,fontWeight:700,border:'1px solid #f59e0b',whiteSpace:'nowrap'}}>📄 مساءلة</button>}
                  {!isAbs&&hasViol&&<button onClick={()=>{const viol=(dayData[ti]||[]).map((v,ki)=>appTasks[ti]?.[ki]&&v===0?TASK_LABELS[ki]:null).filter(Boolean);setAccForm({ti,task:viol.join('، '),date:dKey,type:'violation'})}} style={{padding:'2px 6px',borderRadius:4,background:'#fef2f2',color:'#dc2626',fontSize:8,fontWeight:700,border:'1px solid #fca5a5',whiteSpace:'nowrap'}}>⚠️ مساءلة</button>}
                </td>
              </tr>})}</tbody>
          </table>
        </div>
      </div>
      <div className="no-print" style={{display:'flex',gap:5,justifyContent:'center'}}>
        <button onClick={()=>window.print()} style={{...BTN,background:'#1a5c3a',color:'white'}}>🖨️ طباعة</button>
        <button onClick={exportCSV} style={{...BTN,background:'white',color:'#1a5c3a',border:'2px solid #1a5c3a'}}>📥 تصدير</button>
        <button onClick={resetDay} style={{...BTN,background:'white',color:'#ef4444',border:'2px solid #ef4444'}}>🗑️ مسح</button>
      </div>
    </>}
  </div>;
}

/* ═══════ ACCOUNTABILITY MODAL ═══════ */
function AccModal({accForm,teachers,school,gl,onClose}){
  const t=teachers[accForm.ti],isAbs=accForm.type==='absence';
  const printForm=()=>{const w=window.open('','_blank','width=800,height=1000');w.document.write(`<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700;800&display=swap');*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Tajawal',sans-serif;padding:28px;color:#1a1a2e;font-size:13px;line-height:1.8}h2{color:#1a5c3a;font-size:17px;margin:5px 0}.hdr{text-align:center;border-bottom:3px solid #1a5c3a;padding-bottom:12px;margin-bottom:18px}.mdl{background:#1a5c3a;color:#fff;padding:5px 18px;border-radius:5px;display:inline-block;font-weight:700;font-size:13px;margin-bottom:8px}table{width:100%;border-collapse:collapse;margin:12px 0}td,th{border:1.5px solid #ccc;padding:7px 10px;text-align:right}th{background:#e8f5ee;color:#0d3d25;font-weight:700;width:110px}.sec{margin:16px 0;padding:13px;border:1px solid #ddd;border-radius:7px}.sec h3{color:#1a5c3a;font-size:13px;margin-bottom:8px;border-bottom:1px solid #eee;padding-bottom:4px}.dot{border-bottom:1px dotted #999;min-height:22px;margin:6px 0}.sig{display:flex;justify-content:space-between;margin-top:12px;font-size:12px}.notes{font-size:10px;color:#555;margin-top:16px;padding:8px;background:#f9f9f9;border-radius:5px}.notes li{margin:2px 0}@media print{button{display:none}}</style></head><body>
  <div class="hdr"><p style="font-size:10px;color:#666">المملكة العربية السعودية - وزارة التعليم<br/>${school.region}<br/>${school.schoolName}</p><div class="mdl">${isAbs?'نموذج رقم (٢٠)':'نموذج مساءلة'}</div><h2>${isAbs?'مساءلة غياب':'مساءلة عدم التزام'}</h2></div>
  <table><tr><th>الاسم</th><td>${t.name}</td><th>التخصص</th><td>${t.specialty||'—'}</td></tr><tr><th>رقم الهوية</th><td>${t.id||'—'}</td><th>الرقم الوظيفي</th><td>${t.jobNum||'—'}</td></tr><tr><th>التاريخ</th><td colspan="3">${accForm.date}</td></tr>${!isAbs?`<tr><th>المخالفة</th><td colspan="3" style="color:#dc2626;font-weight:700">${accForm.task}</td></tr>`:''}</table>
  ${isAbs?`<div class="sec"><h3>(١) طلب الإفادة</h3><p>المكرم / ${t.name} &emsp; وفقه الله</p><p>السلام عليكم ورحمة الله وبركاته وبعد ،،،</p><p>من خلال متابعة سجل العمل تبيّن غيابكم خلال الفترة الموضحة بعاليه، آمل الإفادة عن أسباب ذلك وعليكم تقديم ما يؤيد عذركم خلال أسبوع من تاريخه، علماً بأنه في حالة عدم الالتزام سيتم اتخاذ اللازم حسب التعليمات.</p><div class="sig"><div>اسم الرئيس المباشر: ${school.principal}</div><div>التوقيع: .........</div><div>التاريخ: &nbsp;/&nbsp;/&nbsp;١٤هـ</div></div></div><div class="sec"><h3>(٢) الإفادة</h3><p>المكرم / ${gl.principal} &emsp; وفقه الله</p><p>السلام عليكم ورحمة الله وبركاته وبعد:</p><p>أفيدكم أن غيابي كان للأسباب التالية:</p><div class="dot"></div><div class="dot"></div><p>وسأقوم بتقديم ما يثبت ذلك خلال أسبوع من تاريخه</p><div class="sig"><div>اسم ${gl.teacher}: .........</div><div>التوقيع: .........</div><div>التاريخ: &nbsp;/&nbsp;/&nbsp;١٤هـ</div></div></div><div class="sec"><h3>(٣) ${gl.principal}:</h3><p>أ. تحتسب له إجازة مرضية بعد التأكد من نظامية التقرير</p><p>ب. يحتسب غيابه من رصيده للإجازات الاضطرارية لقبول عذره إذا كان رصيده يسمح وإلا يحسم عليه.</p><p>ج. يعتمد الحسم لعدم قبول عذره</p><div class="sig"><div>اسم الرئيس المباشر: .........</div><div>التوقيع: .........</div><div>التاريخ: &nbsp;/&nbsp;/&nbsp;١٤هـ</div></div></div><div class="notes"><strong>ملاحظات هامة:</strong><ul><li>تستكمل الاستمارة من المدير المباشر وإصدار القرار بموجبه.</li><li>إذا سبق إجازة نهاية الأسبوع غياب وألحقها غياب تحتسب مدة الغياب كاملة.</li><li>يجب أن يوضح المتغيب أسباب غيابه فور تسلمه الاستمارة ويعيدها لمديره المباشر.</li><li>يعطى المتغيب مدة أسبوع لتقديم ما يؤيد عذره فإذا انقضت المدة تستكمل الاستمارة ويتم الحسم.</li></ul></div>`
  :`<div class="sec"><h3>تفاصيل المخالفة</h3><p>تبيّن من خلال المتابعة اليومية عدم التزام ${gl.teacher} / ${t.name} بالمهام التالية:</p><p style="font-weight:700;color:#dc2626;font-size:15px;margin:8px 0">${accForm.task}</p><p>وذلك بتاريخ: ${accForm.date}</p><p>نأمل الإفادة عن أسباب ذلك:</p><div class="dot"></div><div class="dot"></div><div class="dot"></div></div><div style="display:flex;justify-content:space-between;margin-top:25px;padding-top:12px;border-top:1px solid #ddd"><div style="text-align:center"><div style="font-size:10px;color:#888">توقيع ${gl.teacher}</div><div style="border-bottom:1px solid #333;width:130px;margin:20px auto 4px"></div><div style="font-weight:700;font-size:12px">${t.name}</div></div><div style="text-align:center"><div style="font-size:10px;color:#888">${gl.vice}</div><div style="border-bottom:1px solid #333;width:130px;margin:20px auto 4px"></div><div style="font-weight:700;font-size:12px">${school.vice}</div></div><div style="text-align:center"><div style="font-size:10px;color:#888">${gl.principal}</div><div style="border-bottom:1px solid #333;width:130px;margin:20px auto 4px"></div><div style="font-weight:700;font-size:12px">${school.principal}</div></div></div>`}
  <br/><button onclick="window.print()" style="padding:8px 24px;background:#1a5c3a;color:#fff;border:none;border-radius:6px;font-family:Tajawal;font-size:13px;font-weight:700;cursor:pointer">🖨️ طباعة</button></body></html>`);w.document.close()};

  return <div style={{position:'fixed',top:0,left:0,right:0,bottom:0,background:'rgba(0,0,0,.5)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center',padding:14}} onClick={onClose}>
    <div onClick={e=>e.stopPropagation()} style={{background:'white',borderRadius:14,padding:'18px',maxWidth:400,width:'100%',maxHeight:'80vh',overflow:'auto',boxShadow:'0 16px 50px rgba(0,0,0,.3)'}}>
      <div style={{textAlign:'center',marginBottom:12}}>
        <div style={{fontSize:15,fontWeight:800,color:isAbs?'#92400e':'#dc2626'}}>{isAbs?'📄 مساءلة غياب':'⚠️ مساءلة عدم التزام'}</div>
        <div style={{fontSize:10,color:'#888',marginTop:3}}>{isAbs?'نموذج رقم (٢٠) - الدليل الإجرائي':'نموذج مساءلة'}</div>
      </div>
      <div style={{background:'#f8f8f8',borderRadius:8,padding:'10px',marginBottom:10,fontSize:11}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{color:'#888'}}>الاسم:</span><span style={{fontWeight:700}}>{t.name}</span></div>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:4}}><span style={{color:'#888'}}>التاريخ:</span><span style={{fontWeight:600}}>{accForm.date}</span></div>
        {!isAbs&&<div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'#888'}}>المخالفة:</span><span style={{fontWeight:700,color:'#dc2626'}}>{accForm.task}</span></div>}
      </div>
      <div style={{display:'flex',gap:6}}>
        <button onClick={printForm} style={{...BTN,flex:1,justifyContent:'center',background:'#1a5c3a',color:'white',padding:'10px',fontSize:12}}>🖨️ طباعة النموذج</button>
        <button onClick={onClose} style={{...BTN,background:'#f5f5f5',color:'#888',padding:'10px',fontSize:12}}>إغلاق</button>
      </div>
    </div>
  </div>;
}

/* ═══════ TEACHERS ═══════ */
function TeachersPage({teachers,upT,sToast,gl}){
  const[nn,setNN]=useState('');const[eIdx,setEIdx]=useState(null);const[eVal,setEVal]=useState({});const fRef=useRef();
  const add=()=>{const n=nn.trim();if(!n)return;upT([...teachers,{name:n,id:'',specialty:'',jobNum:'',phone:''}]);setNN('');sToast('تمت الإضافة ✓')};
  const del=i=>{if(!confirm(`حذف ${teachers[i].name}؟`))return;const t=[...teachers];t.splice(i,1);upT(t);sToast('تم الحذف ✓')};

  const importFile=e=>{const file=e.target.files[0];if(!file)return;const reader=new FileReader();reader.onload=evt=>{const s=document.createElement('script');s.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js';s.onload=()=>{try{const wb=window.XLSX.read(evt.target.result,{type:'array'});const ws=wb.Sheets[wb.SheetNames[0]];const json=window.XLSX.utils.sheet_to_json(ws);const imp=json.map(r=>{const name=(r['الاسم']||r['اسم المعلم']||Object.values(r)[1]||'').toString().trim();const id=String(r['رقم الهوية']||r['الهوية']||Object.values(r)[0]||'');const phone=String(r['الجوال']||'');const specialty=String(r['التخصص']||'');const jobNum=String(r['رقم الوظيفة']||'');return{name,id,specialty,jobNum,phone}}).filter(t=>t.name);if(imp.length>0){upT(imp);sToast(`تم استيراد ${imp.length} ${gl.teacher} ✓`)}else sToast('لم يتم العثور على بيانات')}catch(err){sToast('خطأ في الملف')}};document.head.appendChild(s)};reader.readAsArrayBuffer(file)};

  return <div className="su">
    <div style={{background:'white',borderRadius:9,padding:'10px 12px',marginBottom:8,border:'1px solid #eee'}}>
      <div style={{fontSize:11,fontWeight:700,color:'#0d3d25',marginBottom:6}}>إضافة {gl.teacher}</div>
      <div style={{display:'flex',gap:5}}><input value={nn} onChange={e=>setNN(e.target.value)} placeholder={`اسم ${gl.teacher}`} onKeyDown={e=>e.key==='Enter'&&add()} style={{flex:1,...inpS}}/><button onClick={add} style={{...BTN,background:'#1a5c3a',color:'white'}}>+ إضافة</button></div>
    </div>
    <div style={{background:'#fdf6e3',borderRadius:9,padding:'9px 12px',marginBottom:8,border:'1px solid #e8d9a0'}}>
      <div style={{fontSize:11,fontWeight:700,color:'#92700c',marginBottom:4}}>📥 استيراد من نظام نور</div>
      <input ref={fRef} type="file" accept=".xlsx,.xls,.csv" onChange={importFile} style={{display:'none'}}/>
      <button onClick={()=>fRef.current?.click()} style={{...BTN,background:'#92700c',color:'white',width:'100%',justifyContent:'center'}}>📂 اختر ملف Excel</button>
    </div>
    <div style={{background:'white',borderRadius:9,overflow:'hidden',border:'1px solid #eee'}}>
      <div style={{background:'linear-gradient(135deg,#e8f5ee,#f0faf5)',padding:'7px 10px',borderBottom:'1px solid #e2e5ea'}}><span style={{fontSize:11,fontWeight:700,color:'#0d3d25'}}>قائمة {gl.teachers} ({teachers.length})</span></div>
      {teachers.map((t,i)=><div key={i} style={{padding:'7px 10px',borderBottom:'1px solid #f0f0f0',background:i%2===0?'white':'#fafbfc'}}>
        {eIdx===i?<div style={{display:'flex',flexDirection:'column',gap:4}}>
          <input value={eVal.name} onChange={e=>setEVal(p=>({...p,name:e.target.value}))} placeholder="الاسم" style={inpS}/>
          <div style={{display:'flex',gap:3}}><input value={eVal.id} onChange={e=>setEVal(p=>({...p,id:e.target.value}))} placeholder="رقم الهوية" style={{...inpS,flex:1}}/><input value={eVal.specialty} onChange={e=>setEVal(p=>({...p,specialty:e.target.value}))} placeholder="التخصص" style={{...inpS,flex:1}}/></div>
          <div style={{display:'flex',gap:3}}><button onClick={()=>{const tt=[...teachers];tt[eIdx]=eVal;upT(tt);setEIdx(null);sToast('تم ✓')}} style={{...BTN,background:'#1a5c3a',color:'white',flex:1,justifyContent:'center'}}>حفظ</button><button onClick={()=>setEIdx(null)} style={{...BTN,background:'#f5f5f5',color:'#888'}}>إلغاء</button></div>
        </div>:<div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div><div style={{fontWeight:600,fontSize:11}}><span style={{color:'#1a5c3a',marginLeft:4}}>{i+1}.</span>{t.name}</div>{(t.id||t.specialty)&&<div style={{fontSize:8,color:'#999'}}>{t.id&&`هوية: ${t.id}`}{t.specialty&&` • ${t.specialty}`}</div>}</div>
          <div style={{display:'flex',gap:3}}><button onClick={()=>{setEIdx(i);setEVal({...t})}} style={{padding:4,borderRadius:4,background:'#f0f2f5',fontSize:9}}>✏️</button><button onClick={()=>del(i)} style={{padding:4,borderRadius:4,background:'#fef2f2',fontSize:9}}>🗑️</button></div>
        </div>}
      </div>)}
    </div>
  </div>;
}

/* ═══════ SCHEDULES ═══════ */
function SchedPage({teachers,schedules,upS,curDate,sToast,gl}){
  const[tab,setTab]=useState('supervision');const[dm,setDm]=useState(new Date(curDate));
  const mk=mKey(dm),wds=useMemo(()=>getWD(dm.getFullYear(),dm.getMonth()),[dm]),dutyMap=schedules.dutyMonth?.[mk]||{};
  return <div className="su">
    <div style={{display:'flex',gap:3,marginBottom:8}}>{[{k:'supervision',l:'🔍 الإشراف'},{k:'duty',l:'🛡️ المناوبة'}].map(t=><button key={t.k} onClick={()=>setTab(t.k)} style={{flex:1,padding:'7px',borderRadius:7,background:tab===t.k?'#e8f5ee':'white',color:tab===t.k?'#1a5c3a':'#999',fontWeight:700,fontSize:10,border:tab===t.k?'2px solid #1a5c3a':'1px solid #eee'}}>{t.l}</button>)}</div>
    {tab==='supervision'&&<div style={{background:'white',borderRadius:9,overflow:'hidden',border:'1px solid #eee'}}><div style={{background:'linear-gradient(135deg,#e8f5ee,#f0faf5)',padding:'7px 10px',borderBottom:'1px solid #e2e5ea'}}><div style={{fontSize:11,fontWeight:700,color:'#0d3d25'}}>جدول الإشراف الأسبوعي</div></div><div style={{overflowX:'auto'}}><table style={{width:'100%',borderCollapse:'collapse',minWidth:480}}><thead><tr><th style={TH}>#</th><th style={{...TH,textAlign:'right',paddingRight:8,minWidth:120}}>{gl.teacher}</th>{DAYS_AR.map((d,i)=><th key={i} style={TH}>{d}</th>)}</tr></thead><tbody>{teachers.map((t,ti)=><tr key={ti} style={{borderBottom:'1px solid #f0f0f0',background:ti%2===0?'white':'#fafbfc'}}><td style={{...TD,fontWeight:700,color:'#bbb',fontSize:9}}>{ti+1}</td><td style={{...TD,textAlign:'right',paddingRight:8,fontWeight:600,fontSize:10,whiteSpace:'nowrap'}}>{t.name}</td>{[0,1,2,3,4].map(di=><td key={di} style={TD}><button onClick={()=>{const ns={...schedules,supervisionDay:{...schedules.supervisionDay}};if(ns.supervisionDay[ti]===di)delete ns.supervisionDay[ti];else ns.supervisionDay[ti]=di;upS(ns)}} style={{padding:'2px 6px',borderRadius:4,fontSize:8,fontWeight:700,background:schedules.supervisionDay[ti]===di?'#e8f5ee':'#f5f5f5',color:schedules.supervisionDay[ti]===di?'#1a5c3a':'#ccc',border:schedules.supervisionDay[ti]===di?'2px solid #1a5c3a':'1px solid #eee'}}>{schedules.supervisionDay[ti]===di?'✓':'–'}</button></td>)}</tr>)}</tbody></table></div></div>}
    {tab==='duty'&&<><div style={{background:'white',borderRadius:9,overflow:'hidden',border:'1px solid #eee',marginBottom:8}}><div style={{background:'linear-gradient(135deg,#fdf6e3,#fef9ee)',padding:'7px 10px',borderBottom:'1px solid #e8d9a0'}}><div style={{fontSize:11,fontWeight:700,color:'#92700c'}}>مناوبة يومية</div></div><div style={{padding:'7px 10px',display:'flex',flexWrap:'wrap',gap:3}}>{teachers.map((t,ti)=><button key={ti} onClick={()=>{const ns={...schedules,dailyDuty:{...schedules.dailyDuty||{}}};if(ns.dailyDuty[ti])delete ns.dailyDuty[ti];else ns.dailyDuty[ti]=true;upS(ns)}} style={{padding:'3px 8px',borderRadius:4,fontSize:9,fontWeight:700,background:schedules.dailyDuty?.[ti]?'#e8f5ee':'#f5f5f5',color:schedules.dailyDuty?.[ti]?'#1a5c3a':'#ccc',border:schedules.dailyDuty?.[ti]?'2px solid #1a5c3a':'1px solid #eee'}}>{t.name}{schedules.dailyDuty?.[ti]?' ✓':''}</button>)}</div></div>
    <div style={{background:'white',borderRadius:9,overflow:'hidden',border:'1px solid #eee'}}><div style={{padding:'7px 10px',borderBottom:'1px solid #f0f0f0',display:'flex',alignItems:'center',justifyContent:'space-between'}}><button onClick={()=>{const d=new Date(dm);d.setMonth(d.getMonth()+1);setDm(d)}} style={{padding:3,borderRadius:4,background:'#f0f2f5'}}><ARi/></button><span style={{fontWeight:700,fontSize:11}}>{MONTHS_G[dm.getMonth()]} {dm.getFullYear()}</span><button onClick={()=>{const d=new Date(dm);d.setMonth(d.getMonth()-1);setDm(d)}} style={{padding:3,borderRadius:4,background:'#f0f2f5'}}><ALi/></button></div><div style={{overflowX:'auto'}}><table style={{width:'100%',borderCollapse:'collapse',minWidth:420}}><thead><tr><th style={TH}>#</th><th style={TH}>اليوم</th><th style={TH}>التاريخ</th><th style={{...TH,textAlign:'right',paddingRight:6,minWidth:130}}>{gl.teacher}</th></tr></thead><tbody>{wds.map((wd,wi)=>{const wdk2=dk(wd),assigned=dutyMap[wdk2];return <tr key={wi} style={{borderBottom:'1px solid #f0f0f0',background:wi%2===0?'white':'#fafbfc'}}><td style={{...TD,fontWeight:700,color:'#bbb',fontSize:9}}>{wi+1}</td><td style={{...TD,fontWeight:600,fontSize:10}}>{dayN(wd)}</td><td style={{...TD,fontSize:9,color:'#666'}}>{wd.getDate()}/{wd.getMonth()+1}</td><td style={{...TD,textAlign:'right',paddingRight:6}}><select value={assigned!==undefined?assigned:''} onChange={e=>{const v=e.target.value,ns={...schedules,dutyMonth:{...schedules.dutyMonth}};if(!ns.dutyMonth[mk])ns.dutyMonth[mk]={};if(v==='')delete ns.dutyMonth[mk][wdk2];else ns.dutyMonth[mk][wdk2]=parseInt(v);upS(ns)}} style={{width:'100%',padding:'4px 6px',borderRadius:5,border:'1.5px solid #e2e5ea',fontSize:10,fontWeight:600,background:assigned!==undefined?'#e8f5ee':'#fafafa',color:assigned!==undefined?'#1a5c3a':'#999',fontFamily:'Tajawal'}}><option value="">— اختر —</option>{teachers.map((n,ti)=><option key={ti} value={ti}>{n.name}</option>)}</select></td></tr>})}</tbody></table></div></div></>}
  </div>;
}

/* ═══════ REPORTS ═══════ */
function ReportsPage({teachers,curDate,nav,records,schedules,att,gl}){
  const wd=wkD(curDate);
  const wr=useMemo(()=>wd.map(d=>{const k=dk(d),data=records[k],at=att[k]||{};if(!data)return{date:d,filled:false,rate:0,comp:0,rated:0,abs:0};const di=dayI(d),mk2=mKey(d);let comp=0,rated=0,abs=0;data.forEach((row,ti)=>{if(ti>=teachers.length)return;if(at[ti]===false){abs++;return}let has=false,good=true;row.forEach((v,ki)=>{const tk=TASK_KEYS[ki];let ap=true;if(tk==="supervision")ap=schedules.supervisionDay[ti]===di;if(tk==="duty"){if(schedules.dailyDuty?.[ti])ap=true;else{const dm=schedules.dutyMonth?.[mk2];ap=dm?Object.entries(dm).some(([d2,idx])=>idx===ti&&d2===dk(d)):false}}if(!ap)return;if(v!==null){has=true;if(v!==1)good=false}});if(has){rated++;if(good)comp++}});return{date:d,filled:rated>0||abs>0,rate:rated>0?Math.round(comp/rated*100):0,comp,rated,abs}}),[records,curDate,schedules,teachers,att]);

  return <div className="su">
    <div style={{background:'white',borderRadius:9,padding:'8px 10px',marginBottom:9,display:'flex',alignItems:'center',justifyContent:'space-between',border:'1px solid #eee'}}>
      <button onClick={()=>nav(7)} style={{padding:4,borderRadius:5,background:'#f0f2f5'}}><ARi/></button>
      <div style={{textAlign:'center'}}><div style={{fontWeight:700,fontSize:10}}>التقرير الأسبوعي</div><div style={{fontSize:8,color:'#999'}}>{fmtD(wd[0])} — {fmtD(wd[4])}</div></div>
      <button onClick={()=>nav(-7)} style={{padding:4,borderRadius:5,background:'#f0f2f5'}}><ALi/></button>
    </div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:4,marginBottom:10}}>
      {wr.map((d,i)=><div key={i} style={{background:'white',borderRadius:7,padding:'7px 3px',textAlign:'center',border:d.filled?'2px solid #e8f5ee':'1px solid #eee',opacity:d.filled?1:.4}}>
        <div style={{fontSize:9,fontWeight:700,color:'#1a5c3a',marginBottom:2}}>{DAYS_AR[i]}</div>
        <div style={{fontFamily:"'Cairo',sans-serif",fontSize:16,fontWeight:900,lineHeight:1,color:d.filled?(d.rate>=70?'#22c55e':d.rate>=40?'#f59e0b':'#ef4444'):'#ddd'}}>{d.filled?d.rate+'%':'–'}</div>
        <div style={{fontSize:7,color:'#aaa',marginTop:1}}>{d.filled?`${d.comp}/${d.rated}`:''}{d.abs>0?` غياب:${d.abs}`:''}</div>
      </div>)}
    </div>
    <div style={{background:'linear-gradient(135deg,#1a5c3a,#0d3d25)',borderRadius:11,padding:'12px 16px',color:'white'}}>
      <div style={{fontSize:11,fontWeight:700,marginBottom:6}}>ملخص الأسبوع</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:6}}>
        {(()=>{const f=wr.filter(d=>d.filled),avg=f.length>0?Math.round(f.reduce((s,d)=>s+d.rate,0)/f.length):0,tAbs=f.reduce((s,d)=>s+d.abs,0);return[{l:'أيام مسجّلة',v:f.length+'/5'},{l:'متوسط الالتزام',v:avg+'%'},{l:'إجمالي الغياب',v:tAbs}].map((s,i)=><div key={i} style={{textAlign:'center'}}><div style={{fontFamily:"'Cairo',sans-serif",fontSize:18,fontWeight:900}}>{s.v}</div><div style={{fontSize:8,opacity:.7}}>{s.l}</div></div>)})()}
      </div>
    </div>
  </div>;
}

/* ═══════ SETTINGS ═══════ */
function SettPage({school,upSc,sToast,gl}){
  const[f,sF]=useState({...school});const fgl=GL[f.gender]||GL.male;const ch=JSON.stringify(f)!==JSON.stringify(school);
  return <div className="su"><div style={{background:'white',borderRadius:10,overflow:'hidden',border:'1px solid #eee'}}>
    <div style={{background:'linear-gradient(135deg,#e8f5ee,#f0faf5)',padding:'8px 12px',borderBottom:'1px solid #e2e5ea'}}><div style={{fontSize:12,fontWeight:700,color:'#0d3d25'}}>بيانات المدرسة</div></div>
    <div style={{padding:'12px'}}>
      <div style={{marginBottom:12}}><div style={{fontSize:10,fontWeight:700,color:'#444',marginBottom:5}}>⚧ جنس الكادر</div><div style={{display:'flex',gap:5}}>{[{k:'male',l:'بنين 👦'},{k:'female',l:'بنات 👧'}].map(g=><button key={g.k} onClick={()=>sF(p=>({...p,gender:g.k}))} style={{flex:1,padding:'8px',borderRadius:7,background:f.gender===g.k?'#e8f5ee':'#fafafa',border:f.gender===g.k?'2px solid #1a5c3a':'2px solid #eee',fontWeight:700,fontSize:12,color:f.gender===g.k?'#1a5c3a':'#999'}}>{g.l}</button>)}</div></div>
      <div style={{height:1,background:'#eee',margin:'10px 0'}}/>
      {[{k:'schoolName',l:'اسم المدرسة'},{k:'region',l:'الإدارة'},{k:'principal',l:fgl.principal},{k:'vice',l:fgl.vice}].map(x=><div key={x.k} style={{marginBottom:8}}><div style={{fontSize:10,fontWeight:700,color:'#444',marginBottom:3}}>{x.l}</div><input value={f[x.k]} onChange={e=>sF(p=>({...p,[x.k]:e.target.value}))} style={{...inpS,width:'100%'}}/></div>)}
    </div>
    <div style={{padding:'0 12px 12px'}}><button onClick={()=>{upSc({...f});sToast('تم الحفظ ✓')}} style={{...BTN,width:'100%',justifyContent:'center',background:ch?'#1a5c3a':'#ccc',color:'white',padding:'10px',fontSize:12,pointerEvents:ch?'auto':'none'}}>💾 حفظ</button></div>
  </div></div>;
}

const TH={background:'#1a5c3a',color:'white',fontWeight:600,fontSize:8.5,padding:'7px 4px',textAlign:'center',whiteSpace:'nowrap'};
const TD={padding:'3px 3px',textAlign:'center',fontSize:9,verticalAlign:'middle'};
const BTN={padding:'7px 12px',borderRadius:6,fontFamily:"'Tajawal',sans-serif",fontSize:10,fontWeight:700,display:'flex',alignItems:'center',gap:3,transition:'all .2s',border:'none'};
const inpS={padding:'7px 9px',borderRadius:6,border:'2px solid #e2e5ea',fontSize:11,outline:'none',background:'#fafafa',fontFamily:'Tajawal'};