// Citizen — Finance (bank offers) + Docs screen

function CitizenFinance({ citizen, unit, calc, t, setScreen, decision, tweaks }) {
  const [chosenBank, setChosenBank] = React.useState(null);
  const [accepted, setAccepted] = React.useState(false);

  const banks = [
    { id: "bm", name: "Bank Muscat", logo: "BM", color: "#c41e3a", rate: 4.0, emi: calc.emi, fees: 250, processingDays: 5, kind: "Conventional", note: "Same-day disbursement once signed." },
    { id: "bn", name: "Bank Nizwa", logo: "BN", color: "#1b4149", rate: 3.95, emi: calc.emi * 0.99, fees: 180, processingDays: 6, kind: "Islamic · Ijarah", note: "No early-settlement penalty." },
    { id: "sib", name: "Sohar International", logo: "SI", color: "#26262a", rate: 4.05, emi: calc.emi * 1.01, fees: 200, processingDays: 4, kind: "Conventional", note: "Citizen advisor assigned." },
    { id: "ohb", name: "Oman Housing Bank", logo: "OHB", color: "#eaa07a", rate: 3.8, emi: calc.emi * 0.97, fees: 0, processingDays: 7, kind: "Subsidized", note: "Lowest profit rate available.", best: true },
  ];

  return (
    <div className="finance-screen">
      <div className="finance-header">
        <button className="text-13 muted" onClick={() => setScreen("browse")}>
          <Icon name="arrow_left" size={13}/> {t("Back to browse","العودة")}
        </button>
        <h2 className="h2" style={{marginTop:8}}>{t("Compare offers from your banks.","قارن العروض من بنوكك.")}</h2>
        <p className="muted text-14" style={{marginTop:6, maxWidth:620}}>
          {t(
            `For ${unit?.project || "this unit"} · OMR ${(unit?.priceOmr || 60000).toLocaleString()}. All offers shown are pre-approved against your live eligibility.`,
            "كل العروض موافقة مسبقاً مقابل أهليتك المباشرة."
          )}
        </p>
      </div>

      <div className="bank-grid">
        {banks.map((b) => (
          <BankOfferCard key={b.id} bank={b} chosen={chosenBank === b.id} onChoose={() => setChosenBank(b.id)} t={t} calc={calc}/>
        ))}
      </div>

      {chosenBank && !accepted && (
        <div className="finance-actions">
          <div className="card card-pad finance-confirm">
            <div>
              <div className="label-eyebrow">{t("Selected","المختار")}</div>
              <div className="title" style={{marginTop:6}}>{banks.find(b=>b.id===chosenBank).name}</div>
              <div className="muted text-13">{t("Bank will contact you to schedule signing.","سيتواصل البنك معك.")}</div>
            </div>
            <button className="btn copper lg" onClick={() => setAccepted(true)}>
              {t("Accept offer & continue","قبول العرض")} <Icon name="arrow_right" size={14} className="arrow-flip"/>
            </button>
          </div>
        </div>
      )}

      {accepted && (
        <div className="finance-accepted">
          <div className="card card-pad-lg" style={{display:"flex", flexDirection:"column", gap:14, alignItems:"flex-start"}}>
            <div className="reserved-icon"><Icon name="check_circle" size={36}/></div>
            <div className="h2">{t("Offer accepted. We're on it.","تم قبول العرض.")}</div>
            <div className="muted text-14">
              {t("Your bank advisor will text you within 24h to schedule signing at the branch. Disbursement is typically same-day after signing.","سيتواصل مستشار البنك معك خلال 24 ساعة.")}
            </div>
            <div className="row" style={{gap:10, marginTop:4}}>
              <button className="btn dark-on-light"><Icon name="calendar" size={14}/> {t("Add to calendar","أضف إلى التقويم")}</button>
              <button className="btn ghost"><Icon name="message" size={14}/> {t("Message advisor","راسل المستشار")}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function BankOfferCard({ bank, chosen, onChoose, t, calc }) {
  return (
    <div className={`bank-card ${chosen ? "chosen" : ""} ${bank.best ? "best" : ""}`} onClick={onChoose}>
      {bank.best && <div className="bank-best">{t("Best for you","الأفضل لك")}</div>}
      <div className="bank-head">
        <div className="bank-logo" style={{background: bank.color}}>{bank.logo}</div>
        <div>
          <div className="title" style={{fontSize:15}}>{bank.name}</div>
          <div className="tiny muted">{bank.kind}</div>
        </div>
      </div>
      <div className="bank-rate">
        <div>
          <div className="tiny muted">{t("Profit rate","معدل الربح")}</div>
          <div className="bank-rate-num">{bank.rate.toFixed(2)}<span className="bank-rate-pct">%</span></div>
        </div>
        <div>
          <div className="tiny muted">{t("Monthly","شهرياً")}</div>
          <div className="bank-rate-num small">OMR {bank.emi.toFixed(0)}</div>
        </div>
      </div>
      <div className="bank-meta">
        <div className="bank-meta-row"><Icon name="cash" size={12} style={{color:"var(--muted)"}}/> {t("Fees","الرسوم")}: OMR {bank.fees}</div>
        <div className="bank-meta-row"><Icon name="clock" size={12} style={{color:"var(--muted)"}}/> {bank.processingDays} {t("days processing","أيام")}</div>
      </div>
      <div className="muted text-12 bank-note">{bank.note}</div>
      <button className="btn ghost sm" style={{width:"100%", marginTop:8}}>
        {chosen ? <><Icon name="check" size={13}/> {t("Selected","المختار")}</> : t("Select","اختر")}
      </button>
    </div>
  );
}

function CitizenDocs({ citizen, t }) {
  const docs = [
    { name: "National ID", status: "verified", ts: "2 days ago" },
    { name: "Six-month bank statement", status: "verified", ts: "2 days ago" },
    { name: "Marriage certificate", status: "verified", ts: "1 week ago" },
    { name: "Salary certificate (recent)", status: citizen.missingDocs.length > 0 ? "missing" : "verified", ts: citizen.missingDocs.length > 0 ? "—" : "Today" },
    { name: "Existing loan liability statement", status: "verified", ts: "1 week ago" },
  ];
  return (
    <div className="docs-screen">
      <h2 className="h2">{t("Documents","المستندات")}</h2>
      <p className="muted text-14" style={{maxWidth:620, marginTop:4}}>
        {t("We pre-fetched what we could from Civil Registry. Anything below shows what we still need.","استرجعنا ما يمكن من السجل المدني.")}
      </p>
      <div className="card card-pad" style={{marginTop:18}}>
        {docs.map((d, i) => (
          <div key={d.name} className="doc-row" style={i === 0 ? {} : {borderTop:"1px solid var(--hairline)"}}>
            <div className="row" style={{gap:12}}>
              <div className={`doc-icon status-${d.status}`}>
                <Icon name={d.status === "verified" ? "doc_check" : "doc"} size={16}/>
              </div>
              <div>
                <div className="text-14" style={{fontWeight:600}}>{d.name}</div>
                <div className="tiny muted">{d.ts}</div>
              </div>
            </div>
            {d.status === "verified" ? (
              <span className="pill ok"><Icon name="check" size={11}/> {t("Verified","موثق")}</span>
            ) : (
              <button className="btn copper sm"><Icon name="upload" size={13}/> {t("Upload","رفع")}</button>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

window.CitizenFinance = CitizenFinance;
window.CitizenDocs = CitizenDocs;