"use client";
import { useEffect, useRef, useState } from "react";
import { api } from "@/lib/api";
import { buildKpis } from "@/lib/overview";
import { fmtLarge, fmtNumber } from "@/lib/format";
import { KPIStrip } from "@/components/prism/KPIStrip";
import { TickerHeader } from "@/components/prism/TickerHeader";
import type { InsidersResponse, InsiderTransaction, TickerOverview } from "@/types/api";

type InsidersState = "loading" | "ready" | "error" | "empty";
type Filter = "all" | "buy" | "sell";

type Props = {
  ticker: string;
  overview: TickerOverview;
  isSaved: boolean;
  onToggleWatchlist: () => void;
};

// ── Skeleton ──────────────────────────────────────────────────────────────────

function SkeletonBlock({ height, className = "" }: { height: number; className?: string }) {
  return (
    <div
      className={className}
      style={{
        height,
        borderRadius: "var(--r-3)",
        background: "linear-gradient(90deg, var(--ink-2, #181d26) 25%, var(--ink-3, #1e232e) 50%, var(--ink-2, #181d26) 75%)",
        backgroundSize: "200% 100%",
        animation: "psm-shimmer 1.4s ease infinite",
      }}
    />
  );
}

function InsidersSkeleton() {
  return (
    <>
      {/* KPI row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--sp-4)", marginBottom: "var(--sp-5)" }}>
        {[0, 1, 2, 3].map((i) => <SkeletonBlock key={i} height={64} />)}
      </div>
      {/* Chart card */}
      <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}>
        <SkeletonBlock height={220} />
      </div>
      {/* Table card */}
      <div className="psm-card">
        <SkeletonBlock height={32} className="" />
        <div style={{ marginTop: "var(--sp-4)", display: "flex", flexDirection: "column", gap: "var(--sp-3)" }}>
          {[0, 1, 2, 3, 4].map((i) => <SkeletonBlock key={i} height={44} />)}
        </div>
      </div>
    </>
  );
}

// ── Summary KPI strip ─────────────────────────────────────────────────────────

function InsiderKPIs({ summary }: { summary: InsidersResponse["summary"] }) {
  const items = [
    { label: "BUY TRANSACTIONS", value: String(summary.buy_count), tone: "pos" as const },
    { label: "TOTAL BOUGHT", value: fmtLarge(summary.buy_value), tone: "pos" as const },
    { label: "SELL TRANSACTIONS", value: String(summary.sell_count), tone: "neg" as const },
    { label: "TOTAL SOLD", value: fmtLarge(summary.sell_value), tone: "neg" as const },
  ];

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: "var(--sp-4)",
        marginBottom: "var(--sp-5)",
      }}
    >
      {items.map((item) => (
        <div
          key={item.label}
          className="psm-card"
          style={{ padding: "var(--sp-4) var(--sp-5)" }}
        >
          <div
            style={{
              fontFamily: "var(--font-sans)",
              fontSize: "var(--fs-11)",
              color: "var(--fg-3)",
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              marginBottom: "var(--sp-2)",
            }}
          >
            {item.label}
          </div>
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--fs-20)",
              fontVariantNumeric: "tabular-nums",
              color: item.tone === "pos" ? "var(--positive)" : "var(--negative)",
            }}
          >
            {item.value || "—"}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Monthly chart (SVG diverging bars) ───────────────────────────────────────

function MonthlyChart({ data }: { data: InsidersResponse["monthly_chart"] }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(600);

  useEffect(() => {
    if (!containerRef.current) return;
    const ro = new ResizeObserver((entries) => {
      setWidth(entries[0].contentRect.width);
    });
    ro.observe(containerRef.current);
    setWidth(containerRef.current.offsetWidth);
    return () => ro.disconnect();
  }, []);

  if (!data.length) {
    return (
      <div
        style={{
          textAlign: "center",
          padding: "var(--sp-8) 0",
          fontFamily: "var(--font-sans)",
          fontSize: "var(--fs-13)",
          color: "var(--fg-3)",
        }}
      >
        No activity in the last 6 months
      </div>
    );
  }

  const PAD_L = 52;
  const PAD_R = 16;
  const PAD_T = 16;
  const PAD_B = 28;
  const H = 220;
  const chartW = Math.max(width - PAD_L - PAD_R, 10);
  const chartH = H - PAD_T - PAD_B;

  // max absolute value for symmetric axis
  const maxVal = Math.max(...data.map((d) => Math.max(d.buy, d.sell)), 0.01);
  const axisMax = Math.ceil(maxVal * 1.15 * 10) / 10 || 1;

  const barW = Math.max(Math.floor((chartW / data.length) * 0.6), 4);
  const barGap = chartW / data.length;

  const yScale = (v: number) => (v / axisMax) * (chartH / 2);
  const midY = PAD_T + chartH / 2;

  // Y axis ticks
  const ticks = [axisMax, axisMax / 2, 0, -axisMax / 2, -axisMax];

  return (
    <div ref={containerRef} style={{ width: "100%" }}>
      <svg
        width={width}
        height={H}
        style={{ display: "block", overflow: "visible" }}
      >
        {/* Y axis ticks + labels */}
        {ticks.map((t) => {
          const y = midY - yScale(t);
          const label = t === 0 ? "0" : `${t > 0 ? "+" : ""}${Math.abs(t).toFixed(1)}M`;
          return (
            <g key={t}>
              <line
                x1={PAD_L - 4}
                x2={PAD_L + chartW}
                y1={y}
                y2={y}
                stroke={t === 0 ? "var(--line-1)" : "var(--line-1)"}
                strokeWidth={t === 0 ? 1.5 : 0.5}
                strokeDasharray={t === 0 ? undefined : "2 3"}
                opacity={t === 0 ? 1 : 0.5}
              />
              <text
                x={PAD_L - 8}
                y={y + 4}
                textAnchor="end"
                fontFamily="var(--font-mono)"
                fontSize={10}
                fill="var(--fg-3)"
              >
                {label}
              </text>
            </g>
          );
        })}

        {/* Bars */}
        {data.map((d, i) => {
          const cx = PAD_L + i * barGap + barGap / 2;
          const buyH = yScale(d.buy);
          const sellH = yScale(d.sell);

          return (
            <g key={d.month}>
              {/* Buy bar (up) */}
              {d.buy > 0 && (
                <rect
                  x={cx - barW / 2}
                  y={midY - buyH}
                  width={barW}
                  height={buyH}
                  fill="var(--positive)"
                  opacity={0.85}
                  rx={1}
                />
              )}
              {/* Sell bar (down) */}
              {d.sell > 0 && (
                <rect
                  x={cx - barW / 2}
                  y={midY}
                  width={barW}
                  height={sellH}
                  fill="var(--negative)"
                  opacity={0.85}
                  rx={1}
                />
              )}
              {/* Month label */}
              <text
                x={cx}
                y={H - 6}
                textAnchor="middle"
                fontFamily="var(--font-mono)"
                fontSize={10}
                fill="var(--fg-3)"
              >
                {d.month.slice(5)}
              </text>
            </g>
          );
        })}
      </svg>

      {/* Legend */}
      <div
        style={{
          display: "flex",
          gap: "var(--sp-5)",
          justifyContent: "flex-end",
          marginTop: "var(--sp-2)",
        }}
      >
        {[
          { color: "var(--positive)", label: "Buys" },
          { color: "var(--negative)", label: "Sells" },
        ].map(({ color, label }) => (
          <div
            key={label}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "var(--sp-2)",
              fontFamily: "var(--font-sans)",
              fontSize: "var(--fs-12)",
              color: "var(--fg-3)",
            }}
          >
            <span
              style={{
                display: "inline-block",
                width: 8,
                height: 8,
                borderRadius: 1,
                background: color,
              }}
            />
            {label}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Transaction table ─────────────────────────────────────────────────────────

function TransactionRow({ tx }: { tx: InsiderTransaction }) {
  const isBuy = tx.direction === "buy";
  const isSell = tx.direction === "sell";

  return (
    <div className="psm-insider">
      <div className="who">
        <span className="name">{tx.insider || "—"}</span>
        <span className="role">{tx.position || "—"}</span>
      </div>
      <span
        className={`pill ${isBuy ? "buy" : isSell ? "sell" : ""}`}
        style={
          !isBuy && !isSell
            ? { background: "var(--ink-2, #181d26)", color: "var(--fg-3)", border: "1px solid var(--line-1)" }
            : undefined
        }
      >
        {tx.direction.toUpperCase()}
      </span>
      <div style={{ textAlign: "right" }}>
        <div className="val">{tx.value ? fmtLarge(tx.value) : "—"}</div>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: "var(--fs-11)",
            color: "var(--fg-3)",
            fontVariantNumeric: "tabular-nums",
          }}
        >
          {tx.shares ? `${fmtNumber(tx.shares, 0)} sh` : ""}
          {tx.date ? ` · ${tx.date}` : ""}
        </div>
      </div>
    </div>
  );
}

function TransactionTable({ transactions }: { transactions: InsiderTransaction[] }) {
  const [filter, setFilter] = useState<Filter>("all");

  const filtered =
    filter === "all" ? transactions : transactions.filter((t) => t.direction === filter);

  const FILTERS: { key: Filter; label: string }[] = [
    { key: "all", label: "ALL" },
    { key: "buy", label: "BUYS" },
    { key: "sell", label: "SELLS" },
  ];

  return (
    <div>
      {/* Filter toggles */}
      <div
        style={{
          display: "flex",
          gap: "var(--sp-2)",
          marginBottom: "var(--sp-4)",
        }}
      >
        {FILTERS.map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setFilter(key)}
            className={`psm-tab${filter === key ? " active" : ""}`}
            style={{ cursor: "pointer" }}
          >
            {label}
          </button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <div
          style={{
            textAlign: "center",
            padding: "var(--sp-8) 0",
            fontFamily: "var(--font-sans)",
            fontSize: "var(--fs-13)",
            color: "var(--fg-3)",
          }}
        >
          No transactions match filter
        </div>
      ) : (
        filtered.map((tx, i) => <TransactionRow key={i} tx={tx} />)
      )}
    </div>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────

export function InsidersPage({ ticker, overview, isSaved, onToggleWatchlist }: Props) {
  const [data, setData] = useState<InsidersResponse | null>(null);
  const [state, setState] = useState<InsidersState>("loading");
  const kpis = buildKpis(overview);

  useEffect(() => {
    let cancelled = false;
    setState("loading");
    setData(null);

    api
      .insiders(ticker)
      .then((res) => {
        if (cancelled) return;
        if (!res.transactions.length) {
          setState("empty");
        } else {
          setData(res);
          setState("ready");
        }
      })
      .catch(() => {
        if (!cancelled) setState("error");
      });

    return () => {
      cancelled = true;
    };
  }, [ticker]);

  return (
    <>
      <TickerHeader overview={overview} onToggleWatchlist={onToggleWatchlist} isSaved={isSaved} />
      <KPIStrip items={kpis} />

      <div style={{ padding: "0 var(--sp-1)" }}>
        {state === "loading" && <InsidersSkeleton />}

        {state === "error" && (
          <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}>
            <div
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: "var(--fs-14)",
                color: "var(--fg-3)",
              }}
            >
              Failed to load insider data
            </div>
          </div>
        )}

        {state === "empty" && (
          <div className="psm-card" style={{ textAlign: "center", padding: "var(--sp-8)" }}>
            <div
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: "var(--fs-14)",
                color: "var(--fg-3)",
              }}
            >
              No insider activity reported
            </div>
          </div>
        )}

        {state === "ready" && data && (
          <>
            <InsiderKPIs summary={data.summary} />

            <div className="psm-card" style={{ marginBottom: "var(--sp-4)" }}>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  marginBottom: "var(--sp-4)",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: "var(--fs-11)",
                    color: "var(--fg-3)",
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                  }}
                >
                  Monthly Insider Activity — Last 6 Months ($M)
                </span>
              </div>
              <MonthlyChart data={data.monthly_chart} />
            </div>

            <div className="psm-card">
              <div
                style={{
                  fontFamily: "var(--font-sans)",
                  fontSize: "var(--fs-11)",
                  color: "var(--fg-3)",
                  letterSpacing: "0.08em",
                  textTransform: "uppercase",
                  marginBottom: "var(--sp-4)",
                }}
              >
                All Transactions
              </div>
              <TransactionTable transactions={data.transactions} />
            </div>
          </>
        )}
      </div>

      <style>{`
        @keyframes psm-shimmer {
          0%   { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }
      `}</style>
    </>
  );
}
