"use client";

import { ColorType, createChart, LineSeries, type IChartApi, type UTCTimestamp } from "lightweight-charts";
import { X } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { clientApi } from "@/lib/client-api";
import { cx, formatPercent, instrumentHref } from "@/lib/format";
import type { Instrument, Quote, SearchResult } from "@/lib/types";

interface Series {
  instrument: Instrument;
  quote: Quote | null;
  points: Array<{ t: number; c: number; n: number | null }>;
  stats: { return_percent: number | null; annualized_volatility_percent: number | null; max_drawdown_percent: number | null; points: number };
}
interface CompareData {
  resolution: string;
  series: Series[];
  correlations: Array<{ a: string; b: string; rho: number | null }>;
}

const COLORS = ["--series-1", "--series-2", "--series-3", "--series-4", "--series-5", "--series-6", "--series-7", "--series-8"];
const cssVar = (n: string) => (typeof window === "undefined" ? "#000" : getComputedStyle(document.documentElement).getPropertyValue(n).trim());

export function CompareView({ initialIds, initialResolution }: { initialIds: string[]; initialResolution: "1m" | "1h" | "1d" }) {
  const router = useRouter();
  const [ids, setIds] = useState(initialIds);
  const [resolution, setResolution] = useState(initialResolution);
  const [data, setData] = useState<CompareData | null>(null);
  const [q, setQ] = useState("");
  const [hits, setHits] = useState<Array<{ id: string; symbol: string; name: string }>>([]);
  const wrap = useRef<HTMLDivElement>(null);
  const chart = useRef<IChartApi | null>(null);

  useEffect(() => {
    const u = new URLSearchParams({ ids: ids.join(","), resolution });
    router.replace(`/compare?${u}`, { scroll: false });
    if (!ids.length) {
      setData({ resolution, series: [], correlations: [] });
      return;
    }
    clientApi<CompareData>(`/v1/compare?${u}&limit=${resolution === "1m" ? 1500 : resolution === "1h" ? 700 : 500}`)
      .then(setData)
      .catch(() => setData({ resolution, series: [], correlations: [] }));
  }, [ids, resolution, router]);

  useEffect(() => {
    if (!q.trim()) {
      setHits([]);
      return;
    }
    const t = setTimeout(() => {
      clientApi<SearchResult>(`/v1/search?q=${encodeURIComponent(q.trim())}&limit=8`)
        .then((r) => setHits(r.results.filter((x) => x.group !== "EXCHANGE" && x.group !== "COUNTRY").map((x) => ({ id: String(x.item.id), symbol: String(x.item.symbol), name: String(x.item.name) }))))
        .catch(() => {});
    }, 150);
    return () => clearTimeout(t);
  }, [q]);

  useEffect(() => {
    if (!wrap.current) return;
    const c = createChart(wrap.current, {
      autoSize: true,
      layout: { background: { type: ColorType.Solid, color: "transparent" }, textColor: cssVar("--ink-3"), fontFamily: "var(--font-geist-mono), ui-monospace, monospace", fontSize: 11, attributionLogo: false },
      grid: { vertLines: { color: cssVar("--rule") }, horzLines: { color: cssVar("--rule") } },
      rightPriceScale: { borderColor: cssVar("--rule") },
      timeScale: { borderColor: cssVar("--rule"), timeVisible: true },
    });
    chart.current = c;
    return () => {
      c.remove();
      chart.current = null;
    };
  }, []);

  useEffect(() => {
    const c = chart.current;
    if (!c || !data) return;
    // Rebuild series: remove all, add one per instrument.
    // lightweight-charts has no "remove all", so we recreate via a fresh chart instance when the set changes.
    const el = wrap.current;
    if (!el) return;
    c.remove();
    const nc = createChart(el, {
      autoSize: true,
      layout: { background: { type: ColorType.Solid, color: "transparent" }, textColor: cssVar("--ink-3"), fontFamily: "var(--font-geist-mono), ui-monospace, monospace", fontSize: 11, attributionLogo: false },
      grid: { vertLines: { color: cssVar("--rule") }, horzLines: { color: cssVar("--rule") } },
      rightPriceScale: { borderColor: cssVar("--rule") },
      timeScale: { borderColor: cssVar("--rule"), timeVisible: true },
    });
    chart.current = nc;
    data.series.forEach((s, i) => {
      const line = nc.addSeries(LineSeries, { color: cssVar(COLORS[i % COLORS.length]!), lineWidth: 2, title: s.instrument.symbol, priceFormat: { type: "custom", formatter: (v: number) => v.toFixed(1) } });
      line.setData(s.points.filter((p) => p.n != null).map((p) => ({ time: (p.t / 1000) as UTCTimestamp, value: p.n! })));
    });
    nc.timeScale().fitContent();
  }, [data]);

  const rho = (a: string, b: string) => (a === b ? 1 : data?.correlations.find((c) => (c.a === a && c.b === b) || (c.a === b && c.b === a))?.rho ?? null);
  return (
    <div>
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {data?.series.map((s, i) => (
          <span key={s.instrument.id} className="inline-flex h-9 items-center gap-2 rounded-md border border-rule bg-surface pl-2 pr-1 text-sm">
            <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: `var(${COLORS[i % COLORS.length]})` }} />
            <Link href={instrumentHref(s.instrument.id)} className="mono font-medium hover:underline">
              {s.instrument.symbol}
            </Link>
            <button type="button" aria-label={`Remove ${s.instrument.symbol}`} onClick={() => setIds((x) => x.filter((id) => id !== s.instrument.id))} className="flex h-7 w-7 items-center justify-center text-ink-3 hover:text-ink">
              <X size={13} />
            </button>
          </span>
        ))}
        <div className="relative">
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={ids.length >= 8 ? "Maximum 8 instruments" : "Add instrument…"} disabled={ids.length >= 8} className="h-9 w-56 rounded-md border border-rule bg-surface px-2 text-sm outline-none focus:border-rule-strong" />
          {hits.length > 0 && (
            <ul className="absolute z-20 mt-1 w-72 overflow-hidden rounded-md border border-rule bg-surface shadow-lg">
              {hits.map((h) => (
                <li key={h.id}>
                  <button
                    type="button"
                    onClick={() => {
                      if (!ids.includes(h.id)) setIds((x) => [...x, h.id]);
                      setQ("");
                      setHits([]);
                    }}
                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-surface-2"
                  >
                    <span className="mono font-medium">{h.symbol}</span>
                    <span className="truncate text-xs text-ink-3">{h.name}</span>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div className="ml-auto flex gap-0.5">
          {(["1m", "1h", "1d"] as const).map((r) => (
            <button key={r} type="button" onClick={() => setResolution(r)} className={cx("mono h-9 rounded px-3 text-xs", r === resolution ? "bg-ink text-canvas" : "text-ink-2 hover:bg-surface-2")}>
              {r === "1m" ? "Intraday" : r === "1h" ? "Hourly" : "Daily"}
            </button>
          ))}
        </div>
      </div>
      <div className="relative h-[380px] rounded-md border border-rule bg-surface">
        <div ref={wrap} className="absolute inset-0" />
        {data && data.series.every((s) => s.points.length < 2) && <div className="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-ink-3">Not enough history at this resolution yet. Intraday series start when Market Atlas first observes an instrument live; daily history comes from end-of-day sources.</div>}
      </div>
      {data && data.series.length > 0 && (
        <div className="mt-4 grid grid-cols-1 [&>*]:min-w-0 gap-4 lg:grid-cols-[1fr_auto]">
          <div className="overflow-x-auto rounded-md border border-rule bg-surface">
            <table className="table-dense">
              <thead>
                <tr>
                  <th>Instrument</th>
                  <th className="text-right">Return</th>
                  <th className="text-right">Ann. volatility</th>
                  <th className="text-right">Max drawdown</th>
                  <th className="text-right">Points</th>
                </tr>
              </thead>
              <tbody>
                {data.series.map((s, i) => (
                  <tr key={s.instrument.id}>
                    <td>
                      <span className="mr-2 inline-block h-2 w-2 rounded-full" style={{ background: `var(${COLORS[i % COLORS.length]})` }} />
                      <Link href={instrumentHref(s.instrument.id)} className="mono font-medium hover:underline">
                        {s.instrument.symbol}
                      </Link>
                      <span className="ml-2 text-xs text-ink-3">{s.instrument.name}</span>
                    </td>
                    <td className={cx("num", (s.stats.return_percent ?? 0) > 0 ? "text-positive" : (s.stats.return_percent ?? 0) < 0 ? "text-negative" : "")}>{formatPercent(s.stats.return_percent)}</td>
                    <td className="num">{s.stats.annualized_volatility_percent == null ? "—" : `${s.stats.annualized_volatility_percent.toFixed(1)}%`}</td>
                    <td className="num text-negative">{formatPercent(s.stats.max_drawdown_percent, 2, false)}</td>
                    <td className="num">{s.stats.points}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="overflow-x-auto rounded-md border border-rule bg-surface p-3">
            <div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-ink-3">Correlation of returns</div>
            <table className="mono text-xs">
              <thead>
                <tr>
                  <th />
                  {data.series.map((s) => (
                    <th key={s.instrument.id} className="px-2 py-1 text-right font-medium text-ink-3">
                      {s.instrument.symbol}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {data.series.map((a) => (
                  <tr key={a.instrument.id}>
                    <td className="py-1 pr-2 text-ink-3">{a.instrument.symbol}</td>
                    {data.series.map((b) => {
                      const r = rho(a.instrument.id, b.instrument.id);
                      return (
                        <td key={b.instrument.id} className="px-2 py-1 text-right tnum" style={r == null ? undefined : { background: r > 0 ? `rgba(29,79,216,${Math.abs(r) * 0.3})` : `rgba(192,50,60,${Math.abs(r) * 0.3})` }}>
                          {r == null ? "—" : r.toFixed(2)}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="mt-2 max-w-[260px] text-[11px] text-ink-3">Pearson correlation of period returns on aligned timestamps; “—” when fewer than 5 overlapping points.</p>
          </div>
        </div>
      )}
    </div>
  );
}