// DeployCapital.jsx — Deploy Capital screen (F1).
//
// Replaces the thin 3-action DeployOptions with a full-page view that shows
// the six named DeFi protocols plus the borrower's margin accounts with
// per-account borrow entry. Reached via onAction("borrow") when the wallet
// is already on the Deploy Capital screen route (#/borrow).
//
// Design treatment (Renée 2026-06-03): Ascend restrained voice.
// Mechanism descriptions, APY as a muted secondary field — not a badge hook.
// Hairline rows, no share chrome, no gamified cards.

// ── Opportunity row ──────────────────────────────────────────────────────────
const OpportunityRow = ({ op, first }) => (
  <div style={{
    display: "grid",
    gridTemplateColumns: "1fr auto",
    alignItems: "start",
    gap: "var(--space-16)",
    padding: "var(--space-20) 0",
    borderTop: first ? "none" : "1px solid var(--border)",
  }}>
    <div style={{ minWidth: 0 }}>
      <div style={{
        display: "flex", alignItems: "center", gap: "var(--space-12)", flexWrap: "wrap",
        marginBottom: "var(--space-8)",
      }}>
        <span style={{
          font: '600 14px/20px "Inter", sans-serif', color: "var(--fg)",
        }}>{op.name}</span>
        <span style={{
          font: '400 11px/14px "Inter", sans-serif',
          color: "var(--fg-subtle)",
          background: "var(--bg-alt)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius-sm)",
          padding: "1px var(--space-8)",
        }}>{op.category}</span>
      </div>
      <div style={{
        font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)",
        marginBottom: "var(--space-8)",
      }}>{op.strategy}</div>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-12)", flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-8)" }}>
          <span style={{
            font: '400 11px/14px "Inter", sans-serif',
            color: "var(--fg-faint)",
            letterSpacing: "0.04em", textTransform: "uppercase",
          }}>Settles</span>
          <div style={{ display: "flex", gap: "var(--space-4)" }}>
            {op.settlement.map((t) => (
              <span key={t} className="chip chip--neutral" style={{ padding: "1px var(--space-8)", fontSize: 11 }}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)" }}>
          <span style={{
            font: '400 11px/14px "Inter", sans-serif',
            color: "var(--fg-faint)",
            letterSpacing: "0.04em", textTransform: "uppercase",
          }}>APY</span>
          <span style={{
            font: '500 12px/16px "JetBrains Mono", monospace',
            color: "var(--fg-muted)",
          }}>{op.apy}</span>
        </div>
      </div>
    </div>
    <button className="btn btn--secondary btn--sm" type="button" style={{ flexShrink: 0, marginTop: "var(--space-2)" }}>
      Learn more
    </button>
  </div>
);

// ── Margin account card ──────────────────────────────────────────────────────
const DeployAccountCard = ({ account, onBorrow }) => {
  const statusColors = {
    healthy: "var(--success)",
    "at-risk": "var(--gold-70)",
    default: "var(--danger)",
  };
  const hfColor = parseFloat(account.hf) < 1.0 ? "var(--danger)"
    : parseFloat(account.hf) < 1.5 ? "var(--gold-70)"
    : "var(--success)";
  const isLiquidated = account.status === "default";

  return (
    <div className="card" style={{ padding: "var(--space-20) var(--space-20)" }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        marginBottom: "var(--space-16)",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-8)", marginBottom: "var(--space-4)" }}>
            <span style={{ font: '600 13px/18px "JetBrains Mono", monospace', color: "var(--fg)" }}>{account.id}</span>
            <span style={{
              width: 7, height: 7, borderRadius: "50%",
              background: statusColors[account.status] || "var(--fg-subtle)",
              flexShrink: 0,
            }} />
            <span style={{
              font: '400 11px/14px "Inter", sans-serif',
              color: statusColors[account.status] || "var(--fg-subtle)",
            }}>{account.statusLabel}</span>
          </div>
          <div style={{
            font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)",
          }}>{account.facility}</div>
        </div>
        <button
          className="btn btn--primary btn--sm"
          type="button"
          disabled={isLiquidated}
          onClick={() => !isLiquidated && onBorrow && onBorrow(account)}
        >
          Borrow
        </button>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-8)",
      }}>
        {[
          { label: "Collateral",  value: account.collateral },
          { label: "Borrowed",   value: account.borrowed,  color: "var(--fg-muted)" },
          { label: "Health",     value: account.hf,        color: hfColor, mono: true },
          { label: "Available",  value: account.available, color: "var(--success)" },
        ].map(({ label, value, color, mono }) => (
          <div key={label}>
            <div style={{
              font: '400 10px/14px "Inter", sans-serif',
              letterSpacing: "0.06em", textTransform: "uppercase",
              color: "var(--fg-faint)", marginBottom: "var(--space-2)",
            }}>{label}</div>
            <div className="tnum" style={{
              font: mono
                ? '600 13px/18px "JetBrains Mono", monospace'
                : '500 13px/18px "Inter", sans-serif',
              color: color || "var(--fg)",
            }}>{value}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── Page ────────────────────────────────────────────────────────────────────
const DeployCapital = ({ accounts, opportunities, onBorrow, onBack }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-36)" }}>
    {/* Header */}
    <div>
      <Eyebrow>Borrow</Eyebrow>
      <h1 style={{
        margin: "var(--space-8) 0 var(--space-8)",
        font: '700 32px/36px "Figtree", sans-serif',
        letterSpacing: "-0.015em", color: "var(--fg)",
      }}>Deploy capital</h1>
      <div style={{
        font: '400 14px/22px "Inter", sans-serif', color: "var(--fg-subtle)", maxWidth: 600,
      }}>
        Draw down against the collateral in your margin accounts. Borrowed funds settle in the facility's stablecoin; from there they can be deployed on-chain.
      </div>
    </div>

    {/* Opportunities */}
    <section className="card" style={{ padding: "var(--space-24) var(--space-24)" }}
             aria-labelledby="deploy-opps-heading"
             data-annot-note="F1 Deploy Capital — OZ protocol list">
      <div style={{ marginBottom: "var(--space-4)" }}>
        <Eyebrow>On-chain venues</Eyebrow>
        <h2 id="deploy-opps-heading" className="section-heading" style={{ marginTop: "var(--space-8)" }}>
          Where this capital can work
        </h2>
        <div style={{
          font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: "var(--space-4)",
        }}>
          Mechanism-level descriptions. APY ranges are indicative; actual returns vary with utilisation and market conditions.
        </div>
      </div>
      <div style={{ marginTop: "var(--space-20)" }}>
        {opportunities.map((op, i) => (
          <OpportunityRow key={op.id} op={op} first={i === 0} />
        ))}
      </div>
    </section>

    {/* Margin accounts */}
    <section aria-labelledby="deploy-accounts-heading">
      <div style={{ marginBottom: "var(--space-16)" }}>
        <Eyebrow>Your accounts</Eyebrow>
        <h2 id="deploy-accounts-heading" className="section-heading" style={{ marginTop: "var(--space-8)" }}>
          Borrow from a margin account
        </h2>
        <div style={{
          font: '400 13px/20px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: "var(--space-4)",
        }}>
          Each account isolates collateral and borrow positions within its facility. Select an account to enter a borrow amount.
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-12)" }}>
        {accounts.map((acc) => (
          <DeployAccountCard key={acc.id} account={acc} onBorrow={onBorrow} />
        ))}
      </div>
    </section>
  </div>
);

Object.assign(window, { DeployCapital });