// AdminPoolDetail.jsx — F5. Read-only stablecoin pool detail: lender positions,
// LP tokens, IOUs, and mint/burn events. Reached from the Stablecoin pools rows.

const PDCard = ({ title, children, action }) => (
  <section className="card" style={{ padding: 0 }}>
    {title && (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--space-16) var(--space-20)", borderBottom: "1px solid var(--border)" }}>
        <h3 style={{ margin: 0, font: '600 16px/20px "Figtree", sans-serif', color: "var(--fg)", letterSpacing: "-0.005em" }}>{title}</h3>
        {action}
      </div>
    )}
    <div style={{ padding: "var(--space-20)" }}>{children}</div>
  </section>
);

const PDTh = ({ children, align = "left" }) => (
  <span style={{ display: "inline-flex", justifyContent: align === "right" ? "flex-end" : "flex-start", font: '500 11px/16px "Inter", sans-serif', letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--fg-subtle)" }}>{children}</span>
);

const AdminPoolDetail = ({ pool, onBack, state, onRetry }) => {
  if (state === "loading") return <PageSkeleton shape="dashboard" />;
  if (state === "error") return <PageError title="Couldn't load the pool" onRetry={onRetry} />;
  if (!pool) return <PageError title="No pool selected" onRetry={onBack} />;

  const d = buildPoolDetail(pool);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-20)" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-12)" }}>
        <button className="btn btn--text btn--sm" type="button" onClick={onBack} style={{ alignSelf: "flex-start" }}>
          <Icon name="arrow" size={13} stroke={1.6} style={{ transform: "rotate(180deg)" }} /> Back to pools
        </button>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-12)" }}>
          <span className="chip chip--info" style={{ padding: "var(--space-2) var(--space-8)", fontSize: 11 }}>{pool.token}</span>
          <h1 style={{ margin: 0, font: '700 24px/30px "Figtree", sans-serif', letterSpacing: "-0.012em", color: "var(--fg)" }}>{d.name}</h1>
        </div>
        <div style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg-subtle)" }}>Linked to {d.facility}</div>
      </div>

      <HeroStrip
        hero={{ label: "Total value locked", value: fmtMoneyShort(d.tvl), sub: `${d.lenders} lender${d.lenders === 1 ? "" : "s"}` }}
        supports={[
          { label: "Total deposited", value: fmtMoneyShort(d.totalDeposited), sub: "All lender deposits" },
          { label: "Total yield paid", value: fmtMoneyShort(d.totalYield), sub: "Interest paid to lenders", tone: "success" },
          { label: "APY / utilization", value: `${d.apy.toFixed(1)}%`, sub: `${d.utilization.toFixed(1)}% utilized` },
        ]}
      />

      <PDCard title={`Lender positions (${d.lenders})`}>
        <div className="adm-scroll">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 90px 1fr 1fr 1fr 90px", gap: "var(--space-16)", padding: "0 0 var(--space-12)", borderBottom: "1px solid var(--border)" }}>
            <PDTh>Wallet</PDTh><PDTh align="right">Deposited</PDTh><PDTh align="right">Pool share</PDTh><PDTh align="right">LP tokens</PDTh><PDTh align="right">Yield earned</PDTh><PDTh align="right">Withdrawable</PDTh><PDTh align="right">IOU share</PDTh>
          </div>
          {d.positions.map((p, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 90px 1fr 1fr 1fr 90px", gap: "var(--space-16)", padding: "var(--space-12) 0", alignItems: "center", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
              <div style={{ minWidth: 0 }}>
                <div className="addr" style={{ font: '500 12px "JetBrains Mono", monospace', color: "var(--fg)" }}>{p.wallet}</div>
                <div style={{ font: '400 11px "Inter", sans-serif', color: "var(--fg-subtle)" }}>{p.name}</div>
              </div>
              <span className="tnum" style={{ textAlign: "right", font: '500 13px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(p.deposited)}</span>
              <span className="tnum" style={{ textAlign: "right", font: '400 13px "Inter", sans-serif', color: "var(--fg-muted)" }}>{p.share.toFixed(1)}%</span>
              <span className="tnum" style={{ textAlign: "right", font: '400 13px "Inter", sans-serif', color: "var(--fg-muted)" }}>{p.lpTokens.toLocaleString("en-US")}</span>
              <span className="tnum" style={{ textAlign: "right", font: '500 13px "Inter", sans-serif', color: "var(--success)" }}>{fmtMoneyShort(p.yieldEarned)}</span>
              <span className="tnum" style={{ textAlign: "right", font: '500 13px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(p.withdrawable)}</span>
              <span className="tnum" style={{ textAlign: "right", font: '400 13px "Inter", sans-serif', color: "var(--fg-muted)" }}>{p.share.toFixed(0)}%</span>
            </div>
          ))}
        </div>
      </PDCard>

      <div className="dash-cols" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-16)", alignItems: "start" }}>
        <PDCard title="IOUs" action={<span className="chip chip--gold" style={{ padding: "var(--space-2) var(--space-8)", fontSize: 11 }}>{d.iou.status}</span>}>
          <div className="addr" style={{ font: '500 13px "JetBrains Mono", monospace', color: "var(--fg)", marginBottom: "var(--space-12)" }}>{d.iou.id} · {d.facility}</div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "var(--space-8) 0", borderTop: "1px solid var(--border)" }}>
            <span style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg-subtle)" }}>Original</span>
            <span className="tnum" style={{ font: '500 13px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(d.iou.original)}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "var(--space-8) 0", borderTop: "1px solid var(--border)" }}>
            <span style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg-subtle)" }}>Repaid</span>
            <span className="tnum" style={{ font: '500 13px "Inter", sans-serif', color: "var(--success)" }}>{fmtMoneyShort(d.iou.repaid)}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", padding: "var(--space-8) 0", borderTop: "1px solid var(--border)" }}>
            <span style={{ font: '400 13px "Inter", sans-serif', color: "var(--fg-subtle)" }}>Remaining</span>
            <span className="tnum" style={{ font: '600 13px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(d.iou.remaining)}</span>
          </div>
        </PDCard>
        <PDCard title="Events">
          {d.events.map((e, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-12)", padding: "var(--space-12) 0", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
              <span style={{ display: "inline-block", padding: "var(--space-2) var(--space-8)", borderRadius: "var(--radius-pill)", background: e.type === "MINT" ? "var(--green-10)" : "var(--bg-alt)", color: e.type === "MINT" ? "var(--success)" : "var(--fg-muted)", font: '600 11px/16px "Inter", sans-serif', letterSpacing: "0.03em" }}>{e.type}</span>
              <span className="tnum" style={{ font: '500 13px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(e.amount)}</span>
              <span className="tnum" style={{ font: '400 12px "Inter", sans-serif', color: "var(--fg-subtle)" }}>{fmtDate(e.date)}</span>
            </div>
          ))}
        </PDCard>
      </div>
    </div>
  );
};

window.AdminPoolDetail = AdminPoolDetail;
