/* Dulius App UI Kit — Funding History (Deal · Updates & renewals · Documents) */

function RenewalBar({ pct }) {
  const marks = [{ at: 40, label: "Review begins" }, { at: 50, label: "Eligible" }, { at: 60, label: "Guaranteed review" }];
  return (
    <div className="drenew">
      <div className="drenew-track">
        <div className="drenew-fill" style={{ width: `${pct}%` }} />
        {marks.map((m, i) => (
          <div key={i} className={`drenew-mark ${pct >= m.at ? "hit" : ""}`} style={{ left: `${m.at}%` }}>
            <span className="drenew-tick" />
            <span className="drenew-mlabel">{m.at}%<br />{m.label}</span>
          </div>
        ))}
        <div className="drenew-now" style={{ left: `${pct}%` }}><span className="dnum">{pct}%</span></div>
      </div>
    </div>
  );
}

function PayoffModal({ deal, onClose }) {
  const isDulius = deal.type && deal.type.toLowerCase().includes("dulius");
  const [sent, setSent] = React.useState(false);
  return (
    <div className="dmodal-scrim" onClick={onClose}>
      <div className="dmodal" onClick={(e) => e.stopPropagation()}>
        {sent ? (
          <React.Fragment>
            <div className="dmodal-icon" style={{ background: "var(--green-500)", color: "#08311A" }}><Icon name="check" size={24} /></div>
            <h3 className="dmodal-t">{isDulius ? "Payoff letter ready" : "Request sent to lender"}</h3>
            <p className="dmodal-s">{isDulius
              ? <span>Your payoff letter for <strong>{deal.lender}</strong> with the exact payoff amount and ACH instructions is on its way to your email — usually within 60 seconds.</span>
              : <span>We've requested a payoff letter from <strong>{deal.lender}</strong> on your behalf. Most lenders respond within 1–2 business days; we'll email it to you and post it under Loan documents as soon as it arrives.</span>}</p>
            <Button variant="primary" style={{ width: "100%" }} onClick={onClose}>Got it</Button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div className="dmodal-icon"><Icon name="receipt" size={24} /></div>
            <h3 className="dmodal-t">Request a payoff letter</h3>
            <p className="dmodal-s">For <strong>{deal.lender}</strong> · {deal.type} · {deal.balance} balance.</p>
            <div className="dpayoff-how">
              <div className="dpayoff-step"><span className="dpayoff-num">1</span><span>{isDulius ? "We generate it instantly with your exact payoff amount." : "We contact " + deal.lender + " and request your official payoff amount."}</span></div>
              <div className="dpayoff-step"><span className="dpayoff-num">2</span><span>{isDulius ? "Delivered to your email within ~60 seconds — includes ACH payoff instructions." : "We email it to you and file it under Loan documents (typically 1–2 business days)."}</span></div>
            </div>
            <div className="dmodal-info"><Icon name={isDulius ? "zap" : "shield-check"} size={15} /> {isDulius ? "Dulius deals: payoff letters are always free and instant." : "We handle the back-and-forth with the lender for you — no fee for partner & external deals."}</div>
            <Button variant="accent" style={{ width: "100%" }} iconRight="arrow-right" onClick={() => setSent(true)}>{isDulius ? "Generate payoff letter" : "Request from " + deal.lender}</Button>
            <button className="dmodal-cancel" onClick={onClose}>Not now</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function FundingHistory() {
  const d = DULIUS;
  const [tab, setTab] = React.useState("deal");
  const [payoff, setPayoff] = React.useState(null);
  const deal = d.deal;

  return (
    <div className="dscreen">
      <div className="dgrid-3">
        <Card className="dminstat"><div className="dminstat-l">Lifetime funded</div><div className="dminstat-v dnum">$55,000</div></Card>
        <Card className="dminstat"><div className="dminstat-l">Outstanding balance</div><div className="dminstat-v dnum">$41,736</div></Card>
        <Card className="dminstat"><div className="dminstat-l">Active loans</div><div className="dminstat-v dnum">2</div></Card>
      </div>

      <div className="dtabs">
        {[["deal", "Deal"], ["updates", "Updates & renewals"], ["docs", "Loan documents"]].map(([id, label]) => (
          <button key={id} className={`dtab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {tab === "deal" && (
        <React.Fragment>
          <Card className="ddeal">
            <div className="ddeal-top">
              <div>
                <div className="ddeal-head"><span className="ddeal-name">{deal.program}</span><Badge tone="info" dot>{deal.status}</Badge></div>
                <div className="ddeal-funded">Funded {deal.fundedDate}</div>
              </div>
              <Button variant="ghost" size="sm" icon="receipt" onClick={() => setPayoff({ lender: deal.program, type: "Dulius program", balance: deal.remaining })}>Request payoff letter</Button>
            </div>
            <div className="ddeal-figs">
              {[["Original", deal.original], ["Total payback", deal.payback], ["Paid", deal.paid], ["Remaining", deal.remaining], ["Daily (Mon–Fri)", deal.daily], ["Payments left", (deal.paymentsTotal - deal.paymentsMade) + " × " + deal.daily], ["Next payment", deal.nextPayment]].map(([k, v], i) => (
                <div key={i} className="ddeal-fig"><span className="ddeal-fig-v dnum">{v}</span><span className="ddeal-fig-l">{k}</span></div>
              ))}
            </div>
            <div className="ddeal-renew">
              <div className="ddeal-renew-head"><span className="ds-overline">Your path to renewal</span><Badge tone="success" dot>{deal.paidPct}% paid in</Badge></div>
              <RenewalBar pct={deal.paidPct} />
              <div className="ddeal-renew-note"><Icon name="sparkles" size={15} /> {deal.renewalNote}</div>
            </div>
          </Card>

          <div className="dpanel-head dpadx"><h3 className="ds-h3">Renewals &amp; specials</h3><Badge tone="neutral">Just for you</Badge></div>
          <div className="dgrid-2">
            {d.dealSpecials.map((s, i) => (
              <Card key={i} className="dspecial">
                <div className="dspecial-icon"><Icon name={s.icon} size={20} /></div>
                <div className="dspecial-body">
                  <div className="dspecial-t">{s.title}</div>
                  <p className="dspecial-d">{s.body}</p>
                  <a className="dlink" role="button" onClick={(e) => e.preventDefault()}>{s.cta} →</a>
                </div>
              </Card>
            ))}
          </div>

          <Card className="dpanel" pad={false}>
            <div className="dpanel-head dpad"><h3 className="ds-h3">All deals</h3><button className="dchip ghost"><Icon name="download" size={16} /> Export</button></div>
            <div className="dtable">
              <div className="dtable-head"><span>Program</span><span>Type</span><span>Balance</span><span>Rate</span><span>Payments left</span><span>Repaid</span><span>Payoff</span></div>
              {d.facilities.map((f, i) => (
                <div key={i} className="dtable-row">
                  <span className="dt-lender"><span className="dt-logo">{f.lender.split(" ").map(w=>w[0]).slice(0,2).join("")}</span><span><span className="dt-name">{f.lender}</span><span className="dt-opened">Opened {f.opened}</span></span></span>
                  <span className="dt-type">{f.type}</span>
                  <span className="dnum dt-bal">{f.balance}</span>
                  <span className="dnum">{f.apr}</span>
                  <span className="dt-pays">{f.status === "Active"
                    ? <React.Fragment><span className="dt-pays-n dnum">{f.paysLeft} left</span><span className="dt-pays-amt dnum">{f.payAmt}/day · {f.payFreq.includes("Mon") ? "Mon–Fri" : f.payFreq}</span></React.Fragment>
                    : <span className="dt-pays-done">All {f.paysTotal} paid</span>}</span>
                  <span className="dt-prog"><ProgressBar value={f.progress} color={f.progress===100?"#1B5C2E":"#2DBD6E"} height={6} /><span className="dnum dt-progv">{f.progress}%</span></span>
                  <span className="dt-payoff">{f.status === "Active"
                    ? <button className="dpayoff-btn" onClick={() => setPayoff(f)} title={"Request payoff letter from " + f.lender}><Icon name="receipt" size={14} /> Payoff</button>
                    : <Badge tone="success" dot>Paid off</Badge>}</span>
                </div>
              ))}
            </div>
          </Card>
        </React.Fragment>
      )}

      {tab === "updates" && (
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Deal updates</h3><Badge tone="success">No missed payments</Badge></div>
          <div className="dupdates">
            {d.dealUpdates.map((u, i) => (
              <div key={i} className={`dupdate ${u.special ? "special" : ""}`}>
                <span className={`dupdate-icon t-${u.tone}`}><Icon name={u.icon} size={18} /></span>
                <div className="dupdate-txt">
                  <div className="dupdate-titlerow"><span className="dupdate-title">{u.title}</span>{u.special && <Badge tone="info">Renewal</Badge>}</div>
                  <div className="dupdate-body">{u.body}</div>
                </div>
                <span className="dupdate-date">{u.date}</span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {tab === "docs" && (
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Loan documents</h3><Badge tone="neutral">{DULIUS.user.business}</Badge></div>
          <div className="ddocs">
            {d.loanDocs.map((doc, i) => (
              <div key={i} className="ddoc">
                <span className="ddoc-icon"><Icon name={doc.icon} size={20} /></span>
                <div className="ddoc-txt"><div className="ddoc-name">{doc.name}</div><div className="ddoc-meta">{doc.type} · {doc.date}</div></div>
                <button className="dchip ghost">{doc.action ? <React.Fragment><Icon name="file-plus" size={15} /> Generate</React.Fragment> : <React.Fragment><Icon name="download" size={15} /> Download</React.Fragment>}</button>
              </div>
            ))}
          </div>
        </Card>
      )}
      {payoff && <PayoffModal deal={payoff} onClose={() => setPayoff(null)} />}
    </div>
  );
}
Object.assign(window, { FundingHistory, RenewalBar, PayoffModal });