// Mobile screen — the citizen experience reflowed inside an iOS device frame.
// Same data, same state — different interaction model. Demonstrates cross-channel.

function CitizenMobile({ citizen, tweaks, rtl }) {
  const [tab, setTab] = React.useState("home");
  const [showOnboarding, setShowOnboarding] = React.useState(true);
  const decision = React.useMemo(
    () => window.evaluateProgram(citizen, window.OHB_DATA.iskanProgram, window.OHB_DATA.ruleLibrary),
    [citizen]
  );
  const t = (en, ar) => (rtl ? ar : en);

  const phoneH = Math.min(780, window.innerHeight - 80);
  const phoneW = Math.round(phoneH * (390 / 844));

  return (
    <div className="mobile-fullscreen">
      <div className="mobile-toggle-bar">
        <button className={`m-mode-btn ${showOnboarding ? "active" : ""}`} onClick={() => setShowOnboarding(true)}>
          {t("Onboarding flow","تدفق التسجيل")}
        </button>
        <button className={`m-mode-btn ${!showOnboarding ? "active" : ""}`} onClick={() => setShowOnboarding(false)}>
          {t("Dashboard","لوحة التحكم")}
        </button>
      </div>
      <div className="mobile-center">
        <IOSDevice width={phoneW} height={phoneH} dark={false} keyboard={false}>
          {showOnboarding
            ? <MobileOnboardingScreen citizen={citizen} t={t} rtl={rtl} onComplete={() => setShowOnboarding(false)}/>
            : <MobilePhoneScreen citizen={citizen} decision={decision} tab={tab} setTab={setTab} t={t} rtl={rtl}/>
          }
        </IOSDevice>
      </div>
    </div>
  );
}

function Feat({ icon, title, desc }) {
  return (
    <div className="mobile-feat">
      <div className="mobile-feat-icon"><Icon name={icon} size={16}/></div>
      <div>
        <div className="text-14" style={{fontWeight:600}}>{title}</div>
        <div className="muted text-13" style={{marginTop:2}}>{desc}</div>
      </div>
    </div>
  );
}

function MobilePhoneScreen({ citizen, decision, tab, setTab, t, rtl }) {
  return (
    <div className={`m-screen ${rtl ? "rtl" : ""}`} dir={rtl ? "rtl" : "ltr"}>
      {/* Spacer for iOS device status bar */}
      <div style={{height: 56}}/>

      <div className="m-content">
        {tab === "home" && <MHome citizen={citizen} decision={decision} t={t}/>}
        {tab === "browse" && <MBrowse t={t}/>}
        {tab === "docs" && <MDocs citizen={citizen} t={t}/>}
        {tab === "profile" && <MProfile citizen={citizen} t={t}/>}
      </div>

      <div className="m-tabbar">
        {[
          ["home","home", t("Home","الرئيسية")],
          ["browse","map", t("Homes","المنازل")],
          ["docs","doc", t("Documents","المستندات")],
          ["profile","user", t("Profile","الملف")],
        ].map(([id, icon, label]) => (
          <button key={id} className={`m-tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>
            <Icon name={icon} size={20}/>
            <span>{label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function MHome({ citizen, decision, t }) {
  const outcome = decision.outcome;
  const passed = decision.trace.filter(r=>r.status==="passed").length;
  return (
    <div className="m-home">
      <div className="m-greeting">
        <div className="muted text-13">{t("Good morning,","صباح الخير،")}</div>
        <div className="title" style={{fontSize:22, fontFamily:"var(--font-sans)", fontWeight:400}}>{citizen.name.split(" ")[0]}</div>
      </div>

      <div className={`m-decision outcome-${outcome}`}>
        <div className="m-dec-eyebrow">{t("ISKAN eligibility","أهلية إسكان")}</div>
        <div className="m-dec-title">
          {outcome === "eligible" && t("You're eligible.","أنت مؤهل.")}
          {outcome === "manual_review" && t("Almost there.","تقريبا.")}
          {outcome === "rejected" && t("Other paths exist.","هناك مسارات أخرى.")}
        </div>
        <div className="m-dec-rings">
          <DecisionRing outcome={outcome} passed={passed} total={decision.trace.length}/>
          <div>
            <div className="m-dec-stat"><strong>{decision.routing}</strong> {t("routing","التوجيه")}</div>
            <div className="m-dec-stat"><strong>1.4s</strong> {t("decision time","وقت القرار")}</div>
            <div className="m-dec-stat"><strong>8</strong> {t("systems queried","أنظمة")}</div>
          </div>
        </div>
        <button className="btn copper" style={{width:"100%", marginTop:14}}>
          {outcome === "eligible" ? t("Browse homes","تصفح المنازل") : t("View details","عرض التفاصيل")}
        </button>
      </div>

      <div className="m-section-title">{t("Next action","الإجراء التالي")}</div>
      <div className="m-action">
        <div className="m-action-icon"><Icon name={outcome === "eligible" ? "key" : "upload"} size={18}/></div>
        <div style={{flex:1, minWidth:0}}>
          <div className="text-13" style={{fontWeight:600}}>
            {outcome === "eligible" ? t("Reserve Madinat Al Irfan · A-204","احجز مدينة العرفان") : t("Upload salary certificate","ارفع شهادة الراتب")}
          </div>
          <div className="tiny muted" style={{marginTop:2}}>
            {outcome === "eligible" ? t("3 min · 7-day lock","3 دقائق") : t("48h confirmation","48 ساعة")}
          </div>
        </div>
        <Icon name="chevron_right" size={16} style={{color:"var(--muted)"}} className="arrow-flip"/>
      </div>

      <div className="m-section-title">{t("Your waiting list","قائمة انتظارك")}</div>
      <div className="m-waiting">
        <div className="m-waiting-num">#{citizen.waitingPosition.toLocaleString()}</div>
        <div className="tiny muted" style={{marginTop:2}}>{t("of 28,492 applicants","من 28,492 متقدم")}</div>
        <div className="waiting-bar" style={{marginTop:10}}>
          <div className="waiting-bar-fill" style={{width: `${100 - (citizen.waitingPosition / 28492) * 100}%`}}/>
        </div>
        <div className="m-waiting-foot">
          <span className="text-12"><Icon name="calendar" size={11}/> {citizen.expectedTurn}</span>
          <span className="pill copper tiny">{t("On track","في المسار")}</span>
        </div>
      </div>
    </div>
  );
}

function MBrowse({ t }) {
  return (
    <div className="m-browse">
      <div className="m-search">
        <Icon name="search" size={15} style={{color:"var(--muted)"}}/>
        <input placeholder={t("Search homes","ابحث عن منازل")}/>
        <Icon name="filter" size={15} style={{color:"var(--muted)"}}/>
      </div>
      <div className="m-chip-row">
        <span className="chip active">{t("For you","لك")}</span>
        <span className="chip">Muscat</span>
        <span className="chip">Sohar</span>
        <span className="chip">Apartment</span>
        <span className="chip">Villa</span>
      </div>
      {window.OHB_DATA.units.slice(0,3).map((u) => (
        <div key={u.id} className="m-unit">
          <div className="m-unit-img" style={{background:`linear-gradient(135deg, ${u.tone}, ${u.tone}cc)`}}>
            <Icon name="building" size={36} style={{color:"rgba(255,255,255,0.4)"}}/>
            <span className="pill ok m-unit-pill">{t("Available","متاح")}</span>
          </div>
          <div style={{padding:"10px 12px"}}>
            <div className="text-13" style={{fontWeight:600}}>{u.project}</div>
            <div className="tiny muted">{u.wilayat} · {u.beds} {t("bed","غرف")} · {u.area} m²</div>
            <div className="row" style={{justifyContent:"space-between", marginTop:6}}>
              <div className="text-14" style={{fontWeight:700}}>OMR {u.priceOmr.toLocaleString()}</div>
              <span className="pill copper tiny">ISKAN</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function MDocs({ citizen, t }) {
  const items = [
    { name: "National ID", verified: true },
    { name: "Marriage certificate", verified: true },
    { name: "Bank statement (6mo)", verified: true },
    { name: "Salary certificate", verified: citizen.missingDocs.length === 0 },
  ];
  return (
    <div style={{padding:14, display:"flex", flexDirection:"column", gap:8}}>
      <div className="m-section-title" style={{marginTop:0}}>{t("Documents","المستندات")}</div>
      {items.map((d) => (
        <div key={d.name} className="m-doc">
          <div className={`m-doc-icon ${d.verified ? "ok" : ""}`}><Icon name={d.verified ? "doc_check" : "doc"} size={16}/></div>
          <div style={{flex:1}}>
            <div className="text-13" style={{fontWeight:600}}>{d.name}</div>
            <div className="tiny muted">{d.verified ? t("Verified","موثق") : t("Required","مطلوب")}</div>
          </div>
          {!d.verified && <button className="btn copper sm"><Icon name="upload" size={12}/></button>}
        </div>
      ))}
      <button className="btn dark-on-light" style={{marginTop:14}}>
        <Icon name="upload" size={14}/> {t("Scan with camera","امسح بالكاميرا")}
      </button>
    </div>
  );
}

function MProfile({ citizen, t }) {
  return (
    <div style={{padding:14, display:"flex", flexDirection:"column", gap:14}}>
      <div className="row" style={{gap:12}}>
        <div className="avatar-lg">{citizen.avatar}</div>
        <div>
          <div className="title" style={{fontSize:16}}>{citizen.name}</div>
          <div className="tiny muted">{citizen.nationalId}</div>
        </div>
      </div>
      <div className="m-stat-row">
        <div><div className="tiny muted">{t("Income","الدخل")}</div><div className="text-14" style={{fontWeight:700}}>OMR {citizen.monthlyIncomeOmr}</div></div>
        <div><div className="tiny muted">DTI</div><div className="text-14" style={{fontWeight:700}}>{citizen.dti}%</div></div>
        <div><div className="tiny muted">{t("Family","الأسرة")}</div><div className="text-14" style={{fontWeight:700}}>{citizen.familySize}</div></div>
      </div>
      <div className="m-section-title" style={{marginTop:6}}>{t("Settings","الإعدادات")}</div>
      {["Notifications","Language","Biometric login","Privacy"].map((s) => (
        <div key={s} className="m-doc">
          <div className="m-doc-icon"><Icon name="settings" size={16}/></div>
          <div style={{flex:1}}><div className="text-13">{s}</div></div>
          <Icon name="chevron_right" size={14} style={{color:"var(--muted)"}}/>
        </div>
      ))}
    </div>
  );
}

window.CitizenMobile = CitizenMobile;