// Citizen — Eligibility / Decision Trace screen
// This is the explainability showpiece.

// ─── Animated review gate ────────────────────────────────────────────────────
const REVIEW_CHECKS = [
  { icon: "user",     label: "Identity verified",          sub: "MOI Civil Registry",          ms: 600  },
  { icon: "wallet",   label: "Income confirmed",           sub: "HRMS · Salary enquiry",       ms: 1100 },
  { icon: "shield",   label: "CBO credit check",           sub: "Central Bank of Oman",        ms: 1800 },
  { icon: "building", label: "Property ownership check",   sub: "Ministry of Housing",         ms: 2400 },
  { icon: "database", label: "Social scoring",             sub: "ISKAN eligibility engine",    ms: 3100 },
  { icon: "sparkles", label: "Program matching",           sub: "OHB Rule Engine v2",          ms: 3700 },
];

function EligibilityReview({ t, decision, onDone }) {
  const [done, setDone] = React.useState([]);
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const timers = REVIEW_CHECKS.map((c, i) =>
      setTimeout(() => {
        setActive(i + 1);
        setDone(prev => [...prev, i]);
      }, c.ms)
    );
    const finalTimer = setTimeout(() => onDone(), 4400);
    return () => { timers.forEach(clearTimeout); clearTimeout(finalTimer); };
  }, []);

  const allDone = done.length === REVIEW_CHECKS.length;

  return (
    <div className="review-gate">
      <div className="review-gate-inner">
        <div className="review-spinner-wrap">
          <div className={`review-spinner ${allDone ? "done" : ""}`}>
            {allDone
              ? <Icon name="check_circle" size={32} style={{color:"var(--brand-teal)"}}/>
              : <div className="review-ring"/>
            }
          </div>
        </div>
        <div className="review-title">
          {allDone
            ? t("Analysis complete.", "اكتمل التحليل.")
            : t("Reviewing your application…", "جاري مراجعة طلبك…")}
        </div>
        <div className="review-sub">
          {allDone
            ? t("Preparing your result.", "جاري إعداد النتيجة.")
            : t("Querying live data sources in real time.", "الاستعلام عن مصادر البيانات في الوقت الفعلي.")}
        </div>

        <div className="review-checks">
          {REVIEW_CHECKS.map((c, i) => {
            const isDone = done.includes(i);
            const isActive = active === i && !isDone;
            return (
              <div key={i} className={`review-check ${isDone ? "done" : isActive ? "active" : "pending"}`}>
                <div className="review-check-icon">
                  {isDone
                    ? <Icon name="check" size={13}/>
                    : isActive
                      ? <div className="review-check-pulse"/>
                      : <Icon name={c.icon} size={13}/>
                  }
                </div>
                <div className="review-check-info">
                  <div className="review-check-label">{t(c.label, c.label)}</div>
                  <div className="review-check-sub">{c.sub}</div>
                </div>
                {isDone && (
                  <div className="review-check-latency">
                    {Math.floor(Math.random() * 300 + 100)}ms
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {allDone && (
          <button className="btn copper" style={{marginTop:24}} onClick={onDone}>
            {t("View your result", "عرض النتيجة")} <Icon name="arrow_right" size={14} className="arrow-flip"/>
          </button>
        )}
      </div>
    </div>
  );
}

function CitizenEligibility({ citizen, decision, t, setScreen, tweaks, program }) {
  const [reviewed, setReviewed] = React.useState(false);
  const [openRule, setOpenRule] = React.useState(null);

  if (!reviewed) {
    return <EligibilityReview t={t} decision={decision} onDone={() => setReviewed(true)}/>;
  }
  const passed = decision.trace.filter((r) => r.status === "passed").length;
  const total = decision.trace.length;
  const failed = decision.trace.filter((r) => r.status === "failed");
  const warned = decision.trace.filter((r) => r.status === "warning");

  // Group by category for the timeline
  const grouped = decision.trace.reduce((acc, r) => {
    (acc[r.category] = acc[r.category] || []).push(r);
    return acc;
  }, {});

  return (
    <div className="elig-screen">
      <div className="elig-header">
        <div>
          <button className="text-13 muted" onClick={() => setScreen("home")}>
            <Icon name="arrow_left" size={13}/> {t("Back to journey","العودة للرحلة")}
          </button>
          <h2 className="h2" style={{marginTop:8}}>{t("Why we decided what we decided.","لماذا قررنا ما قررنا.")}</h2>
          <p className="muted text-14" style={{maxWidth:620, marginTop:6}}>
            {t(
              "Every rule we checked, every data source we queried, and the exact reason for the outcome — no black box.",
              "كل قاعدة فحصناها وكل مصدر بيانات استعلمناه."
            )}
          </p>
        </div>
        <div className="elig-summary">
          <div className={`elig-badge outcome-${decision.outcome}`}>
            <Icon name={decision.outcome === "eligible" ? "check_circle" : decision.outcome === "manual_review" ? "alert" : "x_circle"} size={16}/>
            {decision.outcome === "eligible" && t("Eligible · STP","مؤهل · STP")}
            {decision.outcome === "manual_review" && t("Needs review · Non-STP","مراجعة · غير STP")}
            {decision.outcome === "rejected" && t("Not eligible","غير مؤهل")}
          </div>
          <div className="muted text-13" style={{marginTop:10}}>
            {passed}/{total} {t("rules passed","قواعد مرت")} · {warned.length} {t("warning","تحذير")} · {failed.length} {t("blocking","حاسم")}
          </div>
        </div>
      </div>

      <div className="elig-grid">
        {/* Left: rule timeline */}
        <div className="card card-pad-lg elig-trace">
          <div className="between" style={{marginBottom:18}}>
            <div>
              <div className="label-eyebrow">{t("Rule trace","تتبع القواعد")}</div>
              <div className="title" style={{marginTop:4}}>{program.name} <span className="muted text-13">· {program.version}</span></div>
            </div>
            <div className="row" style={{gap:8}}>
              <button className="btn ghost sm"><Icon name="download" size={13}/> {t("Export JSON","تصدير")}</button>
              <button className="btn ghost sm"><Icon name="link" size={13}/> {t("Share","مشاركة")}</button>
            </div>
          </div>

          {Object.entries(grouped).map(([cat, rules]) => (
            <div key={cat} className="trace-group">
              <div className="trace-group-head">
                <span className="trace-group-name">{cat}</span>
                <span className="muted text-12">{rules.filter(r=>r.status==="passed").length}/{rules.length}</span>
              </div>
              {rules.map((r) => (
                <TraceRow key={r.ruleId} rule={r} open={openRule === r.ruleId} onToggle={() => setOpenRule(openRule === r.ruleId ? null : r.ruleId)}/>
              ))}
            </div>
          ))}
        </div>

        {/* Right: integrations + actions */}
        <div className="col" style={{gap:16, minWidth:0}}>
          <div className="card card-pad">
            <div className="label-eyebrow"><Icon name="database" size={11}/> {t("Data sources queried","مصادر البيانات")}</div>
            <div className="title" style={{marginTop:6}}>{t("Live integrations","تكاملات مباشرة")}</div>
            <div className="muted text-13" style={{marginTop:2}}>{t("These ran in parallel in 1.4s","تم تشغيلها بالتوازي في 1.4 ثانية")}</div>
            <div className="integ-list">
              {window.OHB_DATA.integrations.slice(0, 7).map((i) => (
                <div key={i.id} className="integ-row">
                  <div className="row" style={{gap:10}}>
                    <span className={`statusdot ${i.status === "healthy" ? "ok" : "warn"}`}/>
                    <span className="text-13" style={{fontWeight:500}}>{i.name}</span>
                  </div>
                  <span className="mono tiny muted">{i.latency}ms</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card card-pad">
            <div className="label-eyebrow"><Icon name="flag" size={11}/> {t("What happens next","ماذا بعد")}</div>
            <NextStepsCard decision={decision} t={t} setScreen={setScreen}/>
          </div>

          {decision.outcome === "rejected" && <AlternativesCard t={t}/>}
        </div>
      </div>
    </div>
  );
}

function TraceRow({ rule, open, onToggle }) {
  const status = rule.status;
  const sev = rule.severity;
  return (
    <div className={`trace-row status-${status}`}>
      <button className="trace-row-head" onClick={onToggle}>
        <div className="trace-status-icon">
          {status === "passed" && <Icon name="check" size={14}/>}
          {status === "warning" && <Icon name="alert" size={14}/>}
          {status === "failed" && <Icon name="x" size={14}/>}
        </div>
        <div className="trace-info">
          <div className="row" style={{gap:8, alignItems:"baseline"}}>
            <span className="trace-rule-name">{rule.name}</span>
            <span className="tiny muted">· {rule.source}</span>
          </div>
          <div className="muted text-13 trace-evidence">{rule.evidence}</div>
        </div>
        <div className="row" style={{gap:8}}>
          {sev === "reject" && status !== "passed" && <span className="pill bad">Hard</span>}
          {sev === "manual_review" && status !== "passed" && <span className="pill warn">Soft</span>}
          <Icon name={open ? "chevron_up" : "chevron_down"} size={14} style={{color:"var(--muted)"}}/>
        </div>
      </button>
      {open && (
        <div className="trace-row-detail">
          <div className="trace-kv">
            <span>Rule ID</span>
            <span className="mono">{rule.ruleId}</span>
          </div>
          <div className="trace-kv">
            <span>Severity</span>
            <span>{sev}</span>
          </div>
          <div className="trace-kv">
            <span>Configured</span>
            <span className="mono tiny">{JSON.stringify(rule.params)}</span>
          </div>
        </div>
      )}
    </div>
  );
}

function NextStepsCard({ decision, t, setScreen }) {
  if (decision.outcome === "eligible") {
    return (
      <div className="next-steps">
        <div className="next-step done"><Icon name="check" size={14}/> {t("Eligibility confirmed","تأكيد الأهلية")}</div>
        <div className="next-step current"><Icon name="map" size={14}/> {t("Choose a home","اختر منزلاً")}</div>
        <div className="next-step"><Icon name="key" size={14}/> {t("7-day reservation lock","قفل حجز 7 أيام")}</div>
        <div className="next-step"><Icon name="cash" size={14}/> {t("Bank offer in 24h","عرض البنك خلال 24 ساعة")}</div>
        <button className="btn copper" style={{width:"100%", marginTop:14}} onClick={() => setScreen("browse")}>
          {t("Browse homes","تصفح المنازل")} <Icon name="arrow_right" size={14} className="arrow-flip"/>
        </button>
      </div>
    );
  }
  if (decision.outcome === "manual_review") {
    return (
      <div className="next-steps">
        <div className="next-step done"><Icon name="check" size={14}/> {t("Most rules passed","معظم القواعد مرت")}</div>
        <div className="next-step current"><Icon name="upload" size={14}/> {t("Upload salary certificate","ارفع شهادة الراتب")}</div>
        <div className="next-step"><Icon name="user" size={14}/> {t("Analyst review (≤48h)","مراجعة محلل")}</div>
        <div className="next-step"><Icon name="check_circle" size={14}/> {t("Confirm & continue","تأكيد ومتابعة")}</div>
        <button className="btn copper" style={{width:"100%", marginTop:14}} onClick={() => setScreen("docs")}>
          {t("Upload documents","رفع المستندات")} <Icon name="upload" size={14}/>
        </button>
      </div>
    );
  }
  return (
    <div className="next-steps">
      <div className="next-step bad"><Icon name="x" size={14}/> {t("ISKAN — not eligible","إسكان — غير مؤهل")}</div>
      <div className="next-step current"><Icon name="sparkles" size={14}/> {t("2 alternative programs found","تم العثور على برنامجين")}</div>
      <div className="next-step"><Icon name="phone_icon" size={14}/> {t("Speak to an advisor","تحدث مع مستشار")}</div>
    </div>
  );
}

function AlternativesCard({ t }) {
  const alts = [
    { name: "Sanad Plot Grant", desc: "Government land allocation for owner-occupiers with existing property.", match: "84% match", color: "#1b4149" },
    { name: "Lease-to-Own Pilot", desc: "Build equity through rent payments. Newly launched in Dhofar.", match: "76% match", color: "#1c1b3b" },
  ];
  return (
    <div className="card card-pad">
      <div className="label-eyebrow"><Icon name="sparkles" size={11}/> {t("Alternatives matched","البدائل")}</div>
      <div className="title" style={{marginTop:6}}>{t("We found 2 paths for you","وجدنا مسارين لك")}</div>
      <div style={{display:"flex", flexDirection:"column", gap:10, marginTop:12}}>
        {alts.map((a) => (
          <div key={a.name} className="alt-row" style={{borderLeft:`3px solid ${a.color}`}}>
            <div>
              <div className="title" style={{fontSize:14}}>{a.name}</div>
              <div className="muted text-12" style={{marginTop:2}}>{a.desc}</div>
            </div>
            <div className="pill copper" style={{marginLeft:8, flexShrink:0}}>{a.match}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.CitizenEligibility = CitizenEligibility;