// DeployOptions — fixes the post-borrow "orphaning" Dennis flagged: after a
// borrow (and before deciding to borrow), the borrower needs a calm, legible
// menu of what they can actually do with the funds. Surfaced in two places
// from one component so the views stay identical:
//   · variant="section" — a persistent .card on the facility detail page,
//     visible before the borrow decision.
//   · variant="modal"   — a compact list inside ActionModal's post-confirm
//     step, the moment right after a borrow submits.
//
// Brand: this is NOT a yield storefront. No APY hype, no gamified cards, no
// colored-circle icons, no gold decoration. Mechanism voice, hairline rows,
// blue for action only. (See DESIGN.md anti-references + AI-slop rules.)
//
// Contents are real borrow motives only — deliberately no "supply borrowed
// USDC for yield" (negative carry). Resolved with Renée 2026-06-02.

const DeployOptions = ({
  settlementToken = "USDC",
  collateralTokens = [],
  eligibleFacilities,
  onAcquire,
  onBrowseFacilities,
  onWithdraw,
  variant = "section",
  state = "live",
  onRetry,
}) => {
  const isModal = variant === "modal";

  const acquireWhat = collateralTokens.slice(0, 2).map(t => t.ticker || t).join(" or ");
  const rows = [
    {
      icon: "coins",
      title: "Acquire more collateral",
      desc: acquireWhat
        ? `Buy more ${acquireWhat} and redeposit to increase borrowing power.`
        : "Buy more accepted collateral and redeposit to increase borrowing power.",
      actionLabel: "Acquire",
      onClick: onAcquire,
    },
    {
      icon: "facility",
      title: "Fund another facility",
      desc: "Open or top up a margin account in another facility."
        + (eligibleFacilities ? ` ${eligibleFacilities} eligible.` : ""),
      actionLabel: "Browse facilities",
      onClick: onBrowseFacilities,
    },
    {
      icon: "withdraw",
      title: "Withdraw to your wallet",
      desc: "Move settled funds out to use off-platform.",
      actionLabel: "Withdraw",
      onClick: onWithdraw,
    },
  ];

  // ----- Row -------------------------------------------------------------
  const Row = ({ row, first }) => (
    <div className="deploy-row" style={{
      display: "grid",
      gridTemplateColumns: "36px 1fr auto",
      alignItems: "center",
      gap: 16,
      padding: isModal ? "14px 0" : "16px 0",
      borderTop: first ? "none" : "1px solid var(--border)",
    }}>
      <span style={{
        width: 36, height: 36, borderRadius: 8,
        background: "var(--bg-alt)", color: "var(--fg-muted)",
        display: "grid", placeItems: "center",
      }} aria-hidden="true">
        <Icon name={row.icon} size={16} stroke={1.5} />
      </span>
      <div style={{ minWidth: 0 }}>
        <div style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>
          {row.title}
        </div>
        <div className="deploy-row-desc" style={{
          font: '400 12px/18px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 2,
        }}>
          {row.desc}
        </div>
      </div>
      <button className="btn btn--secondary btn--sm deploy-row-action" type="button"
              onClick={row.onClick}>
        {row.actionLabel}
        <Icon name="arrow" size={12} stroke={1.6} />
      </button>
    </div>
  );

  const RowList = () => (
    <div>
      {rows.map((row, i) => <Row key={row.title} row={row} first={i === 0} />)}
    </div>
  );

  // ----- Modal variant ---------------------------------------------------
  // Compact: no card chrome (the modal already provides it), just an eyebrow
  // and the rows. States are minimal here since this follows a committed action.
  if (isModal) {
    return (
      <div data-annot-note="post-borrow next step">
        <Eyebrow>Using borrowed funds</Eyebrow>
        <div style={{ marginTop: 4 }}>
          {state === "loading"
            ? [0, 1, 2].map(i => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
                  <Skel w={36} h={36} r={8} />
                  <div style={{ flex: 1 }}><Skel w={160} h={14} /><div style={{ height: 6 }} /><Skel w={220} h={12} /></div>
                  <Skel w={96} h={28} r={8} />
                </div>
              ))
            : <RowList />}
        </div>
      </div>
    );
  }

  // ----- Section variant -------------------------------------------------
  const Frame = ({ children }) => (
    <section className="card" style={{ padding: 28 }} aria-labelledby="deploy-heading"
             data-annot-note="post-borrow orphaning fix · pre-borrow motivation">
      <div style={{ marginBottom: 14 }}>
        <Eyebrow>Using borrowed funds</Eyebrow>
        <h2 id="deploy-heading" className="section-heading" style={{ marginTop: 6 }}>
          What this capital can do
        </h2>
      </div>
      {children}
    </section>
  );

  if (state === "loading") {
    return (
      <Frame>
        {[0, 1, 2].map(i => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 0", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
            <Skel w={36} h={36} r={8} />
            <div style={{ flex: 1 }}><Skel w={180} h={16} /><div style={{ height: 6 }} /><Skel w={"70%"} h={12} /></div>
            <Skel w={120} h={28} r={8} />
          </div>
        ))}
      </Frame>
    );
  }

  if (state === "error") {
    return (
      <section className="card" style={{ padding: 0 }} data-annot-note="C-3 error state">
        <ErrorState
          title="Couldn't load fund options"
          body="The destinations for this facility didn't load. Your positions are unchanged — this is a read-side issue."
          onRetry={onRetry}
        />
      </section>
    );
  }

  if (state === "empty") {
    return (
      <section className="card" style={{ padding: 0 }} data-annot-note="C-3 empty state">
        <EmptyState
          icon="wallet"
          title="No destinations available yet"
          body="Once you're eligible for more facilities, the ways to put borrowed funds to work will appear here."
          action={{ label: "Browse facilities", onClick: onBrowseFacilities, icon: "facility" }}
        />
      </section>
    );
  }

  return (
    <Frame>
      <div style={{
        font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)",
        marginBottom: 6,
      }}>
        Funds borrowed here settle to your wallet in {settlementToken}. From there:
      </div>
      <RowList />
    </Frame>
  );
};

Object.assign(window, { DeployOptions });