"use client";

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { ConfidenceBar, DirectionBadge, RiskBadge, StatusBadge } from "@/components/Badge";
import PageHeader from "@/components/PageHeader";
import Sparkline from "@/components/Sparkline";
import StatCard from "@/components/StatCard";
import { api } from "@/lib/api";
import { pct, usd } from "@/lib/format";
import { useApi } from "@/lib/useApi";
import type { OptionContract } from "@/lib/types";

export default function SignalDetailPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const id = Number(params.id);
  const { data: s, live, loading } = useApi(() => api.signal(id), 60_000);
  const [placing, setPlacing] = useState(false);
  const [placed, setPlaced] = useState(false);

  if (loading && !s) return <div className="text-slate-500 animate-pulse mt-10">Loading signal…</div>;
  if (!s) return <div className="card p-6 text-slate-500 mt-10">Signal not found.</div>;

  const contract = s.option_contract as OptionContract;
  const hasContract = contract && typeof contract.strike === "number";
  const ind = s.indicators;

  const paperTrade = async () => {
    setPlacing(true);
    await api.openTrade(s.id);
    setPlacing(false);
    setPlaced(true);
    setTimeout(() => router.push("/paper-trades"), 800);
  };

  return (
    <div>
      <PageHeader
        title={`${s.symbol} — ${s.direction} ${(s.signal_type ?? "options") === "swing" ? "swing trade" : "options setup"}`}
        subtitle={s.company}
        live={live}
        actions={
          <div className="flex items-center gap-2">
            <Link href="/signals" className="text-xs px-3 py-1.5 rounded-lg border border-ink-600 text-slate-300 hover:bg-ink-800">
              ← All signals
            </Link>
            {s.status === "approved" && (
              <button
                onClick={paperTrade}
                disabled={placing || placed}
                className="text-xs px-4 py-2 rounded-lg bg-bull/15 border border-bull/40 text-bull hover:bg-bull/25 disabled:opacity-50"
              >
                {placed ? "✓ Paper trade opened" : placing ? "Opening…" : "Open Paper Trade"}
              </button>
            )}
          </div>
        }
      />

      <div className="flex flex-wrap items-center gap-2 mb-5">
        <DirectionBadge direction={s.direction} />
        <StatusBadge status={s.status} />
        <RiskBadge rating={s.risk_rating} />
        <span className="text-xs text-slate-500">Signal #{s.id}</span>
      </div>

      {s.status === "rejected" && s.rejection_reasons.length > 0 && (
        <div className="card border-bear/40 bg-bear/5 p-4 mb-5">
          <div className="text-sm font-semibold text-bear mb-1">Rejected by Risk Manager</div>
          <ul className="text-sm text-slate-400 list-disc ml-5 space-y-0.5">
            {s.rejection_reasons.map((r, i) => <li key={i}>{r}</li>)}
          </ul>
        </div>
      )}

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard label="Confidence" value={s.confidence.toFixed(0)} sub="AI ensemble score" tone="accent" />
        <StatCard label="Probability" value={pct(s.probability, 0)} sub="Estimated win probability" />
        <StatCard label="Risk : Reward" value={s.risk_reward.toFixed(2)} sub="To first target" />
        <StatCard label="Max Risk" value={usd(s.max_risk_usd, 0)} sub={`${s.position_size} shares`} tone="down" />
      </div>

      <div className="grid lg:grid-cols-2 gap-4 mt-4">
        {/* Trade plan */}
        <div className="card p-5">
          <h3 className="text-sm font-semibold text-slate-200 mb-4">Trade Plan</h3>
          <div className="space-y-3 text-sm">
            {[
              ["Current price", usd(s.price), "text-slate-200"],
              ["Entry", usd(s.entry), "text-accent"],
              ["Stop-loss", usd(s.stop_loss), "text-bear"],
              ["Target 1 (2R)", usd(s.target1), "text-bull"],
              ["Target 2 (3R)", usd(s.target2), "text-bull"],
              ["Position size", `${s.position_size} shares`, "text-slate-200"],
            ].map(([label, value, cls]) => (
              <div key={label as string} className="flex justify-between border-b border-ink-800 pb-2">
                <span className="text-slate-500">{label}</span>
                <span className={`font-mono ${cls}`}>{value}</span>
              </div>
            ))}
          </div>
          <div className="mt-4">
            <div className="text-xs text-slate-500 mb-1">30-day price history</div>
            <Sparkline data={s.history} width={320} height={60} />
          </div>
        </div>

        {/* Agent scores */}
        <div className="card p-5">
          <h3 className="text-sm font-semibold text-slate-200 mb-4">AI Agent Scores</h3>
          <div className="space-y-3">
            {Object.entries(s.scores).filter(([k]) => k !== "confidence").map(([agent, score]) => (
              <div key={agent}>
                <div className="flex justify-between text-xs mb-1">
                  <span className="capitalize text-slate-400">{agent}</span>
                  <span className="font-mono text-slate-300">{Number(score).toFixed(0)}</span>
                </div>
                <ConfidenceBar value={Number(score)} />
              </div>
            ))}
          </div>

          <h3 className="text-sm font-semibold text-slate-200 mt-6 mb-3">Key Indicators</h3>
          <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
            <Row k="RSI (14)" v={ind.rsi?.toFixed(1) ?? "—"} />
            <Row k="MACD hist" v={ind.macd ? ind.macd.histogram.toFixed(3) : "—"} />
            <Row k="EMA 9" v={ind.ema9 ? usd(ind.ema9) : "—"} />
            <Row k="EMA 21" v={ind.ema21 ? usd(ind.ema21) : "—"} />
            <Row k="SMA 50" v={ind.sma50 ? usd(ind.sma50) : "—"} />
            <Row k="ATR" v={ind.atr?.toFixed(2) ?? "—"} />
            <Row k="Bollinger %B" v={ind.bollinger ? ind.bollinger.pct_b.toFixed(2) : "—"} />
            <Row k="5d momentum" v={`${ind.momentum_5d_pct?.toFixed(1) ?? "—"}%`} />
          </div>
        </div>
      </div>

      {hasContract && (
        <div className="card p-5 mt-4">
          <h3 className="text-sm font-semibold text-slate-200 mb-4">
            Selected Option Contract —{" "}
            <span className="font-mono text-accent">
              {contract.symbol} {contract.expiry} {contract.strike} {contract.type.toUpperCase()}
            </span>
          </h3>
          <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4 text-xs">
            <Row k="Bid" v={usd(contract.bid)} />
            <Row k="Ask" v={usd(contract.ask)} />
            <Row k="IV" v={pct(contract.iv * 100, 0)} />
            <Row k="Delta" v={contract.delta.toFixed(2)} />
            <Row k="Gamma" v={contract.gamma.toFixed(3)} />
            <Row k="Theta" v={contract.theta.toFixed(2)} />
            <Row k="Open Int" v={String(contract.open_interest)} />
            <Row k="Volume" v={String(contract.volume)} />
          </div>
        </div>
      )}

      <div className="card p-5 mt-4">
        <h3 className="text-sm font-semibold text-slate-200 mb-3">AI Rationale</h3>
        <ul className="text-sm text-slate-400 space-y-1.5 list-disc ml-5">
          {s.rationale.map((r, i) => <li key={i}>{r}</li>)}
        </ul>
        <p className="text-[11px] text-slate-600 mt-4">
          Research output only — paper trading, not financial advice.
        </p>
      </div>
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div>
      <div className="text-slate-500">{k}</div>
      <div className="font-mono text-slate-200 mt-0.5">{v}</div>
    </div>
  );
}