// Atlubni Docs — Changelog, Status, FAQ, Support, Community + simple guide pages

const PageChangelog = ({ lang }) => {
  const items = window.__DOCS_CHANGELOG;
  const typeLabels = { added: { en: "Added", ar: "مُضاف" }, changed: { en: "Changed", ar: "مُعدَّل" }, fixed: { en: "Fixed", ar: "مُصلَح" }, deprecated: { en: "Deprecated", ar: "موقوف" }, removed: { en: "Removed", ar: "محذوف" } };
  const typeColor = { added: "rgba(16,185,129,0.15)", changed: "rgba(37,99,235,0.15)", fixed: "rgba(245,158,11,0.15)", deprecated: "rgba(245,158,11,0.15)", removed: "rgba(239,68,68,0.15)" };
  const typeFg = { added: "var(--success)", changed: "var(--brand-400)", fixed: "var(--warning)", deprecated: "var(--warning)", removed: "var(--danger)" };
  return (
    <div className="prose">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <p style={{ margin: 0 }}>{lang === "ar" ? "تتبّع التغييرات بالترتيب الزمني العكسي." : "Track every change, newest first."}</p>
        <a href="#" style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 13 }}><DocIcon name="rss" size={14}/> RSS</a>
      </div>
      {items.map((entry, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, padding: "20px 0", borderTop: i > 0 ? "1px solid var(--line)" : "" }}>
          <div>
            <div style={{ color: "var(--ink)", fontWeight: 600, fontFamily: "JetBrains Mono", fontSize: 13 }}>{entry.version}</div>
            <div style={{ color: "var(--ink-3)", fontSize: 12, marginTop: 2 }}>{entry.date}</div>
          </div>
          <div>
            {entry.entries.map((it, j) => (
              <div key={j} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: 8, lineHeight: 1.55 }}>
                <span className="badge-pill" style={{ background: typeColor[it.type], color: typeFg[it.type], flexShrink: 0 }}>{typeLabels[it.type][lang]}</span>
                <span style={{ color: "var(--ink-2)", fontSize: 14 }}>{it.text[lang]}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const PageStatus = ({ lang }) => {
  const s = window.__DOCS_STATUS;
  const overall = s.components.every(c => c.status === "operational");
  // Mock 90-day sparkline values
  const mkSpark = (uptime) => Array.from({ length: 60 }, (_, i) => {
    const r = Math.random();
    if (uptime > 99.9) return 28 - Math.floor(Math.random() * 4);
    if (r < 0.05) return { h: 14, kind: "warn" };
    if (r < 0.01) return { h: 6, kind: "bad" };
    return 24 + Math.floor(Math.random() * 4);
  });
  return (
    <div className="prose">
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "18px 20px",
        background: overall ? "rgba(16,185,129,0.07)" : "rgba(245,158,11,0.07)",
        border: `1px solid ${overall ? "rgba(16,185,129,0.2)" : "rgba(245,158,11,0.2)"}`,
        borderRadius: 8,
        marginBottom: 24,
      }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: overall ? "var(--success)" : "var(--warning)", boxShadow: `0 0 0 4px ${overall ? "rgba(16,185,129,0.2)" : "rgba(245,158,11,0.2)"}`}}/>
        <span style={{ color: "var(--ink)", fontWeight: 500, fontSize: 15 }}>
          {overall ? (lang === "ar" ? "جميع الأنظمة تعمل بشكل طبيعي" : "All systems operational")
                   : (lang === "ar" ? "أداء متدنّ في بعض الأنظمة" : "Degraded performance on some systems")}
        </span>
        <span style={{ marginInlineStart: "auto", fontFamily: "JetBrains Mono", fontSize: 11, color: "var(--ink-3)" }}>{lang === "ar" ? "آخر تحديث قبل 30ث" : "Updated 30s ago"}</span>
      </div>

      <h2 id="components">{lang === "ar" ? "المكوّنات" : "Components"}<a className="anchor" href="#components">#</a></h2>
      <div style={{ display: "grid", gap: 8, marginBottom: 28 }}>
        {s.components.map(c => {
          const spark = mkSpark(c.uptime);
          return (
            <div key={c.id} className="status-card">
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: c.status === "operational" ? "var(--success)" : c.status === "degraded" ? "var(--warning)" : "var(--danger)" }}/>
              <div className="info">
                <div className="nm">{c.name[lang]}</div>
                <div className="pct">{c.uptime}% · {lang === "ar" ? "٩٠ يوم" : "90d uptime"}</div>
              </div>
              <div className="spark">{spark.map((v, i) => <span key={i} className={v.kind || ""} style={{ height: typeof v === "number" ? v : v.h }}/>)}</div>
            </div>
          );
        })}
      </div>

      <h2 id="incidents">{lang === "ar" ? "الحوادث الأخيرة" : "Recent incidents"}<a className="anchor" href="#incidents">#</a></h2>
      {s.incidents.map((i, k) => (
        <div key={k} style={{ padding: "12px 0", borderTop: k > 0 ? "1px solid var(--line)" : "" }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 4 }}>
            <span className="badge-pill" style={{ background: "rgba(16,185,129,0.15)", color: "var(--success)" }}>{lang === "ar" ? "محلول" : "Resolved"}</span>
            <span style={{ color: "var(--ink-3)", fontSize: 12, fontFamily: "JetBrains Mono" }}>{i.date} · {i.dur}</span>
          </div>
          <div style={{ color: "var(--ink)", fontSize: 14 }}>{i.title[lang]}</div>
        </div>
      ))}
    </div>
  );
};

// Minimal placeholders for guides + reference pages
const PageStub = ({ lang, title, desc }) => (
  <div className="prose">
    <p>{desc}</p>
    <Callout type="note" title={lang === "ar" ? "قيد التحرير" : "Drafting"}>
      {lang === "ar" ? "هذه الصفحة قيد المراجعة. تواصل مع docs@atlubni.io للمعاينة المبكّرة." : "This page is in review. Email docs@atlubni.io for early access."}
    </Callout>
  </div>
);

const PageGuideDispatch = ({ lang, t }) => (
  <div className="prose">
    <p>{lang === "ar" ? "هذا الدليل يبني موزّع توصيل بسيطًا: استقبال طلب، إيجاد أقرب سائق، حساب الزمن المتوقّع، وإرسال إشعار." : "This guide builds a minimal delivery dispatcher: receive an order, find the nearest driver, compute ETA, dispatch."}</p>
    <h2 id="step-1">{lang === "ar" ? "1. الترميز للعنوان" : "1. Geocode the address"}<a className="anchor" href="#step-1">#</a></h2>
    <CodeBlock t={{...t, lang}} samples={[{ lang: "js", name: "Node", code: `const geo = await atl.geocode.search({ q: order.address });\nconst dropoff = geo.results[0];` }]} />
    <h2 id="step-2">{lang === "ar" ? "2. مطابقة أقرب سائق" : "2. Match nearest driver"}<a className="anchor" href="#step-2">#</a></h2>
    <CodeBlock t={{...t, lang}} samples={[{ lang: "js", name: "Node", code: `const match = await atl.match.nearest({\n  lat: dropoff.lat, lon: dropoff.lon, fleet_id: "default", limit: 3\n});` }]} />
    <h2 id="step-3">{lang === "ar" ? "3. حساب الزمن" : "3. Compute ETA"}<a className="anchor" href="#step-3">#</a></h2>
    <CodeBlock t={{...t, lang}} samples={[{ lang: "js", name: "Node", code: `const route = await atl.route({\n  from: \`\${match.drivers[0].lat},\${match.drivers[0].lon}\`,\n  to:   \`\${dropoff.lat},\${dropoff.lon}\`,\n  profile: "driving-traffic"\n});\nawait dispatch(match.drivers[0].id, route.duration_s);` }]} />
    <Callout type="tip" title={lang === "ar" ? "تحسين" : "Optimize"}>
      {lang === "ar" ? "للمشاكل الأكبر، استخدم /v1/route/matrix لإيجاد أفضل تخصيص بين N سائقًا و N طلبًا." : "For larger problems, use /v1/route/matrix to find the optimal assignment across N drivers and N orders."}
    </Callout>
  </div>
);

window.PageChangelog = PageChangelog;
window.PageStatus = PageStatus;
window.PageStub = PageStub;
window.PageGuideDispatch = PageGuideDispatch;