/* Aria financing modal — the ONLY surface where Aria branding appears.
   3 steps: review → confirm → done. Centered layout only. */

const Stepper = ({ step }) => {
  const steps = [
    { i: 1, label: "Review" },
    { i: 2, label: "Confirm" },
    { i: 3, label: "Done" },
  ];
  return (
    <div className="modal-stepper">
      {steps.map((s, idx) => {
        const done   = step > s.i;
        const active = step === s.i;
        return (
          <React.Fragment key={s.i}>
            <div className={"stepper-step" + (active ? " active" : "") + (done ? " done" : "")}>
              <div className="stepper-dot">
                {done ? <i data-lucide="check"></i> : s.i}
              </div>
              <span>{s.label}</span>
            </div>
            {idx < steps.length - 1 && (
              <div className={"stepper-line" + (done ? " done" : "")} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
};

const AriaFootnote = () => (
  <div className="modal-foot-left" title="Financing powered by Aria">
    <span style={{color:"#98a2b3"}}>Financing by</span>
    <img src="aria/logo_forest.png" alt="Aria"/>
  </div>
);

/* -------- Step 1: Review -------- */
const StepReview = ({ invoices, terms }) => {
  const face  = invoices.reduce((s, r) => s + r.amount, 0);
  const advance = face * terms.advanceRate;
  const fee     = face * terms.feeRate;
  const vat     = fee * terms.vatRate;
  const payout  = advance - fee - vat;

  return (
    <div className="modal-body">
      <div className="review-section-label">
        {invoices.length === 1 ? "Invoice" : `${invoices.length} invoices`}
      </div>
      <div className="review-invoices">
        {invoices.map(r => (
          <div className="review-inv-row" key={r.id}>
            <div>
              <div className="review-inv-id">{r.id}</div>
              <div className="review-inv-buyer">{r.buyer}</div>
            </div>
            <div className="review-inv-amt">{fmtEur(r.amount)}</div>
          </div>
        ))}
      </div>
      <div className="review-section-label">Breakdown</div>
      <div className="breakdown">
        <div className="breakdown-row advance-rate">
          <span className="label">
            Advance rate
            <i data-lucide="info" className="hint"></i>
          </span>
          <span className="val">{fmtPct(terms.advanceRate)} of face value</span>
        </div>
        <div className="breakdown-row">
          <span className="label">Gross advance</span>
          <span className="val">{fmtEur(advance)}</span>
        </div>
        <div className="breakdown-row minus">
          <span className="label">Financing fee · 2.00%</span>
          <span className="val">− {fmtEur(fee)}</span>
        </div>
        <div className="breakdown-row minus">
          <span className="label">VAT on fee · exempt</span>
          <span className="val">− {fmtEur(vat)}</span>
        </div>
        <div className="breakdown-sep"></div>
        <div className="breakdown-total">
          <span className="label">Net payout</span>
          <span className="val"><span className="cur">€</span>{payout.toLocaleString("en-GB", {minimumFractionDigits:2, maximumFractionDigits:2}).replace("€","")}</span>
        </div>
      </div>
      <div className="settle-note">
        <i data-lucide="zap"></i>
        <span>Settles in <b>{terms.settleEta}</b> to your Revolut Business account.</span>
      </div>
    </div>
  );
};

/* -------- Step 2: Confirm -------- */
const StepConfirm = ({ invoices, terms, agreed, setAgreed }) => {
  const face   = invoices.reduce((s, r) => s + r.amount, 0);
  const payout = face * (1 - terms.feeRate);

  return (
    <div className="modal-body">
      <div className="review-section-label">Payout destination</div>
      <div className="bank-card">
        <div className="bank-logo">RV</div>
        <div>
          <div className="bank-name">{terms.bank.name}</div>
          <div className="bank-iban">{terms.bank.iban}</div>
        </div>
        <span className="bank-change">Change</span>
      </div>

      <div className="review-section-label">Summary</div>
      <div className="breakdown" style={{marginBottom:16}}>
        <div className="breakdown-row">
          <span className="label">{invoices.length} {invoices.length===1?"invoice":"invoices"} financed</span>
          <span className="val">{fmtEur(face)}</span>
        </div>
        <div className="breakdown-row minus">
          <span className="label">Fee (2.00%)</span>
          <span className="val">− {fmtEur(face * terms.feeRate)}</span>
        </div>
        <div className="breakdown-sep"></div>
        <div className="breakdown-total">
          <span className="label">You'll receive</span>
          <span className="val"><span className="cur">€</span>{payout.toLocaleString("en-GB", {minimumFractionDigits:2, maximumFractionDigits:2})}</span>
        </div>
      </div>

      <div className="terms">
        By confirming, you assign the above receivables to <b>Aria SAS</b>.
        Your buyers will continue paying to the same account — no action needed on
        their side. <a href="#">View financing agreement</a> · <a href="#">Fee schedule</a>
      </div>

      <label className="confirm-check">
        <input
          type="checkbox"
          className="cb"
          checked={agreed}
          onChange={e => setAgreed(e.target.checked)}
        />
        <div className="confirm-check-label">
          I confirm assignment of these receivables
          <span>The financing agreement will be countersigned electronically.</span>
        </div>
      </label>
    </div>
  );
};

/* -------- Step 3: Success -------- */
const StepSuccess = ({ invoices, terms, reference }) => {
  const autos  = invoices.filter(i => i.validation !== "buyer");
  const buyers = invoices.filter(i => i.validation === "buyer");
  const autoFace = autos.reduce((s, r) => s + r.amount, 0);
  const autoPayout = autoFace * (1 - terms.feeRate);
  const [copied, setCopied] = React.useState(false);
  const linkUrl = `pay.aria.finance/v/${reference.replace("ARIA-","").toLowerCase()}`;
  const copy = () => {
    navigator.clipboard?.writeText("https://" + linkUrl).catch(()=>{});
    setCopied(true);
    setTimeout(()=>setCopied(false), 2000);
  };

  // Mode A: every invoice auto-validates → classic "funds on the way"
  if (buyers.length === 0) {
    return (
      <div className="modal-body">
        <div className="success-hero">
          <div className="success-check"><i data-lucide="check"></i></div>
          <h3 className="success-title">You're getting paid</h3>
          <div className="success-sub">{autos.length} {autos.length===1?"invoice":"invoices"} financed — funds are on the way.</div>
        </div>
        <div className="success-amount">
          <span className="cur">€</span>{autoPayout.toLocaleString("en-GB",{minimumFractionDigits:2,maximumFractionDigits:2})}
        </div>
        <div className="success-details">
          <div>
            <div className="success-detail-label">Arriving</div>
            <div className="success-detail-val">Today, by 5:12 PM</div>
          </div>
          <div>
            <div className="success-detail-label">To account</div>
            <div className="success-detail-val">{terms.bank.name} ·{terms.bank.last4}</div>
          </div>
          <div>
            <div className="success-detail-label">Fee charged</div>
            <div className="success-detail-val">{fmtEur(autoFace * terms.feeRate)}</div>
          </div>
          <div>
            <div className="success-detail-label">Reference</div>
            <div className="success-detail-val"><span className="mono">{reference}</span></div>
          </div>
        </div>
      </div>
    );
  }

  // Mode B: every invoice needs buyer validation → link-send flow, no amount hero
  if (autos.length === 0) {
    return (
      <div className="modal-body">
        <div className="success-hero">
          <div className="success-check pending"><i data-lucide="send"></i></div>
          <h3 className="success-title">Validation {buyers.length===1?"link":"links"} ready</h3>
          <div className="success-sub">
            {buyers.length===1
              ? <>Send the link to <b>{buyers[0].buyer}</b>. Funds release within <b>~4 hours</b> of their confirmation.</>
              : <>Send each link to the buyer listed. Funds release within <b>~4 hours</b> of confirmation.</>}
          </div>
        </div>

        {buyers.length === 1 ? (
          <div className="validation-link-card">
            <div className="validation-link-row">
              <i data-lucide="link-2"></i>
              <span className="validation-link-url">{linkUrl}</span>
              <button className="btn btn-secondary validation-copy" onClick={copy}>
                {copied ? (<><i data-lucide="check"></i> Copied</>) : (<><i data-lucide="copy"></i> Copy</>)}
              </button>
            </div>
            <div className="validation-link-actions">
              <button className="btn btn-primary"><i data-lucide="mail"></i> Email to {buyers[0].buyer}</button>
              <button className="btn btn-secondary"><i data-lucide="share-2"></i> Share</button>
            </div>
          </div>
        ) : (
          <div className="validation-list">
            {buyers.map(r => (
              <div className="validation-list-row" key={r.id}>
                <div>
                  <div className="validation-list-buyer">{r.buyer}</div>
                  <div className="validation-list-inv">{r.id} · {fmtEur(r.amount)}</div>
                </div>
                <div className="validation-list-actions">
                  <button className="btn-ghost-sm"><i data-lucide="copy"></i></button>
                  <button className="btn btn-secondary"><i data-lucide="mail"></i> Send</button>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="success-details">
          <div>
            <div className="success-detail-label">On confirmation</div>
            <div className="success-detail-val">~4 hours to fund</div>
          </div>
          <div>
            <div className="success-detail-label">Advance (after fee)</div>
            <div className="success-detail-val">{fmtEur(buyers.reduce((s,r)=>s+r.amount,0) * (1-terms.feeRate))}</div>
          </div>
          <div>
            <div className="success-detail-label">Reminder</div>
            <div className="success-detail-val">Auto, every 48h</div>
          </div>
          <div>
            <div className="success-detail-label">Reference</div>
            <div className="success-detail-val"><span className="mono">{reference}</span></div>
          </div>
        </div>
      </div>
    );
  }

  // Mode C: mixed → part funding now, part awaiting validation
  return (
    <div className="modal-body">
      <div className="success-hero">
        <div className="success-check"><i data-lucide="check"></i></div>
        <h3 className="success-title">{autos.length} financed · {buyers.length} pending</h3>
        <div className="success-sub">
          {fmtEur(autoPayout)} is on the way now. {buyers.length} {buyers.length===1?"invoice needs":"invoices need"} buyer confirmation before funding.
        </div>
      </div>
      <div className="validation-list" style={{marginTop:0}}>
        {buyers.map(r => (
          <div className="validation-list-row" key={r.id}>
            <div>
              <div className="validation-list-buyer">{r.buyer}</div>
              <div className="validation-list-inv">{r.id} · {fmtEur(r.amount)} · awaiting validation</div>
            </div>
            <div className="validation-list-actions">
              <button className="btn-ghost-sm"><i data-lucide="copy"></i></button>
              <button className="btn btn-secondary"><i data-lucide="mail"></i> Send link</button>
            </div>
          </div>
        ))}
      </div>
      <div className="success-details">
        <div>
          <div className="success-detail-label">Funding now</div>
          <div className="success-detail-val">{fmtEur(autoPayout)}</div>
        </div>
        <div>
          <div className="success-detail-label">Awaiting buyer</div>
          <div className="success-detail-val">{fmtEur(buyers.reduce((s,r)=>s+r.amount,0))}</div>
        </div>
        <div>
          <div className="success-detail-label">To account</div>
          <div className="success-detail-val">{terms.bank.name} ·{terms.bank.last4}</div>
        </div>
        <div>
          <div className="success-detail-label">Reference</div>
          <div className="success-detail-val"><span className="mono">{reference}</span></div>
        </div>
      </div>
    </div>
  );
};

/* -------- Main modal -------- */
const FinanceModal = ({ invoices, onClose, onFunded }) => {
  const [step, setStep]       = React.useState(1);
  const [agreed, setAgreed]   = React.useState(false);
  const [submitting, setSub]  = React.useState(false);

  // Snapshot the invoice list on mount so status flips in the parent
  // don't reshape what the modal is showing.
  const snapshot = React.useRef(invoices);
  const list = snapshot.current;

  const reference = React.useMemo(() =>
    "ARIA-" + Math.floor(100000 + Math.random() * 900000), []);

  React.useEffect(() => {
    if (window.lucide) lucide.createIcons();
  }, [step]);

  if (!list || list.length === 0) return null;

  const handleNext = () => {
    if (step === 1) setStep(2);
    else if (step === 2) {
      setSub(true);
      setTimeout(() => {
        setSub(false);
        setStep(3);
        onFunded && onFunded(list, reference);
      }, 1100);
    }
  };

  const handleClose = () => onClose && onClose();

  const titles = {
    1: { t: "Get paid now", s: "Advance these receivables instantly." },
    2: { t: "Confirm financing", s: "Review and approve the transfer." },
    3: { t: "Done", s: null },
  };

  return (
    <div className="scrim" onClick={handleClose}>
      <div className="modal" key={step + "-" + (submitting ? "s" : "i")} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <h2 className="modal-head-title">{titles[step].t}</h2>
            {titles[step].s && <div className="modal-head-sub">{titles[step].s}</div>}
          </div>
          <button className="modal-close" onClick={handleClose}><i data-lucide="x"></i></button>
        </div>
        {step < 3 && <Stepper step={step} />}
        <div key={step} style={{display:"contents"}}>
          {step === 1 && <StepReview   invoices={list} terms={ARIA_TERMS} />}
          {step === 2 && <StepConfirm  invoices={list} terms={ARIA_TERMS} agreed={agreed} setAgreed={setAgreed} />}
          {step === 3 && <StepSuccess  invoices={list} terms={ARIA_TERMS} reference={reference} />}
        </div>
        <div className="modal-foot">
          <AriaFootnote />
          <div className="modal-foot-right" key={"foot-"+step}>
            {step === 1 && (<>
              <button className="btn btn-secondary" onClick={handleClose}>Cancel</button>
              <button className="btn btn-primary"   onClick={handleNext}>
                Continue <i data-lucide="arrow-right"></i>
              </button>
            </>)}
            {step === 2 && (<>
              <button className="btn btn-secondary" onClick={() => setStep(1)} disabled={submitting}>Back</button>
              <button
                className="btn btn-primary"
                disabled={!agreed || submitting}
                onClick={handleNext}>
                {submitting
                  ? (<><i data-lucide="loader-circle" style={{animation:"spin 1s linear infinite"}}></i> Processing…</>)
                  : (<>Confirm & get paid <i data-lucide="arrow-right"></i></>)}
              </button>
            </>)}
            {step === 3 && (<>
              <button className="btn btn-secondary"><i data-lucide="download"></i> Receipt</button>
              <button className="btn btn-primary" onClick={handleClose}>Done</button>
            </>)}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { FinanceModal });