// AdminCreditFacilities.jsx — deployed facilities, grid + list views.
// C-4 hero strip; C-5 sentence case; C-6 warn/default counts carry labels.

const FacilityActions = ({ facility, onAction }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  const items = facility.status === "paused"
    ? [{ key: "unpause-facility", label: "Unpause facility", icon: "play" }]
    : facility.status === "shutdown"
      ? [{ key: "view", label: "View only — shut down", icon: "eye", disabled: true }]
      : [{ key: "pause-facility", label: "Pause facility", icon: "pause" }];
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button className="btn btn--secondary btn--sm" type="button" onClick={(e) => { e.stopPropagation(); setOpen(!open); }}>
        Actions <Icon name="chevDown" size={12} stroke={1.6}/>
      </button>
      {open && (
        <div style={{
          position: "absolute", right: 0, top: "calc(100% + 4px)", zIndex: 20,
          background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8,
          boxShadow: "var(--shadow-1)", minWidth: 180, padding: 4,
        }}>
          {items.map((it) => (
            <button key={it.key} type="button" disabled={it.disabled}
              onClick={() => { setOpen(false); if (!it.disabled) onAction(it.key, facility); }}
              style={{
                all: "unset", cursor: it.disabled ? "default" : "pointer", display: "flex", alignItems: "center", gap: 8,
                padding: "8px 10px", borderRadius: 6, width: "100%", boxSizing: "border-box",
                font: '500 13px/18px "Inter", sans-serif',
                color: it.disabled ? "var(--fg-faint)" : "var(--fg)",
              }}
              onMouseEnter={(e) => { if (!it.disabled) e.currentTarget.style.background = "var(--bg-alt)"; }}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
              <Icon name={it.icon} size={13} stroke={1.6}/> {it.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

const FacilityCard = ({ f, onAction }) => (
  <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", gap: 16 }}>
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ font: '600 16px/22px "Figtree", sans-serif', color: "var(--fg)", letterSpacing: "-0.005em" }}>{f.name}</div>
        <div style={{ font: '400 12px/16px "Inter", sans-serif', color: "var(--fg-subtle)", marginTop: 2 }}>{f.tranche} · Settles {f.token}</div>
      </div>
      <AdminStatus status={f.status} />
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
      <div><div className="stat-label" style={{ fontSize: 11 }}>TVL</div><div className="tnum" style={{ font: '600 18px/24px "Inter", sans-serif', color: "var(--fg)", marginTop: 2 }}>{fmtMoneyShort(f.tvl)}</div></div>
      <div><div className="stat-label" style={{ fontSize: 11 }}>Utilization</div><div className="tnum" style={{ font: '600 18px/24px "Inter", sans-serif', color: "var(--fg)", marginTop: 2 }}>{f.utilization.toFixed(1)}%</div></div>
      <div><div className="stat-label" style={{ fontSize: 11 }}>Active accounts</div><div className="tnum" style={{ font: '600 18px/24px "Inter", sans-serif', color: "var(--fg)", marginTop: 2 }}>{f.accounts}</div></div>
      <div><div className="stat-label" style={{ fontSize: 11 }}>Interest rate</div><div className="tnum" style={{ font: '600 18px/24px "Inter", sans-serif', color: "var(--accent)", marginTop: 2 }}>{f.rate.toFixed(1)}%</div></div>
    </div>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
      <div style={{ display: "flex", gap: 6 }}>
        {f.warn > 0 && <span className="chip chip--gold" style={{ padding: "2px 8px" }}><span className="tnum">{f.warn}</span> at-risk</span>}
        {f.default > 0 && <span className="chip" style={{ padding: "2px 8px", background: "var(--red-10)", color: "var(--red-80)" }}><span className="tnum">{f.default}</span> in default</span>}
        {f.warn === 0 && f.default === 0 && <span className="chip chip--neutral" style={{ padding: "2px 8px" }}>No at-risk accounts</span>}
      </div>
      <FacilityActions facility={f} onAction={onAction} />
    </div>
    {f.lastActor && (
      <div style={{ paddingTop: 10, borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 6 }}>
        <Icon name="docs" size={11} stroke={1.6} style={{ color: "var(--fg-faint)", flexShrink: 0 }} />
        <span style={{ font: '400 11px/14px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
          {f.lastAction} by <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{f.lastActor}</span>
          {" · "}<span title={fmtDateTime(f.lastAt)}>{fmtRelative(f.lastAt)}</span>
        </span>
      </div>
    )}
  </div>
);

const AdminCreditFacilities = ({ facilities, onAction, state, onRetry }) => {
  const [filter, setFilter] = React.useState("all");
  const [view, setView] = React.useState("grid");
  const [q, setQ] = React.useState("");
  if (state === "loading") return <PageSkeleton shape="list" />;
  if (state === "error")   return <PageError title="Couldn't load facilities" onRetry={onRetry} />;

  const totalTvl = facilities.reduce((s, f) => s + f.tvl, 0);
  const avgUtil = (facilities.reduce((s, f) => s + f.utilization, 0) / facilities.length).toFixed(1);
  const totalAccounts = facilities.reduce((s, f) => s + f.accounts, 0);
  const warn = facilities.reduce((s, f) => s + f.warn, 0);
  const def = facilities.reduce((s, f) => s + f.default, 0);

  const filtered = facilities.filter(f =>
    (filter === "all" || f.status === filter) &&
    (q === "" || f.name.toLowerCase().includes(q.toLowerCase()))
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
      <PageHeader eyebrow="Credit facilities" title="Credit facilities" icon="facility"
        lede="Overview of deployed credit facilities and their operational status."
        annot="C-5 sentence case"
        action={<button className="btn btn--primary" type="button" onClick={() => onAction("deploy")}><Icon name="deploy" size={14} stroke={1.6}/>Deploy facility</button>} />

      <HeroStrip
        hero={{ label: "Total value locked", value: fmtMoneyShort(totalTvl), sub: `Across ${facilities.length} facilities · ${facilities.filter(f=>f.status==="active").length} active` }}
        supports={[
          { label: "Avg utilization", value: `${avgUtil}%`, sub: "Pool deployment rate" },
          { label: "Margin accounts", value: totalAccounts, sub: "Across all facilities" },
          { label: "Needs attention", value: warn + def, sub: `${warn} at-risk · ${def} in default`, tone: def > 0 ? "danger" : "warning" },
        ]}
      />

      <div>
        <SectionHeader eyebrow="Facilities" title="All facilities" count={filtered.length}
          annot="C-6 labeled risk counts"
          action={
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <SearchBox placeholder="Search facilities…" value={q} onChange={setQ} width={240} />
              <div style={{ display: "inline-flex", border: "1px solid var(--border-strong)", borderRadius: 8, overflow: "hidden" }}>
                {["grid", "list"].map((v) => (
                  <button key={v} type="button" onClick={() => setView(v)} style={{
                    all: "unset", cursor: "pointer", padding: "7px 10px", display: "grid", placeItems: "center",
                    background: view === v ? "var(--bg-alt)" : "var(--surface)",
                    color: view === v ? "var(--fg)" : "var(--fg-subtle)",
                  }}><Icon name={v === "grid" ? "grid" : "activity"} size={14} stroke={1.6}/></button>
                ))}
              </div>
            </div>
          } />

        <div style={{ marginBottom: 16 }}>
          <SegmentControl value={filter} onChange={setFilter} options={[
            { value: "all", label: "All", count: facilities.length },
            { value: "active", label: "Active", count: facilities.filter(f=>f.status==="active").length },
            { value: "paused", label: "Paused", count: facilities.filter(f=>f.status==="paused").length },
            { value: "shutdown", label: "Shutdown", count: facilities.filter(f=>f.status==="shutdown").length },
          ]} />
        </div>

        {filtered.length === 0 ? (
          <section className="card" style={{ padding: 0 }}>
            <EmptyState icon="facility" title="No facilities match" body="Adjust the filter or search to see other facilities." secondary={{ label: "Show all", onClick: () => { setFilter("all"); setQ(""); } }} />
          </section>
        ) : view === "grid" ? (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 16 }}>
            {filtered.map((f) => <FacilityCard key={f.id} f={f} onAction={onAction} />)}
          </div>
        ) : (
          <section className="card" style={{ padding: 0 }}>
            {filtered.map((f, i) => (
              <div key={f.id} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr auto", gap: 16, alignItems: "center", padding: "16px 20px", borderTop: i === 0 ? "none" : "1px solid var(--border)" }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 10, minWidth: 0, flexDirection: "column" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ font: '500 14px/20px "Inter", sans-serif', color: "var(--fg)" }}>{f.name}</span>
                    <AdminStatus status={f.status} />
                  </div>
                  {f.lastActor && (
                    <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
                      <Icon name="docs" size={10} stroke={1.6} style={{ color: "var(--fg-faint)" }} />
                      <span style={{ font: '400 11px/14px "Inter", sans-serif', color: "var(--fg-subtle)" }}>
                        {f.lastAction} by <span style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{f.lastActor}</span>
                        {" · "}<span title={fmtDateTime(f.lastAt)}>{fmtRelative(f.lastAt)}</span>
                      </span>
                    </div>
                  )}
                </div>
                <div className="tnum" style={{ textAlign: "right", font: '500 14px "Inter", sans-serif', color: "var(--fg)" }}>{fmtMoneyShort(f.tvl)}</div>
                <div className="tnum" style={{ textAlign: "right", font: '500 14px "Inter", sans-serif', color: "var(--fg)" }}>{f.utilization.toFixed(1)}%</div>
                <div className="tnum" style={{ textAlign: "right", font: '500 14px "Inter", sans-serif', color: "var(--accent)" }}>{f.rate.toFixed(1)}%</div>
                <FacilityActions facility={f} onAction={onAction} />
              </div>
            ))}
          </section>
        )}
      </div>
    </div>
  );
};

window.AdminCreditFacilities = AdminCreditFacilities;