/* Dulius App UI Kit — Accept Offer / Application flow (overlay) */

const APP_STEPS = ["Amount & term", "Your details", "Review terms", "Sign", "Done"];

function money(n) { return "$" + Math.round(n).toLocaleString("en-US"); }

// Payment cadence: day-terms repay daily (Mon–Fri); week/month terms repay weekly.
function cadence(payback, termDays) {
  if (termDays <= 0) return { freq: "Daily", label: "Daily payment (Mon–Fri)", per: payback, note: "Daily, Mon–Fri (ACH)" };
  if (termDays < 140) {
    const bizDays = Math.max(1, Math.round(termDays * 5 / 7));
    return { freq: "Daily", label: "Daily payment (Mon–Fri)", per: payback / bizDays, count: bizDays, note: "Daily, Mon–Fri (ACH)" };
  }
  const weeks = Math.max(1, Math.round(termDays / 7));
  return { freq: "Weekly", label: "Weekly payment", per: payback / weeks, count: weeks, note: "Weekly (ACH)" };
}

function ApplyFlow({ offer, onClose }) {
  const isDulius = offer && offer.dulius;
  const [step, setStep] = React.useState(0);
  const [amount, setAmount] = React.useState(20000);
  const [termDays, setTermDays] = React.useState(72);
  const [tila, setTila] = React.useState(false);
  const [signed, setSigned] = React.useState(false);
  const [useOfFunds, setUseOfFunds] = React.useState("");
  const [voided, setVoided] = React.useState(false);
  const [addNegotiate, setAddNegotiate] = React.useState(false);
  const [addProtect, setAddProtect] = React.useState(false);

  const factor = 1.46, origRate = 0.06, svc = 99;
  const payback = amount * factor;
  const finance = payback - amount;
  const orig = amount * origRate;
  const net = amount - orig;
  const pay = cadence(payback, termDays);
  const apr = Math.round((finance / amount) * (365 / termDays) * 100);

  const top = React.useRef(null);
  React.useEffect(() => { if (top.current) top.current.scrollTop = 0; }, [step]);

  return (
    <div className="dapply-wrap">
      <header className="dapply-nav">
        <div className="dapply-navleft">
          <img className="dapply-logo" src="../../assets/dulius-wordmark.png" alt="Dulius" />
          <span className="dapply-prog-name">{offer ? offer.lender : "Score Builder"} application</span>
        </div>
        <button className="dapply-close" onClick={onClose}><Icon name="x" size={20} /></button>
      </header>

      <div className="dapply-steps">
        {APP_STEPS.map((s, i) => (
          <div key={i} className={`dapply-step ${i < step ? "done" : ""} ${i === step ? "active" : ""}`}>
            <span className="dapply-dot">{i < step ? <Icon name="check" size={13} /> : i + 1}</span>
            <span className="dapply-slabel">{s}</span>
            {i < APP_STEPS.length - 1 && <span className="dapply-bar" />}
          </div>
        ))}
      </div>

      <main className="dapply-body" ref={top}>
        {step === 0 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Choose your amount &amp; term</h2>
            <p className="dapply-sub">{isDulius ? "Every payment on this deal builds your Dulius Score." : "Matched to your profile and ready to fund."}</p>

            <div className="dapply-field">
              <div className="dapply-flabel"><span>Funding amount</span><span className="dapply-fval dnum">{money(amount)}</span></div>
              <input type="range" min="5000" max="40000" step="1000" value={amount} onChange={(e) => setAmount(+e.target.value)} className="drange" />
              <div className="drange-ends dnum"><span>$5,000</span><span>$40,000</span></div>
            </div>

            <div className="dapply-field">
              <div className="dapply-flabel"><span>Term</span></div>
              <div className="dapply-seg">
                {[50, 72, 100].map((t) => (
                  <button key={t} className={termDays === t ? "active" : ""} onClick={() => setTermDays(t)}>{t} days</button>
                ))}
              </div>
            </div>

            <div className="dapply-calc">
              <div className="dapply-calc-row"><span>Factor rate</span><span className="dnum">{factor}</span></div>
              <div className="dapply-calc-row"><span>Total payback</span><span className="dnum">{money(payback)}</span></div>
              <div className="dapply-calc-row"><span>{pay.label}</span><span className="dnum">{money(pay.per)}/{pay.freq === "Weekly" ? "wk" : "day"}</span></div>
              <div className="dapply-calc-row"><span>Origination fee (6%)</span><span className="dnum">{money(orig)}</span></div>
              <div className="dapply-calc-row total"><span>Estimated net funding</span><span className="dnum">{money(net)}</span></div>
            </div>
            <div className="dapply-note"><Icon name="zap" size={15} /> Estimated funding 1–2 business days after approval.</div>

            <div className="dapply-addons">
              <div className="dapply-addons-h">Want Dulius in your corner on this deal?</div>
              <button className={`dapply-addon ${addNegotiate ? "on" : ""}`} onClick={() => setAddNegotiate(!addNegotiate)}>
                <span className={`dapply-addon-box ${addNegotiate ? "on" : ""}`}>{addNegotiate && <Icon name="check" size={13} />}</span>
                <span className="dapply-addon-txt">
                  <span className="dapply-addon-t">Have us negotiate the terms first <InfoDot text="You're not charged anything unless we improve your terms or the deal reaches a resolution." /></span>
                  <span className="dapply-addon-s">We contact the lender to push for better terms before you commit.</span>
                </span>
                <span className="dapply-addon-price dnum">$299<span className="dapply-addon-pricesub">if funded</span></span>
              </button>
              <button className={`dapply-addon ${addProtect ? "on" : ""}`} onClick={() => setAddProtect(!addProtect)}>
                <span className={`dapply-addon-box ${addProtect ? "on" : ""}`}>{addProtect && <Icon name="check" size={13} />}</span>
                <span className="dapply-addon-txt">
                  <span className="dapply-addon-t">Add Dispute Protection <InfoDot text="Like insurance for your funding — if anything goes wrong with a lender, Dulius steps in with no per-case fee. $99/mo with Premium, $49/mo with Pro." /></span>
                  <span className="dapply-addon-s">Coverage on this and every active Dulius deal · $49/mo with Pro.</span>
                </span>
                <span className="dapply-addon-price dnum">$99<span className="dapply-addon-pricesub">/mo</span></span>
              </button>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Confirm your details</h2>
            <p className="dapply-sub">Good news — we already have most of what funders need on file. Just confirm and add the last couple of items marked <span className="dreq">★</span>.</p>

            {DULIUS.application.onFile.map((grp, gi) => (
              <div key={gi} className="dappfields">
                <div className="dappfields-h">{grp.group} <span className="dappfields-ok"><Icon name="check" size={13} /> on file</span></div>
                <div className="dappfields-grid">
                  {grp.items.map((it, ii) => (
                    <div key={ii} className="dappfield">
                      <span className="dappfield-k">{it.label}{it.req && <span className="dreq">★</span>}</span>
                      <span className="dappfield-v">{it.val}{it.src && <span className="dappfield-src">{it.src}</span>}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            <div className="dappfields">
              <div className="dappfields-h need">A couple more things <span className="dappfields-need">we still need</span></div>
              <label className="dapply-needfield">
                <span className="dappfield-k">Use of funds <span className="dreq">★</span></span>
                <div className="ofield-in"><Icon name="target" size={18} />
                  <select value={useOfFunds} onChange={(e) => setUseOfFunds(e.target.value)}>
                    <option value="">Select…</option>
                    {DULIUS.application.needed[0].options.map((o) => <option key={o}>{o}</option>)}
                  </select>
                </div>
              </label>
              <div className="dapply-needupload">
                <div className="dapply-needupload-l">
                  <span className="dappfield-k">Voided check <span className="dreq">★</span></span>
                  <span className="dappfield-note">Required for ACH funding &amp; repayment</span>
                </div>
                <button className={`dchip ${voided ? "" : "ghost"}`} onClick={() => setVoided(!voided)}>
                  <Icon name={voided ? "check" : "upload"} size={15} /> {voided ? "Uploaded" : "Upload"}
                </button>
              </div>
              <div className="dapply-needupload">
                <div className="dapply-needupload-l">
                  <span className="dappfield-k">Business license</span>
                  <span className="dappfield-note">Optional — adds credibility &amp; unlocks more offers</span>
                </div>
                <button className="dchip ghost"><Icon name="upload" size={15} /> Upload</button>
              </div>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Review your terms</h2>
            <p className="dapply-sub">Full transparency — here's every number, with no surprises.</p>
            <div className="dapply-disclosure">
              {[
                ["Amount requested", money(amount)],
                ["Origination fee (6%, deducted)", "−" + money(orig)],
                ["Net funding amount", money(net)],
                ["Factor rate", String(factor)],
                ["Total payback amount", money(payback)],
                ["Payment frequency", pay.note],
                [pay.label, money(pay.per)],
                ["Term", termDays + " days"],
              ].map(([k, v], i) => (
                <div key={i} className="dapply-drow"><span>{k}</span><span className="dnum">{v}</span></div>
              ))}
            </div>

            <div className="dtila">
              <div className="dtila-head"><Icon name="scale" size={16} /> Truth in Lending (TILA) disclosure</div>
              <div className="dtila-grid">
                <div><span className="dtila-v dnum">{apr}%</span><span className="dtila-l">APR equivalent</span></div>
                <div><span className="dtila-v dnum">{money(finance)}</span><span className="dtila-l">Finance charge</span></div>
                <div><span className="dtila-v dnum">{money(amount)}</span><span className="dtila-l">Amount financed</span></div>
                <div><span className="dtila-v dnum">{money(payback)}</span><span className="dtila-l">Total of payments</span></div>
              </div>
            </div>

            <label className="dapply-check" onClick={() => setTila(!tila)}>
              <span className={`dapply-box ${tila ? "on" : ""}`}>{tila && <Icon name="check" size={13} />}</span>
              <span>I acknowledge the fee and TILA disclosures above and authorize {pay.freq === "Weekly" ? "a weekly" : "a daily (Mon–Fri)"} ACH payment of {money(pay.per)}.</span>
            </label>
          </div>
        )}

        {step === 3 && (
          <div className="dapply-card">
            <h2 className="dapply-h">Sign your agreement</h2>
            <p className="dapply-sub">Securely e-signed via DocuSign. Scroll the agreement, then sign.</p>
            <div className="dsign-doc">
              <div className="dsign-doctop"><Icon name="file-text" size={16} /> Dulius Score Builder Agreement</div>
              <p>This Business Funding Agreement ("Agreement") is entered into between Dulius Funding LLC ("Dulius") and {DULIUS.user.business} ("Merchant") for the purchase of future receivables in the amount of {money(amount)}…</p>
              <p>Merchant agrees to a total payback of {money(payback)} via {pay.freq === "Weekly" ? "weekly" : "daily (Mon–Fri)"} ACH of {money(pay.per)} over {termDays} days. A service fee of ${svc}/month applies. Merchant may request a payoff letter at any time at no cost…</p>
              <p>Renewal eligibility begins at 40% paid. Early payoff is permitted with no penalty beyond the agreed factor…</p>
            </div>
            <button className={`dsign-pad ${signed ? "signed" : ""}`} onClick={() => setSigned(true)}>
              {signed ? <span className="dsign-done"><Icon name="check" size={18} /> Signed — Marcus Thompson</span> : <span className="dsign-prompt"><Icon name="pen-line" size={18} /> Click to sign here</span>}
            </button>
          </div>
        )}

        {step === 4 && (
          <div className="dapply-card center">
            <div className="dapply-success"><Icon name="check" size={30} /></div>
            <h2 className="dapply-h">Your application is submitted</h2>
            <p className="dapply-sub">We'll email {DULIUS.user.name.split(" ")[0].toLowerCase()}@thompsonskitchen.com with next steps.</p>
            {(addNegotiate || addProtect) && (
              <div className="dapply-addedsvcs">
                {addNegotiate && <div className="dapply-addedsvc"><Icon name="handshake" size={15} /> We'll negotiate your terms first — no charge unless the deal funds or improves.</div>}
                {addProtect && <div className="dapply-addedsvc"><Icon name="shield-check" size={15} /> Dispute Protection added — $99/mo ($49/mo with Pro), covering this deal.</div>}
              </div>
            )}
            <div className="dapply-timeline">
              {[
                ["Application submitted", "Now", true],
                ["Document review", "Within 4 hours", false],
                ["Approval decision", "Within 24 hours", false],
                ["Funding", "1–2 business days", false],
              ].map(([t, w, done], i) => (
                <div key={i} className={`dapply-tl ${done ? "done" : ""}`}>
                  <span className="dapply-tldot">{done ? <Icon name="check" size={13} /> : i + 1}</span>
                  <span className="dapply-tlt">{t}</span><span className="dapply-tlw">{w}</span>
                </div>
              ))}
            </div>
            <Button variant="primary" iconRight="arrow-right" onClick={onClose}>Go to my dashboard</Button>
          </div>
        )}
      </main>

      {step < 4 && (
        <footer className="dapply-foot">
          {step > 0 ? <button className="dapply-back" onClick={() => setStep((s) => s - 1)}><Icon name="arrow-left" size={18} /> Back</button> : <button className="dapply-back" onClick={onClose}>Cancel</button>}
          <Button variant="accent" size="lg" iconRight="arrow-right"
            onClick={() => setStep((s) => s + 1)}
            style={{ opacity: (step === 1 && (!useOfFunds || !voided)) || (step === 2 && !tila) || (step === 3 && !signed) ? 0.5 : 1, pointerEvents: (step === 1 && (!useOfFunds || !voided)) || (step === 2 && !tila) || (step === 3 && !signed) ? "none" : "auto" }}>
            {step === 0 ? "Confirm details" : step === 1 ? "Review terms" : step === 2 ? "Continue to sign" : "Submit application"}
          </Button>
        </footer>
      )}
    </div>
  );
}
Object.assign(window, { ApplyFlow, cadence, money });