/* ======================================================================
   KOREALM — Tenant flows: book inspection, apply, onboarding payment
   window.BookInspection, window.ApplyFlow, window.OnboardingPayment
   ====================================================================== */

function FlowShell({ title, sub, step, steps, onBack, children, aside }) {
  return (
    <div className="flow">
      <div className="flow-main">
        {onBack && <button className="btn-link row gap-6" style={{ marginBottom: 14 }} onClick={onBack}><Icon name="chevL" size={16} />Back</button>}
        <h1 style={{ fontSize: 27, letterSpacing: "-0.02em" }}>{title}</h1>
        {sub && <p className="muted" style={{ marginTop: 7, fontSize: 15 }}>{sub}</p>}
        {steps && <div style={{ margin: "22px 0 26px" }}><Stepper steps={steps} current={step} /></div>}
        <div style={{ marginTop: steps ? 0 : 24 }}>{children}</div>
      </div>
      {aside && <div className="flow-aside">{aside}</div>}
    </div>
  );
}

function PropertyMini({ p }) {
  return (
    <Card pad="sm">
      <Photo src={p.img} alt={p.title} label="property" style={{ height: 130, borderRadius: "var(--r)" }} />
      <div style={{ marginTop: 12 }}>
        <div className="row between" style={{ alignItems: "baseline" }}>
          <span className="prop-price mono" style={{ fontSize: 18 }}>{window.fmt.money(p.price)}<span className="prop-per">pcm</span></span>
          <StatusBadge status={p.status} />
        </div>
        <h3 style={{ fontSize: 16, margin: "6px 0 4px" }}>{p.title}</h3>
        <div className="row gap-6 dim" style={{ fontSize: 13 }}><Icon name="pin" size={13} />{p.neighborhood}</div>
        <div className="divider" style={{ margin: "12px 0" }} />
        <div className="prop-specs"><span><Icon name="bed" size={14} />{p.beds === 0 ? "Studio" : p.beds + " bd"}</span><span><Icon name="bath" size={14} />{p.baths} ba</span><span><Icon name="ruler" size={14} />{p.sqft} sq ft</span></div>
      </div>
    </Card>
  );
}

/* ---------------- Book inspection ---------------- */
function BookInspection({ propertyId }) {
  const { db, session, go, actions, toast } = useApp();
  const p = db.properties.find(x => x.id === propertyId) || db.properties[0];
  const [date, setDate] = useState(null);
  const [slot, setSlot] = useState(null);
  const [notes, setNotes] = useState("");
  const [done, setDone] = useState(false);

  const days = useMemo(() => Array.from({ length: 8 }, (_, i) => { const d = window.fmt.today(); d.setDate(d.getDate() + i + 1); return d; }), []);
  const slots = ["9:30 AM", "10:30 AM", "12:00 PM", "2:00 PM", "3:30 PM", "5:00 PM"];

  const submit = () => {
    if (!date || !slot) { toast("Pick a date and time", "err"); return; }
    actions.requestInspection({ propertyId: p.id, tenantId: session.tenantId, slot: date.toISOString() + "|" + slot, notes });
    setDone(true);
  };

  if (done) return (
    <FlowShell title="Viewing requested" onBack={null}
      aside={<PropertyMini p={p} />}>
      <Card pad className="success-card">
        <div className="success-icon"><Icon name="calendar" size={26} /></div>
        <h2 style={{ fontSize: 21, marginTop: 14 }}>Request sent to Korealm</h2>
        <p className="muted" style={{ marginTop: 8, fontSize: 15 }}>We'll confirm your viewing for <strong style={{ color: "var(--ink)" }}>{window.fmt.fmtDate(date)} at {slot}</strong> shortly. You'll get an email once it's approved.</p>
        <div className="panel" style={{ padding: 14, marginTop: 18 }}>
          <div className="row gap-10"><span className="num-step">1</span><span style={{ fontSize: 14 }}>Korealm confirms a time with the landlord</span></div>
          <div className="row gap-10" style={{ marginTop: 10 }}><span className="num-step">2</span><span style={{ fontSize: 14 }}>You receive confirmation & a calendar invite</span></div>
          <div className="row gap-10" style={{ marginTop: 10 }}><span className="num-step">3</span><span style={{ fontSize: 14 }}>Visit, then apply if it's the one</span></div>
        </div>
        <div className="row gap-10" style={{ marginTop: 20 }}>
          <Button variant="primary" iconR="arrowR" onClick={() => go("inspections")}>View my viewings</Button>
          <Button variant="ghost" onClick={() => go("apply", { propertyId: p.id })}>Apply now instead</Button>
        </div>
      </Card>
    </FlowShell>
  );

  return (
    <FlowShell title="Book a viewing" sub="Choose a time to view this home. Korealm coordinates with the landlord and confirms."
      onBack={() => go("dashboard")} aside={<PropertyMini p={p} />}>
      <Card pad>
        <span className="section-title">Select a date</span>
        <div className="day-grid" style={{ marginTop: 12 }}>
          {days.map((d, i) => (
            <button key={i} className={"day-cell" + (date && +date === +d ? " sel" : "")} onClick={() => setDate(d)}>
              <span className="dc-dow">{d.toLocaleDateString("en-US", { weekday: "short" })}</span>
              <span className="dc-day">{d.getDate()}</span>
              <span className="dc-mon">{d.toLocaleDateString("en-US", { month: "short" })}</span>
            </button>
          ))}
        </div>
        <div className="divider" style={{ margin: "20px 0" }} />
        <span className="section-title">Select a time</span>
        <div className="slot-grid" style={{ marginTop: 12 }}>
          {slots.map(s => <button key={s} className={"slot" + (slot === s ? " sel" : "")} disabled={!date} onClick={() => setSlot(s)}>{s}</button>)}
        </div>
        <div className="divider" style={{ margin: "20px 0" }} />
        <Field label="Notes for the landlord (optional)"><Textarea placeholder="Anything you'd like them to know…" value={notes} onChange={e => setNotes(e.target.value)} /></Field>
        <Button variant="primary" size="lg" className="btn-block" style={{ marginTop: 18 }} icon="calendar" onClick={submit}>Request viewing</Button>
      </Card>
    </FlowShell>
  );
}

/* ---------------- Apply ---------------- */
function ApplyFlow({ propertyId }) {
  const { db, session, go, actions, user } = useApp();
  const p = db.properties.find(x => x.id === propertyId) || db.properties[0];
  const me = user(session.tenantId);
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const [d, setD] = useState({ occupants: "1", moveIn: "", pets: "None", income: "", employment: "", notes: "", consent: false });
  const [err, setErr] = useState({});

  const next = () => {
    const e = {};
    if (step === 0) { if (!d.moveIn) e.moveIn = "Select a move-in date"; }
    if (step === 1) { if (!d.employment.trim()) e.employment = "Required"; if (!d.income || +d.income <= 0) e.income = "Enter monthly income"; }
    setErr(e);
    if (Object.keys(e).length) return;
    if (step < 2) setStep(step + 1);
  };
  const submit = () => {
    if (!d.consent) { setErr({ consent: "Please authorize the background check" }); return; }
    actions.submitApplication({ propertyId: p.id, tenantId: session.tenantId, occupants: +d.occupants, moveIn: d.moveIn, pets: d.pets, income: +d.income, employment: d.employment, notes: d.notes, creditConsent: true });
    setDone(true);
  };

  const incomeRatio = d.income ? (+d.income / p.price).toFixed(1) : null;

  if (done) return (
    <FlowShell title="Application submitted" aside={<PropertyMini p={p} />}>
      <Card pad className="success-card">
        <div className="success-icon"><Icon name="doc" size={26} /></div>
        <h2 style={{ fontSize: 21, marginTop: 14 }}>You're in the queue</h2>
        <p className="muted" style={{ marginTop: 8, fontSize: 15 }}>Korealm is reviewing your application for <strong style={{ color: "var(--ink)" }}>{p.title}</strong>. Most decisions land within 48 hours — we'll email you the moment there's an update.</p>
        <div className="panel" style={{ padding: 16, marginTop: 18 }}>
          <div className="row between"><span className="muted">Monthly rent</span><span className="mono">{window.fmt.money(p.price)}</span></div>
          <div className="row between" style={{ marginTop: 8 }}><span className="muted">Move-in</span><span>{window.fmt.fmtDate(d.moveIn)}</span></div>
          <div className="row between" style={{ marginTop: 8 }}><span className="muted">Income-to-rent</span><span className="mono">{incomeRatio}×</span></div>
        </div>
        <Button variant="primary" iconR="arrowR" style={{ marginTop: 20 }} onClick={() => go("applications")}>Track my application</Button>
      </Card>
    </FlowShell>
  );

  return (
    <FlowShell title="Rental application" sub={`Applying for ${p.title}`} steps={["Household", "Income", "Review"]} step={step}
      onBack={() => step === 0 ? go("dashboard") : setStep(step - 1)} aside={<PropertyMini p={p} />}>
      <Card pad>
        {step === 0 && (
          <div className="col gap-16 anim-rise">
            <div className="row gap-12" style={{ padding: 12, background: "var(--surface-2)", borderRadius: "var(--r)" }}>
              <Avatar name={me.name} size={38} /><div><div style={{ fontWeight: 600 }}>{me.name}</div><div className="hint">{me.email}</div></div>
            </div>
            <div className="grid-2">
              <Field label="Number of occupants" req><Select value={d.occupants} onChange={e => setD({ ...d, occupants: e.target.value })}>{["1", "2", "3", "4", "5+"].map(n => <option key={n}>{n}</option>)}</Select></Field>
              <Field label="Desired move-in date" req error={err.moveIn}><Input type="date" value={d.moveIn} onChange={e => setD({ ...d, moveIn: e.target.value })} error={err.moveIn} /></Field>
            </div>
            <Field label="Pets"><Select value={d.pets} onChange={e => setD({ ...d, pets: e.target.value })}>{["None", "1 cat", "1 dog", "2 pets", "Other"].map(n => <option key={n}>{n}</option>)}</Select></Field>
            <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" onClick={next}>Continue</Button>
          </div>
        )}
        {step === 1 && (
          <div className="col gap-16 anim-rise">
            <Field label="Employment / source of income" req error={err.employment}><Input icon="briefcase" placeholder="Job title, employer" value={d.employment} onChange={e => setD({ ...d, employment: e.target.value })} error={err.employment} /></Field>
            <Field label="Gross monthly income" req error={err.income} hint={!err.income && incomeRatio ? `That's ${incomeRatio}× the monthly rent. Korealm requires 2.5×.` : "Before tax."}>
              <MoneyInput placeholder="0" value={d.income} onChange={e => setD({ ...d, income: e.target.value.replace(/[^\d]/g, "") })} error={err.income} />
            </Field>
            {incomeRatio && (
              <div className={"ratio-bar " + (incomeRatio >= 2.5 ? "ok" : "warn")}>
                <Icon name={incomeRatio >= 2.5 ? "checkCircle" : "alert"} size={16} />
                {incomeRatio >= 2.5 ? `Meets the 2.5× income requirement (${incomeRatio}×).` : `Below the 2.5× requirement (${incomeRatio}×). You can still apply.`}
              </div>
            )}
            <Field label="Anything else? (optional)"><Textarea placeholder="Notes for the Korealm team…" value={d.notes} onChange={e => setD({ ...d, notes: e.target.value })} /></Field>
            <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" onClick={next}>Review application</Button>
          </div>
        )}
        {step === 2 && (
          <div className="col gap-16 anim-rise">
            <div className="review-grid">
              {[["Applicant", me.name], ["Email", me.email], ["Occupants", d.occupants], ["Move-in", d.moveIn ? window.fmt.fmtDate(d.moveIn) : "—"], ["Pets", d.pets], ["Employment", d.employment], ["Monthly income", window.fmt.money(+d.income)], ["Income-to-rent", incomeRatio + "×"]].map(([k, v]) => (
                <div key={k} className="review-row"><span className="muted">{k}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{v}</span></div>
              ))}
            </div>
            <div className={"consent-box" + (err.consent ? " err-box" : "")} onClick={() => setD({ ...d, consent: !d.consent })}>
              <span className={"check" + (d.consent ? " on" : "")}><Icon name="check" size={13} strokeWidth={3} /></span>
              <span style={{ fontSize: 14, lineHeight: 1.5 }}>I authorize Korealm to carry out referencing and affordability checks, and confirm the information provided is accurate.</span>
            </div>
            {err.consent && <span className="err">{err.consent}</span>}
            <Button variant="primary" size="lg" className="btn-block" icon="send" onClick={submit}>Submit application</Button>
          </div>
        )}
      </Card>
    </FlowShell>
  );
}

/* ---------------- Onboarding payment ---------------- */
function OnboardingPayment({ applicationId }) {
  const { db, session, go, actions, user, toast } = useApp();
  const app = db.applications.find(a => a.id === applicationId) || db.applications.find(a => a.status === "approved" && a.tenantId === session.tenantId);
  const p = app ? db.properties.find(x => x.id === app.propertyId) : db.properties[0];
  const [step, setStep] = useState(0); // 0 summary, 1 pay, 2 done
  const [method, setMethod] = useState("card");
  const [card, setCard] = useState({ num: "", name: "", exp: "", cvc: "" });
  const [processing, setProcessing] = useState(false);
  const [receipt, setReceipt] = useState(null);

  const firstMonth = p.price, deposit = p.deposit, fee = p.holdingDeposit;
  const total = firstMonth + deposit + fee;

  const pay = () => {
    setProcessing(true);
    setTimeout(() => {
      const rec = actions.addPayment({ tenantId: session.tenantId, propertyId: p.id, type: "onboarding", amount: total, method: method === "card" ? "Card ····" + (card.num.slice(-4) || "4242") : "Bank transfer", commissionRate: 1 });
      // also schedule the recurring rent (first paid as part, set next month pending)
      actions.addPayment({ tenantId: session.tenantId, propertyId: p.id, type: "rent", amount: p.price, status: "pending", method: "—", date: window.fmt.today().toISOString(), commissionRate: p.commissionRate, period: "Next month" });
      setReceipt(rec); setProcessing(false); setStep(2);
    }, 1500);
  };

  if (!app) return <FlowShell title="Onboarding payment"><Card pad><Empty icon="wallet" title="No approved application yet" >Your onboarding payment unlocks once an application is approved.</Empty></Card></FlowShell>;

  return (
    <FlowShell title="Complete your move-in" sub={`Secure ${p.title}`} steps={["Summary", "Payment", "Confirmed"]} step={step}
      onBack={step === 0 ? () => go("dashboard") : step === 1 ? () => setStep(0) : null}
      aside={<PropertyMini p={p} />}>
      {step === 0 && (
        <Card pad className="anim-rise">
          <div className="approved-banner"><Icon name="checkCircle" size={18} /><div><strong>Application approved</strong><div className="hint" style={{ color: "inherit", opacity: .85 }}>Pay your move-in total to sign the tenancy and get the keys.</div></div></div>
          <div className="cost-list" style={{ marginTop: 18 }}>
            <div className="cost-row"><div><div style={{ fontWeight: 600 }}>First month's rent</div><div className="hint">Applied to your first month</div></div><span className="mono">{window.fmt.money(firstMonth)}</span></div>
            <div className="cost-row"><div><div style={{ fontWeight: 600 }}>Tenancy deposit</div><div className="hint">Refundable, protected in a Government scheme</div></div><span className="mono">{window.fmt.money(deposit)}</span></div>
            <div className="cost-row"><div><div style={{ fontWeight: 600 }}>Holding deposit</div><div className="hint">One week's rent, credited to your first month</div></div><span className="mono">{window.fmt.money(fee)}</span></div>
            <div className="cost-row total"><span style={{ fontWeight: 700 }}>Total due today</span><span className="mono" style={{ fontWeight: 700, fontSize: 19 }}>{window.fmt.money(total)}</span></div>
          </div>
          <Button variant="primary" size="lg" className="btn-block" style={{ marginTop: 20 }} icon="lock" onClick={() => setStep(1)}>Continue to payment</Button>
          <p className="hint center" style={{ textAlign: "center", marginTop: 10 }}>Funds are held securely until your tenancy is countersigned.</p>
        </Card>
      )}
      {step === 1 && (
        <Card pad className="anim-rise">
          <div className="seg" style={{ width: "100%", marginBottom: 18 }}>
            <button className={method === "card" ? "active" : ""} style={{ flex: 1 }} onClick={() => setMethod("card")}>Card</button>
            <button className={method === "bank" ? "active" : ""} style={{ flex: 1 }} onClick={() => setMethod("bank")}>Bank transfer</button>
          </div>
          {method === "card" ? (
            <div className="col gap-16">
              <Field label="Card number"><Input icon="card" inputMode="numeric" placeholder="4242 4242 4242 4242" value={card.num} onChange={e => setCard({ ...card, num: e.target.value.replace(/[^\d ]/g, "").slice(0, 19) })} /></Field>
              <Field label="Name on card"><Input placeholder="Full name" value={card.name} onChange={e => setCard({ ...card, name: e.target.value })} /></Field>
              <div className="grid-2">
                <Field label="Expiry"><Input placeholder="MM / YY" value={card.exp} onChange={e => setCard({ ...card, exp: e.target.value })} /></Field>
                <Field label="CVC"><Input placeholder="123" value={card.cvc} onChange={e => setCard({ ...card, cvc: e.target.value.replace(/\D/g, "").slice(0, 4) })} /></Field>
              </div>
            </div>
          ) : (
            <div className="bank-box">
              <p className="muted" style={{ fontSize: 14 }}>Transfer to the Korealm escrow account below. We'll auto-match your reference.</p>
              <div className="bank-row"><span className="muted">Account name</span><span>Korealm Escrow Ltd</span></div>
              <div className="bank-row"><span className="muted">Account number</span><span className="mono">88420091</span></div>
              <div className="bank-row"><span className="muted">Sort code</span><span className="mono">04-00-72</span></div>
              <div className="bank-row"><span className="muted">Reference</span><span className="mono">KRM-{p.id.toUpperCase()}</span></div>
            </div>
          )}
          <div className="pay-total"><span className="muted">Total</span><span className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{window.fmt.money(total)}</span></div>
          <Button variant="primary" size="lg" className="btn-block" disabled={processing} onClick={pay}>
            {processing ? <><span className="spin" />Processing payment…</> : <><Icon name="lock" size={16} />Pay {window.fmt.money(total)}</>}
          </Button>
          <div className="row center gap-6" style={{ justifyContent: "center", marginTop: 12 }}><Icon name="shield" size={14} className="dim" /><span className="hint">Secured by Korealm Pay (sandbox)</span></div>
        </Card>
      )}
      {step === 2 && (
        <Card pad className="success-card anim-rise">
          <div className="success-icon"><Icon name="key" size={26} /></div>
          <h2 style={{ fontSize: 22, marginTop: 14 }}>You're all moved in! 🎉</h2>
          <p className="muted" style={{ marginTop: 8, fontSize: 15 }}>Payment of <strong style={{ color: "var(--ink)" }}>{window.fmt.money(total)}</strong> received. Your tenancy for {p.title} is active.</p>
          <div className="receipt">
            <div className="row between"><span className="muted">Reference</span><span className="mono">{receipt.reference}</span></div>
            <div className="row between" style={{ marginTop: 8 }}><span className="muted">Paid with</span><span>{receipt.method}</span></div>
            <div className="row between" style={{ marginTop: 8 }}><span className="muted">Date</span><span>{window.fmt.fmtDate(receipt.date)}</span></div>
            <div className="divider" style={{ margin: "12px 0" }} />
            <div className="row between"><span style={{ fontWeight: 700 }}>Total paid</span><span className="mono" style={{ fontWeight: 700 }}>{window.fmt.money(total)}</span></div>
          </div>
          <div className="row gap-10" style={{ marginTop: 20 }}>
            <Button variant="primary" iconR="arrowR" onClick={() => go("dashboard")}>Go to dashboard</Button>
            <Button variant="ghost" icon="download" onClick={() => toast("Receipt downloaded (sandbox)", "info")}>Download receipt</Button>
          </div>
        </Card>
      )}
    </FlowShell>
  );
}

Object.assign(window, { BookInspection, ApplyFlow, OnboardingPayment, FlowShell, PropertyMini });