// Main App — formal data-table view (API-backed + auth)

function FilterSelect({ icon, label, value, onChange, options, anyLabel = "الكل" }){
  const active = !!value;
  return (
    <div className={"filter" + (active ? " has-value" : "")}>
      {icon && <Icon name={icon} size={13}/>}
      <span className="label">{label}:</span>
      <span className="value">{active ? value : "الكل"}</span>
      <span className="caret"><Icon name="chevron" size={12}/></span>
      <select value={value} onChange={e=>onChange(e.target.value)} aria-label={label}>
        <option value="">{anyLabel}</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}

const COLUMNS = [
  { key: "id",        label: "الرقم",      sortable: true,  className: "col-id" },
  { key: "name",      label: "الاسم",      sortable: true,  className: "col-name", sticky: true },
  { key: "specialty", label: "الاختصاص",   sortable: true },
  { key: "currentGov",label: "المحافظة",   sortable: true },
  { key: "expYears",  label: "الخبرة",     sortable: true,  className: "num" },
  { key: "salary",    label: "الراتب",     sortable: true,  className: "num" },
  { key: "phone",     label: "الهاتف",     sortable: false, className: "col-phone" },
  { key: "accomm",    label: "سكن",        sortable: true },
  { key: "outside",   label: "خارج المحافظة", sortable: true },
  { key: "status",    label: "الحالة",     sortable: true },
  { key: "rating",    label: "التقييم",    sortable: true },
  { key: "_actions",  label: "",           sortable: false, className: "col-actions" }
];

function SortIcon({ dir }){
  if(!dir) return <span className="sort-i"><Icon name="sortBoth" size={11}/></span>;
  return <span className="sort-i"><Icon name={dir === "asc" ? "sortAsc" : "sortDesc"} size={11}/></span>;
}

function App({ user, onLogout }){
  const [chefs, setChefs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState("");
  const [q, setQ] = React.useState("");
  const [fSpecialty, setFSpecialty] = React.useState("");
  const [fGov, setFGov] = React.useState("");
  const [fStatus, setFStatus] = React.useState("");
  const [fRating, setFRating] = React.useState("");
  const [minExp, setMinExp] = React.useState("");
  const [sortKey, setSortKey] = React.useState("createdAt");
  const [sortDir, setSortDir] = React.useState("desc");
  const [formOpen, setFormOpen] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [detail, setDetail] = React.useState(null);
  const [usersOpen, setUsersOpen] = React.useState(false);

  async function reload(){
    setLoading(true); setLoadError("");
    try{
      const list = await window.api.listChefs();
      setChefs(list);
    }catch(err){
      if(err.status === 401){ onLogout(); return; }
      setLoadError(err.message || "تعذّر تحميل البيانات");
    }finally{
      setLoading(false);
    }
  }
  React.useEffect(()=>{ reload(); }, []);

  const filtered = React.useMemo(()=>{
    const qq = q.trim().toLowerCase();
    let list = chefs.filter(c => {
      if(fSpecialty && c.specialty !== fSpecialty) return false;
      if(fGov && c.currentGov !== fGov && !(c.acceptedGovs||[]).includes(fGov)) return false;
      if(fStatus && c.status !== fStatus) return false;
      if(fRating && c.rating !== fRating) return false;
      if(minExp){
        const m = parseInt(minExp,10) || 0;
        if((Number(c.expYears)||0) < m) return false;
      }
      if(qq){
        const hay = [c.name,c.phone,c.id,c.specialty,c.currentGov,c.lastPlace,c.expPlaces,c.notes].join(" ").toLowerCase();
        if(!hay.includes(qq)) return false;
      }
      return true;
    });
    list.sort((a,b)=>{
      let va = a[sortKey], vb = b[sortKey];
      if(sortKey === "createdAt"){ va = a.createdAt||0; vb = b.createdAt||0 }
      if(sortKey === "salary" || sortKey === "expYears"){ va = Number(va)||0; vb = Number(vb)||0 }
      if(typeof va === "boolean"){ va = va ? 1 : 0; vb = vb ? 1 : 0 }
      if(typeof va === "string"){
        return sortDir === "asc" ? va.localeCompare(vb,"ar") : vb.localeCompare(va,"ar");
      }
      return sortDir === "asc" ? va - vb : vb - va;
    });
    return list;
  }, [chefs,q,fSpecialty,fGov,fStatus,fRating,minExp,sortKey,sortDir]);

  const stats = React.useMemo(()=>{
    const total = chefs.length;
    const available = chefs.filter(c => !["تم توظيفه","غير متاح حالياً","غير مناسب"].includes(c.status)).length;
    const hired = chefs.filter(c => c.status === "تم توظيفه").length;
    const excellent = chefs.filter(c => c.rating === "ممتاز").length;
    return { total, available, hired, excellent };
  }, [chefs]);

  function handleSort(key){
    if(!COLUMNS.find(c => c.key === key)?.sortable) return;
    if(sortKey === key){
      setSortDir(d => d === "asc" ? "desc" : "asc");
    } else {
      setSortKey(key);
      setSortDir("asc");
    }
  }

  async function handleSave(chef){
    try{
      if(editing){
        const updated = await window.api.updateChef(editing.id, chef);
        setChefs(prev => prev.map(c => c.id === updated.id ? updated : c));
      } else {
        const created = await window.api.createChef(chef);
        setChefs(prev => [created, ...prev]);
      }
      setFormOpen(false); setEditing(null);
    }catch(err){
      if(err.status === 401){ onLogout(); return; }
      alert(err.message || "تعذّر حفظ السجل");
    }
  }
  async function handleDelete(id){
    if(!confirm("هل أنت متأكد من حذف هذا الشيف؟")) return;
    try{
      await window.api.deleteChef(id);
      setChefs(prev => prev.filter(c => c.id !== id));
      setDetail(null);
    }catch(err){
      if(err.status === 401){ onLogout(); return; }
      alert(err.message || "تعذّر الحذف");
    }
  }
  function openAdd(){ setEditing(null); setFormOpen(true) }
  function openEdit(c){ setDetail(null); setEditing(c); setFormOpen(true) }
  function clearFilters(){
    setQ(""); setFSpecialty(""); setFGov(""); setFStatus(""); setFRating(""); setMinExp("");
  }
  const hasFilters = !!(q||fSpecialty||fGov||fStatus||fRating||minExp);

  function exportJSON(){
    const blob = new Blob([JSON.stringify(chefs,null,2)], {type:"application/json"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = `chefs-iraq-${new Date().toISOString().slice(0,10)}.json`;
    a.click(); URL.revokeObjectURL(url);
  }
  function exportCSV(){
    const headers = ["الرقم","الاسم","الهاتف","العمر","المحافظة","الاختصاص","سنوات الخبرة","أماكن سابقة","آخر مكان","الراتب","يقبل سكن","خارج المحافظة","المحافظات المقبولة","الحالة","التقييم","الملاحظات"];
    const rows = chefs.map(c => [c.id,c.name,c.phone,c.age,c.currentGov,c.specialty,c.expYears,c.expPlaces,c.lastPlace,c.salary,c.accomm?"نعم":"لا",c.outside?"نعم":"لا",(c.acceptedGovs||[]).join("، "),c.status,c.rating,(c.notes||"").replace(/\n/g," ")]);
    const escape = v => {
      const s = String(v ?? "");
      return /[",\n]/.test(s) ? `"${s.replace(/"/g,'""')}"` : s;
    };
    const csv = "" + [headers, ...rows].map(r => r.map(escape).join(",")).join("\r\n");
    const blob = new Blob([csv], {type:"text/csv;charset=utf-8"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = `chefs-iraq-${new Date().toISOString().slice(0,10)}.csv`;
    a.click(); URL.revokeObjectURL(url);
  }

  return (
    <React.Fragment>
      <header className="app-header">
        <div className="brand">
          <div className="brand-mark">ش</div>
          <div className="brand-text">
            <div className="brand-title">قاعدة بيانات شيفات العراق</div>
            <div className="brand-sub">نظام فهرسة وإدارة السير الذاتية</div>
          </div>
        </div>
        <div className="header-actions">
          {user?.role === "admin" && (
            <button className="btn btn-sm" onClick={()=>setUsersOpen(true)} title="إدارة المستخدمين">
              <Icon name="users" size={13}/> <span className="lbl">المستخدمون</span>
            </button>
          )}
          <button className="btn btn-sm" onClick={exportCSV} title="تصدير ملف Excel/CSV">
            <Icon name="download" size={13}/> <span className="lbl">CSV</span>
          </button>
          <button className="btn btn-primary" onClick={openAdd}>
            <Icon name="plus" size={14}/> <span className="lbl">إضافة شيف</span>
          </button>
          <div className="user-chip" title={user?.role === "admin" ? "مدير" : "مستخدم"}>
            <span className="user-chip-name">{user?.name}</span>
            <button className="logout-btn" onClick={onLogout} title="تسجيل الخروج">
              <Icon name="x" size={13}/>
            </button>
          </div>
        </div>
      </header>

      <main className="main">
        <div className="page-title-row">
          <div>
            <h1 className="page-title">سجل الشيفات</h1>
            <div className="page-sub">إدارة وفهرسة ملفات الشيفات • النسخة الأولى</div>
          </div>
        </div>

        <div className="stats">
          <div className="stat">
            <div>
              <div className="stat-label">إجمالي السجلات</div>
              <div className="stat-value tnum">{stats.total}</div>
            </div>
            <div className="stat-icon"><Icon name="users" size={16}/></div>
          </div>
          <div className="stat">
            <div>
              <div className="stat-label">متاح للعمل</div>
              <div className="stat-value tnum">{stats.available}</div>
            </div>
            <div className="stat-icon b"><Icon name="check" size={16}/></div>
          </div>
          <div className="stat">
            <div>
              <div className="stat-label">تم توظيفهم</div>
              <div className="stat-value tnum">{stats.hired}</div>
            </div>
            <div className="stat-icon d"><Icon name="briefcase" size={16}/></div>
          </div>
          <div className="stat">
            <div>
              <div className="stat-label">تقييم ممتاز</div>
              <div className="stat-value tnum">{stats.excellent}</div>
            </div>
            <div className="stat-icon c"><Icon name="star" size={16}/></div>
          </div>
        </div>

        <div className="toolbar">
          <div className="search">
            <span className="search-icon"><Icon name="search" size={15}/></span>
            <input
              type="search"
              placeholder="بحث بالاسم، الرقم، المطعم، الملاحظات..."
              value={q}
              onChange={e=>setQ(e.target.value)}
            />
            {q && <button className="clear-btn" onClick={()=>setQ("")} aria-label="مسح"><Icon name="x" size={13}/></button>}
          </div>
          <FilterSelect icon="chef" label="الاختصاص" value={fSpecialty} onChange={setFSpecialty} options={SPECIALTIES}/>
          <FilterSelect icon="map" label="المحافظة" value={fGov} onChange={setFGov} options={GOVERNORATES}/>
          <FilterSelect icon="sparkles" label="الحالة" value={fStatus} onChange={setFStatus} options={STATUSES}/>
          <FilterSelect icon="star" label="التقييم" value={fRating} onChange={setFRating} options={RATINGS}/>
          <FilterSelect icon="briefcase" label="خبرة لا تقل عن" value={minExp} onChange={setMinExp}
                        options={["1","3","5","7","10","15"]} anyLabel="أي خبرة"/>
          {hasFilters && (
            <button className="btn btn-sm btn-ghost" onClick={clearFilters}>
              <Icon name="x" size={12}/> مسح الكل
            </button>
          )}
        </div>

        {loading ? (
          <div className="table-wrap"><div className="empty">
            <div className="empty-icon"><Icon name="users" size={22}/></div>
            <h3>جارٍ تحميل البيانات...</h3>
          </div></div>
        ) : loadError ? (
          <div className="table-wrap"><div className="empty">
            <div className="empty-icon"><Icon name="x" size={22}/></div>
            <h3>تعذّر الاتصال بالخادم</h3>
            <p>{loadError}</p>
            <button className="btn btn-primary" onClick={reload}><Icon name="download" size={14}/> إعادة المحاولة</button>
          </div></div>
        ) : filtered.length === 0 ? (
          <div className="table-wrap">
            <div className="empty">
              <div className="empty-icon"><Icon name="search" size={22}/></div>
              {chefs.length === 0 ? (<>
                <h3>لا توجد سجلات</h3>
                <p>ابدأ بإضافة أول شيف إلى قاعدة البيانات</p>
                <button className="btn btn-primary" onClick={openAdd}>
                  <Icon name="plus" size={14}/> إضافة شيف
                </button>
              </>) : (<>
                <h3>لا توجد نتائج مطابقة</h3>
                <p>جرب تعديل معايير البحث أو الفلاتر</p>
                <button className="btn" onClick={clearFilters}>
                  <Icon name="x" size={13}/> مسح الفلاتر
                </button>
              </>)}
            </div>
          </div>
        ) : (
          <div className="table-wrap">
            <div className="table-meta">
              <span>
                {filtered.length === chefs.length
                  ? <>عرض <b>{chefs.length}</b> سجل</>
                  : <>عرض <b>{filtered.length}</b> من أصل <b>{chefs.length}</b> سجل</>}
              </span>
              <span style={{fontSize:11.5}}>اضغط على أي صف لعرض التفاصيل</span>
            </div>
            <div className="table-scroll">
              <table className="data">
                <thead>
                  <tr>
                    {COLUMNS.map(col => (
                      <th key={col.key}
                          className={[col.className||"", col.sortable?"sortable":"", sortKey===col.key?"sorted":"", col.sticky?"sticky-col":""].join(" ").trim()}
                          onClick={()=>handleSort(col.key)}>
                        <span className="th-inner">
                          {col.label}
                          {col.sortable && <SortIcon dir={sortKey===col.key ? sortDir : null}/>}
                        </span>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {filtered.map((c, i) => {
                    const statusKey = (c.status||"").replace(/\s+/g,"-");
                    const rateKey = (c.rating||"").replace(/\s+/g,"-");
                    return (
                      <tr key={c.id} className={i % 2 ? "zebra" : ""} onClick={()=>setDetail(c)}>
                        <td className="col-id">{c.id}</td>
                        <td className="col-name sticky-col">
                          {c.name}
                          {c.age && <span className="sub">{c.age} سنة</span>}
                        </td>
                        <td><span className="tag spec">{c.specialty}</span></td>
                        <td>{c.currentGov}</td>
                        <td className="num">{c.expYears ? `${c.expYears} سنة` : "—"}</td>
                        <td className="num">{c.salary ? new Intl.NumberFormat("en-US").format(c.salary) : "—"}</td>
                        <td className="col-phone">{c.phone}</td>
                        <td>{c.accomm ? "نعم" : "—"}</td>
                        <td>{c.outside ? "نعم" : "—"}</td>
                        <td><span className={"tag status-" + statusKey}><span className="dot"/>{c.status}</span></td>
                        <td><span className={"tag rate-" + rateKey}>{c.rating}</span></td>
                        <td className="col-actions">
                          <div className="row-actions" onClick={e=>e.stopPropagation()}>
                            <button title="تعديل" onClick={()=>openEdit(c)}><Icon name="edit" size={13}/></button>
                            <button title="حذف" className="danger" onClick={()=>handleDelete(c.id)}><Icon name="trash" size={13}/></button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </main>

      <button className="fab" onClick={openAdd} aria-label="إضافة شيف">
        <Icon name="plus" size={22}/>
      </button>

      {formOpen && (
        <ChefForm
          initial={editing}
          existingIds={chefs.map(c=>c.id)}
          onCancel={()=>{setFormOpen(false); setEditing(null)}}
          onSave={handleSave}
        />
      )}

      {detail && !formOpen && (
        <ChefDetail
          chef={detail}
          onClose={()=>setDetail(null)}
          onEdit={openEdit}
          onDelete={handleDelete}
        />
      )}

      {usersOpen && <UsersPanel onClose={()=>setUsersOpen(false)}/>}
    </React.Fragment>
  );
}

// بوابة المصادقة: تعرض شاشة الدخول أو التطبيق حسب الجلسة
function AuthGate(){
  const [user, setUser] = React.useState(() => (window.api.isAuthed() ? window.api.getUser() : null));
  const [checking, setChecking] = React.useState(window.api.isAuthed());

  React.useEffect(()=>{
    if(window.api.isAuthed()){
      window.api.me()
        .then(u => setUser(u))
        .catch(()=>{ window.api.logout(); setUser(null); })
        .finally(()=> setChecking(false));
    }
  }, []);

  function logout(){ window.api.logout(); setUser(null); }

  if(checking){
    return <div className="login-wrap"><div className="page-sub">جارٍ التحقق من الجلسة...</div></div>;
  }
  if(!user){
    return <LoginScreen onLoggedIn={setUser}/>;
  }
  return <App user={user} onLogout={logout}/>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AuthGate/>);