"use client";

import PageHeader from "@/components/PageHeader";
import StatCard from "@/components/StatCard";
import { api } from "@/lib/api";
import { pct, usd } from "@/lib/format";
import { useApi } from "@/lib/useApi";

export default function RiskPage() {
  const rules = useApi(api.riskRules, 300_000);
  const summary = useApi(api.riskSummary, 60_000);

  const r = rules.data;
  const p = summary.data;
  const live = rules.live && summary.live;

  if ((rules.loading || summary.loading) && (!r || !p)) {
    return <div className="text-slate-500 animate-pulse mt-10">Loading risk manager…</div>;
  }
  if (!r || !p) return null;

  const utilization = Math.min(100, p.risk_utilization_pct);

  return (
    <div>
      <PageHeader
        title="Risk Manager"
        subtitle="Hard limits enforced on every recommendation — trades failing any rule are rejected"
        live={live}
      />

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard label="Account Equity" value={usd(p.account_equity, 0)} tone="accent" />
        <StatCard label="Open Risk" value={usd(p.open_risk_usd, 0)} sub={`of ${usd(p.max_daily_risk_usd, 0)} daily max`} tone="down" />
        <StatCard label="Risk Utilization" value={pct(p.risk_utilization_pct)} />
        <StatCard label="Win Rate" value={pct(p.win_rate)} sub={`${p.closed_trades} closed trades`} />
      </div>

      <div className="card p-5 mt-4">
        <div className="flex justify-between text-xs text-slate-500 mb-2">
          <span>Daily risk budget utilization</span>
          <span className="font-mono">{pct(p.risk_utilization_pct)}</span>
        </div>
        <div className="h-3 rounded bg-ink-700 overflow-hidden">
          <div
            className={`h-full ${utilization > 80 ? "bg-bear" : utilization > 50 ? "bg-gold" : "bg-bull"}`}
            style={{ width: `${utilization}%` }}
          />
        </div>
        <p className="text-xs text-slate-500 mt-2">
          New signals are rejected once projected open risk exceeds{" "}
          <span className="text-slate-300 font-mono">{usd(p.max_daily_risk_usd, 0)}</span>.
        </p>
      </div>

      <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500 mt-8 mb-3">
        Active risk rules
      </h2>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <Rule name="Max risk per trade" value={pct(r.max_risk_per_trade_pct)} desc="Position size is computed so a stop-out never loses more than this share of equity." />
        <Rule name="Max daily risk" value={pct(r.max_daily_risk_pct)} desc="Total open risk across all paper positions cannot exceed this budget." />
        <Rule name="Min risk : reward" value={r.min_risk_reward.toFixed(1)} desc="Setups must offer at least this reward relative to stop distance." />
        <Rule name="Min confidence" value={String(r.min_confidence)} desc="AI ensemble confidence below this threshold is auto-rejected." />
        <Rule name="Min probability" value={pct(r.min_probability, 0)} desc="Estimated win probability must clear this bar." />
        <Rule name="Live trading" value="BLOCKED" desc="MVP is paper-trading only. No order execution paths exist in this codebase." danger />
      </div>
    </div>
  );
}

function Rule({ name, value, desc, danger }: { name: string; value: string; desc: string; danger?: boolean }) {
  return (
    <div className="card p-4">
      <div className="flex items-center justify-between">
        <span className="text-sm text-slate-300">{name}</span>
        <span className={`font-mono text-sm ${danger ? "text-bear" : "text-accent"}`}>{value}</span>
      </div>
      <p className="text-xs text-slate-500 mt-2">{desc}</p>
    </div>
  );
}