// Admin / operations view
const Admin = ({ t, lang }) => {
  const data = window.DAOOB_DATA;
  const [tab, setTab] = React.useState("queue");

  // Expanded queue list
  const queue = [
    { ref: "DAO-2026-0186", parcel: "RYD-4421-OL", type: { en: "Investment feasibility", ar: "جدوى استثمارية" }, client: "Otaibi Capital", priority: "high", status: "new", value: 12500 },
    { ref: "DAO-2026-0185", parcel: "RYD-9001-KF", type: { en: "Valuation",                ar: "تقييم" }, client: "Aljomaih Holding", priority: "high", status: "scoping", value: 6200 },
    { ref: "DAO-2026-0184", parcel: "RYD-4421-OL", type: { en: "Feasibility + ROI",         ar: "جدوى + عائد" }, client: "Otaibi Capital", priority: "med", status: "progress", value: 18400 },
    { ref: "DAO-2026-0183", parcel: "RYD-2224-MQ", type: { en: "Highest & best use",        ar: "أفضل استخدام" }, client: "MOMRAH", priority: "high", status: "progress", value: 8400 },
    { ref: "DAO-2026-0182", parcel: "RYD-9001-KF", type: { en: "Valuation + ROI",           ar: "تقييم + عائد" }, client: "Aljomaih Holding", priority: "med", status: "review", value: 17200 },
    { ref: "DAO-2026-0181", parcel: "RYD-5602-YS", type: { en: "Zoning check",              ar: "فحص اشتراطات" }, client: "Riyad Bank", priority: "low", status: "progress", value: 2400 },
    { ref: "DAO-2026-0180", parcel: "RYD-7204-RW", type: { en: "Comparable sales",          ar: "معاملات مشابهة" }, client: "Foreign DI", priority: "med", status: "review", value: 3800 },
    { ref: "DAO-2026-0179", parcel: "RYD-3402-HT", type: { en: "Market & demand",           ar: "السوق والطلب" }, client: "Roshn",  priority: "high", status: "progress", value: 7600 },
    { ref: "DAO-2026-0178", parcel: "RYD-1502-IQ", type: { en: "Development cost",          ar: "تكلفة تطوير" }, client: "Solidere", priority: "low", status: "scoping", value: 9800 },
  ];

  return (
    <div className="admin-shell">
      <div className="admin-header">
        <div className="between">
          <div>
            <div style={{ fontSize: 11, color: "var(--gold-700)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>{t.nav.admin}</div>
            <h1 className="t-h2" style={{ margin: "6px 0 0" }}>{t.admin.h1}</h1>
            <p style={{ color: "var(--ink-500)", margin: "4px 0 0", fontSize: 14 }}>{t.admin.sub}</p>
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            <button className="btn btn-outline"><Icon name="download" size={14}/> {lang === "ar" ? "تصدير CSV" : "Export CSV"}</button>
            <button className="btn btn-primary"><Icon name="plus" size={14}/> {lang === "ar" ? "طلب جديد" : "New ticket"}</button>
          </div>
        </div>
      </div>

      <div className="admin-stats">
        <div className="dash-kpi">
          <div className="lbl">{t.admin.revenue_h}</div>
          <div className="val">{t.admin.revenue_v}</div>
          <div className="d" style={{ color: "var(--green-700)" }}>{t.admin.revenue_d}</div>
        </div>
        <div className="dash-kpi">
          <div className="lbl">{lang === "ar" ? "نشطة الآن" : "Active now"}</div>
          <div className="val">14</div>
          <div className="d">{lang === "ar" ? "3 ذات أولوية عالية" : "3 high priority"}</div>
        </div>
        <div className="dash-kpi">
          <div className="lbl">{t.admin.sla_h}</div>
          <div className="val" style={{ color: "var(--green-700)" }}>96%</div>
          <div className="d">{lang === "ar" ? "ضمن الموعد المتفق" : "On-time delivery"}</div>
        </div>
        <div className="dash-kpi">
          <div className="lbl">{lang === "ar" ? "وقت الاستجابة" : "First response"}</div>
          <div className="val">2.4h</div>
          <div className="d">{lang === "ar" ? "متوسط الأسبوع" : "weekly avg."}</div>
        </div>
      </div>

      <div className="admin-content">
        <div className="tabs" style={{ marginTop: 16 }}>
          {Object.entries(t.admin.tabs).map(([k, v]) => (
            <div key={k} className={"tab" + (tab === k ? " on" : "")} onClick={() => setTab(k)}>{v}</div>
          ))}
        </div>

        {tab === "queue" && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24 }}>
            <div className="queue-table">
              <table>
                <thead>
                  <tr>
                    <th>{lang === "ar" ? "المرجع" : "Ref"}</th>
                    <th>{lang === "ar" ? "القطعة" : "Parcel"}</th>
                    <th>{lang === "ar" ? "النوع" : "Study"}</th>
                    <th>{lang === "ar" ? "العميل" : "Client"}</th>
                    <th>{t.admin.filter_priority}</th>
                    <th>{t.admin.filter_status}</th>
                    <th style={{ textAlign: "end" }}>{lang === "ar" ? "القيمة" : "Value"}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {queue.map(q => (
                    <tr key={q.ref}>
                      <td style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-500)" }}>{q.ref}</td>
                      <td style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{q.parcel}</td>
                      <td>{q.type[lang]}</td>
                      <td>{q.client}</td>
                      <td>
                        <span className={"priority-dot priority-" + (q.priority === "high" ? "high" : q.priority === "med" ? "med" : "low")}/>
                        {q.priority === "high" ? (lang === "ar" ? "عالية" : "High") : q.priority === "med" ? (lang === "ar" ? "متوسطة" : "Med") : (lang === "ar" ? "منخفضة" : "Low")}
                      </td>
                      <td>
                        <span className={"status-pill status-" + (q.status === "review" ? "review" : q.status === "done" ? "done" : "progress")}>
                          <span className="status-dot"/>
                          {q.status === "new" ? (lang === "ar" ? "جديدة" : "New")
                            : q.status === "scoping" ? (lang === "ar" ? "نطاق" : "Scoping")
                            : q.status === "review" ? (lang === "ar" ? "مراجعة" : "Review")
                            : (lang === "ar" ? "تنفيذ" : "Progress")}
                        </span>
                      </td>
                      <td style={{ textAlign: "end", fontFamily: "var(--font-serif)" }}>{q.value.toLocaleString()}</td>
                      <td style={{ textAlign: "end" }}>
                        <button className="btn btn-ghost btn-sm">{t.admin.assign}</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Side: analyst load */}
            <aside className="col gap-6">
              <div className="card" style={{ padding: 20 }}>
                <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-400)", fontWeight: 500, marginBottom: 12 }}>{t.admin.load_h}</div>
                {[
                  { n: "Valuation Agent", p: 80, c: "var(--danger)" },
                  { n: "Market Agent",      p: 62, c: "var(--gold-600)" },
                  { n: "Building Coefficient Agent",         p: 44, c: "var(--green-700)" },
                  { n: "Layla Al-Harbi",      p: 28, c: "var(--green-700)" },
                  { n: "Nawaf Al-Sayed",      p: 18, c: "var(--green-700)" },
                ].map((a, i) => (
                  <div key={i} style={{ marginBottom: 14 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
                      <span>{a.n}</span>
                      <span style={{ color: a.c, fontWeight: 500 }}>{a.p}%</span>
                    </div>
                    <div className="progress-bar" style={{ marginTop: 6 }}><div style={{ width: a.p + "%", background: a.c }}/></div>
                  </div>
                ))}
              </div>
              <div className="card" style={{ padding: 20 }}>
                <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-400)", fontWeight: 500, marginBottom: 12 }}>{lang === "ar" ? "تنبيهات" : "Alerts"}</div>
                {[
                  { t: lang === "ar" ? "تجاوز SLA: DAO-2026-0179" : "SLA breach: DAO-2026-0179", c: "var(--danger)" },
                  { t: lang === "ar" ? "تأخر تحميل بيانات REGA" : "REGA feed delayed 2h", c: "var(--gold-600)" },
                  { t: lang === "ar" ? "طلب جديد ذو أولوية عالية" : "New high-priority ticket", c: "var(--green-700)" },
                ].map((a, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: i === 2 ? 0 : "1px solid var(--hairline)", fontSize: 13 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: a.c, marginTop: 6, flexShrink: 0 }}/>
                    {a.t}
                  </div>
                ))}
              </div>
            </aside>
          </div>
        )}

        {tab === "analysts" && (
          <div className="card" style={{ padding: 32 }}>
            <p style={{ color: "var(--ink-500)" }}>{lang === "ar" ? "دليل وكلاء الذكاء والقدرات وإصدارات البناء — عرض تفصيلي." : "AI agent directory, capabilities and build versions — detail view."}</p>
          </div>
        )}
        {tab === "parcels" && (
          <div className="card" style={{ padding: 32 }}>
            <p style={{ color: "var(--ink-500)" }}>{lang === "ar" ? "كل القطع الفعّالة في النظام، مع آخر معاملة." : "All parcels in the system with latest transaction."}</p>
          </div>
        )}
        {tab === "clients" && (
          <div className="card" style={{ padding: 32 }}>
            <p style={{ color: "var(--ink-500)" }}>{lang === "ar" ? "دفتر العملاء وقيمة العمر." : "Client ledger and lifetime value."}</p>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Admin });