/* Dulius App UI Kit — Approved for Funding */

function ApprovalCard({ a, onContinue }) {
  const doneCount = a.steps.filter((s) => s.done).length;
  const pct = Math.round((doneCount / a.steps.length) * 100);
  const nextStep = a.steps.find((s) => !s.done);
  const amt = parseInt(String(a.amount).replace(/[^0-9]/g, ""), 10) || 0;
  const fac = parseFloat(a.factor) || 1;
  const days = parseInt(String(a.term), 10) || 0;
  const pay = window.cadence ? window.cadence(amt * fac, days) : null;
  return (
    <Card className="dappr">
      <div className="dappr-top">
        <div className="dappr-id">
          <div className="dappr-logo">{a.initials}</div>
          <div>
            <div className="dappr-namerow"><span className="dappr-name">{a.lender}</span>{a.dulius ? <Badge tone="success" dot>Dulius</Badge> : <Badge tone="neutral">Partner</Badge>}</div>
            <div className="dappr-type">{a.type} · approved {a.approved}</div>
          </div>
        </div>
        <Badge tone={a.status === "Ready to fund" ? "success" : "warning"} dot>{a.status}</Badge>
      </div>

      <div className="dappr-figs">
        <div className="dappr-fig"><span className="dappr-fig-v dnum">{a.amount}</span><span className="dappr-fig-l">Approved</span></div>
        <div className="dappr-fig"><span className="dappr-fig-v dnum">{a.net}</span><span className="dappr-fig-l">Net funding</span></div>
        <div className="dappr-fig"><span className="dappr-fig-v dnum">{a.factor}</span><span className="dappr-fig-l">Factor</span></div>
        <div className="dappr-fig"><span className="dappr-fig-v dnum">{a.term}</span><span className="dappr-fig-l">Term</span></div>
      </div>

      {pay && <div className="dappr-payline"><Icon name="calendar-clock" size={15} /> Repays {pay.freq === "Weekly" ? "weekly" : "daily, Mon–Fri"} · <strong className="dnum">{window.money(pay.per)}/{pay.freq === "Weekly" ? "wk" : "day"}</strong> via ACH</div>}

      <div className="dappr-steps">
        <div className="dappr-steps-head"><span className="dappr-steps-label">Funding checklist</span><span className="dappr-steps-pct dnum">{pct}%</span></div>
        <ProgressBar value={pct} color="var(--green-500)" height={7} />
        <div className="dappr-steplist">
          {a.steps.map((s, i) => (
            <div key={i} className={`dappr-step ${s.done ? "done" : ""} ${s === nextStep ? "next" : ""}`}>
              <span className="dappr-stepdot">{s.done ? <Icon name="check" size={13} /> : ""}</span>
              <span className="dappr-steplabel">{s.label}</span>
              {s === nextStep && <span className="dappr-stepnext">Next</span>}
            </div>
          ))}
        </div>
      </div>

      <div className="dappr-cta">
        <span className="dappr-ctatxt">{a.dulius ? "Finish your steps, then a quick review & funding call." : "Complete the steps; the funder does a final review & call."}</span>
        <Button variant="accent" iconRight="arrow-right" onClick={() => onContinue(a)}>Continue funding</Button>
      </div>
    </Card>
  );
}

function FinishFundingModal({ a, onClose }) {
  const [done, setDone] = React.useState(false);
  const [sub, setSub] = React.useState(null); // "bank" | "call"
  const [bankDone, setBankDone] = React.useState(false);
  const [slot, setSlot] = React.useState(null);
  const CALL_SLOTS = ["Today · 2:00 PM", "Today · 4:30 PM", "Tomorrow · 10:00 AM", "Tomorrow · 1:00 PM", "Thu · 11:30 AM", "Thu · 3:00 PM"];
  return (
    <div className="dmodal-scrim" onClick={onClose}>
      <div className="dmodal wide" onClick={(e) => e.stopPropagation()}>
        {sub === "bank" ? (
          <React.Fragment>
            <button className="dpayback" onClick={() => setSub(null)}><Icon name="arrow-left" size={15} /> Back</button>
            <h3 className="dmodal-t left">Verify your business bank</h3>
            <p className="dmodal-s left">Confirm your account so {a.dulius ? "Dulius" : a.lender} can set up ACH for funding &amp; repayment.</p>
            {!bankDone ? (
              <React.Fragment>
                <button className="dbankopt" onClick={() => setBankDone(true)}>
                  <span className="dbankopt-ic"><Icon name="landmark" size={20} /></span>
                  <span className="dbankopt-txt"><span className="dbankopt-t">Connect instantly with Plaid</span><span className="dbankopt-s">12,000+ banks · ~30 seconds · read-only</span></span>
                  <Icon name="arrow-right" size={18} />
                </button>
                <div className="dmodal-or"><span>or</span></div>
                <button className="dbankopt" onClick={() => setBankDone(true)}>
                  <span className="dbankopt-ic"><Icon name="shield-check" size={20} /></span>
                  <span className="dbankopt-txt"><span className="dbankopt-t">Verify with bank login</span><span className="dbankopt-s">Instant decision-logic verification</span></span>
                  <Icon name="arrow-right" size={18} />
                </button>
                <div className="dmodal-info"><Icon name="lock" size={15} /> Bank-grade encryption. Read-only — we can never move your money. Your statements are already on file from your application.</div>
              </React.Fragment>
            ) : (
              <div style={{ textAlign: "center", padding: "10px 0" }}>
                <div className="dmodal-icon" style={{ background: "var(--green-500)", color: "#08311A" }}><Icon name="check" size={24} /></div>
                <h3 className="dmodal-t">Bank verified</h3>
                <p className="dmodal-s">Your account is connected and ready for ACH. Back to your funding checklist.</p>
                <Button variant="primary" style={{ width: "100%" }} onClick={() => setSub(null)}>Continue</Button>
              </div>
            )}
          </React.Fragment>
        ) : sub === "call" ? (
          <React.Fragment>
            <button className="dpayback" onClick={() => setSub(null)}><Icon name="arrow-left" size={15} /> Back</button>
            <h3 className="dmodal-t left">Book your funding call</h3>
            <p className="dmodal-s left">Pick a time for a quick call to confirm your terms before {a.net} is released.</p>
            <div className="dslots">
              {CALL_SLOTS.map((s) => (
                <button key={s} className={`dslot ${slot === s ? "on" : ""}`} onClick={() => setSlot(s)}>{slot === s && <Icon name="check" size={13} />}{s}</button>
              ))}
            </div>
            <Button variant="accent" style={{ width: "100%", opacity: slot ? 1 : .5, pointerEvents: slot ? "auto" : "none" }} icon="phone-call" onClick={() => setSub(null)}>{slot ? "Confirm " + slot : "Pick a time"}</Button>
          </React.Fragment>
        ) : done ? (
          <div style={{ textAlign: "center" }}>
            <div className="dmodal-icon" style={{ background: "var(--green-500)", color: "#08311A" }}><Icon name="circle-check-big" size={26} /></div>
            <h3 className="dmodal-t">You're all set — final review started</h3>
            <p className="dmodal-s">Your steps are done. {a.dulius ? "Dulius" : a.lender} will do a final review and {slot ? <span>call you <strong>{slot.toLowerCase()}</strong></span> : "call you"} to confirm terms before releasing your {a.net}. Funds typically land 1–2 business days after the funding call.</p>
            <div className="dfinish-next">
              <div className="dfinish-next-step"><span className="dfinish-next-ic"><Icon name="search-check" size={15} /></span><span>Final review — within 24 hours</span></div>
              <div className="dfinish-next-step"><span className="dfinish-next-ic"><Icon name="phone-call" size={15} /></span><span>Funding call{slot ? " · " + slot : " to confirm terms"}</span></div>
              <div className="dfinish-next-step"><span className="dfinish-next-ic"><Icon name="banknote" size={15} /></span><span>Funds released to your account</span></div>
            </div>
            <Button variant="primary" style={{ width: "100%" }} onClick={onClose}>Go to my deal</Button>
          </div>
        ) : (
          <React.Fragment>
            <h3 className="dmodal-t left">Finish funding — {a.lender}</h3>
            <p className="dmodal-s">Complete these steps, then {a.dulius ? "we'll" : a.lender + " will"} do a final review and a quick funding call before releasing your {a.net}.</p>
            <div className="dfinish-steps">
              {a.steps.map((s, i) => {
                const isBank = s.label.includes("Verify your bank");
                const isCall = s.label.includes("call");
                const stepDone = s.done || (isBank && bankDone) || (isCall && slot);
                const action = isBank ? (bankDone ? "" : "Connect") : s.label.includes("Upload") || s.label.includes("document") ? "Upload" : s.label.includes("review") ? "Pending us" : isCall ? (slot ? "" : "Book call") : s.label.includes("released") ? "" : "Do it";
                const onClick = isBank ? () => setSub("bank") : isCall ? () => setSub("call") : undefined;
                return (
                  <div key={i} className={`dfinish-step ${stepDone ? "done" : ""}`}>
                    <span className="dfinish-dot">{stepDone ? <Icon name="check" size={13} /> : i + 1}</span>
                    <span className="dfinish-label">{s.label}{isCall && slot && <span className="dfinish-slot"> · {slot}</span>}</span>
                    {!stepDone && action && <button className="dchip ghost" onClick={onClick}>{action}</button>}
                  </div>
                );
              })}
            </div>
            <div className="dmodal-info"><Icon name="info" size={15} /> No instant online checkout — funding finishes with a quick review and a call to confirm your terms.{!a.dulius && " " + a.lender + " is a direct partner funder; you never pay a broker fee."}</div>
            <Button variant="accent" style={{ width: "100%" }} iconRight="arrow-right" onClick={() => setDone(true)}>Submit &amp; start final review</Button>
            <button className="dmodal-cancel" onClick={onClose}>I'll finish later</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function Approved() {
  const list = DULIUS.approvals;
  const [active, setActive] = React.useState(null);
  return (
    <div className="dscreen">
      <Card className="dappr-banner" pad={false}>
        <div className="dappr-banner-in">
          <div className="dappr-banner-icon"><Icon name="circle-check-big" size={24} /></div>
          <div>
            <div className="dappr-banner-t">{list.length} approvals ready</div>
            <div className="dappr-banner-s">You've been approved for funding. Finish the final steps with us or our partners to get your money.</div>
          </div>
          <div className="dappr-banner-total"><span className="dnum">$50,000</span><span>total approved</span></div>
        </div>
      </Card>

      {list.map((a, i) => <ApprovalCard key={i} a={a} onContinue={setActive} />)}

      {active && <FinishFundingModal a={active} onClose={() => setActive(null)} />}
    </div>
  );
}
Object.assign(window, { Approved, ApprovalCard, FinishFundingModal });