"use client";

import { ChevronDown } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";
import { CoverageBadge } from "@/components/market/coverage-badge";
import { RightsBadge, StatusBadge } from "@/components/ui/status-badge";
import { clientApi } from "@/lib/client-api";
import { COMPARABILITY_LABEL, OBSERVATION_TYPE_LABEL, ROLE_LABEL, deltaTone, formatDeltaBps, reasonLabel, roleOf } from "@/lib/coverage";
import { cx, formatBps, formatDateTime, formatDuration, formatQuoteValue } from "@/lib/format";
import type { Provenance } from "@/lib/types";

const ROLE_TONE: Record<string, string> = { votes: "bg-positive-soft text-positive", confirms: "bg-accent-soft text-accent", validates: "bg-surface-3 text-ink-2", excluded: "bg-stale-soft text-stale" };

/**
 * "Why this price?" — the Source Coverage Matrix: every contribution behind the canonical value with its
 * observation type, its distance to the consensus and its role (votes / confirms / validates / excluded).
 */
export function ProvenancePanel({ instrumentId, assetClass, defaultOpen = false, className }: { instrumentId: string; assetClass?: string | null; defaultOpen?: boolean; className?: string }) {
  const [open, setOpen] = useState(defaultOpen);
  const [data, setData] = useState<Provenance | null>(null);
  const [err, setErr] = useState<string | null>(null);
  useEffect(() => {
    if (!open) return;
    let alive = true;
    const load = () =>
      clientApi<Provenance>(`/v1/quotes/${encodeURIComponent(instrumentId)}/provenance`)
        .then((d) => alive && setData(d))
        .catch((e) => alive && setErr(e instanceof Error ? e.message : "unavailable"));
    load();
    const t = setInterval(load, 5000);
    return () => {
      alive = false;
      clearInterval(t);
    };
  }, [open, instrumentId]);
  const canonicalClass = data?.comparability ?? null;
  const included = data?.contributions.filter((c) => c.included) ?? [];
  const voters = included.filter((c) => roleOf(c) === "votes");
  return (
    <div className={cx("rounded-md border border-rule bg-surface", className)}>
      <button type="button" onClick={() => setOpen((o) => !o)} className="flex h-12 w-full items-center justify-between px-4 text-left" aria-expanded={open}>
        <span className="text-sm font-semibold">Why this price?</span>
        <span className="flex items-center gap-2 text-xs text-ink-3">
          source coverage matrix
          <ChevronDown size={16} className={cx("transition-transform", open && "rotate-180")} />
        </span>
      </button>
      {open && (
        <div className="border-t border-rule px-4 pb-4 pt-3">
          {err && <div className="text-sm text-negative">{err}</div>}
          {!data && !err && <div className="text-sm text-ink-3">Loading provenance…</div>}
          {data && (
            <>
              {data.coverage && (
                <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
                  <CoverageBadge coverage={data.coverage} />
                  <Link href="/coverage" className="text-xs text-accent hover:underline">
                    Source coverage →
                  </Link>
                </div>
              )}
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                <Fact label="Canonical price" value={data.canonical_price == null ? "withheld" : formatQuoteValue(data.canonical_price, assetClass, data.currency)} sub={canonicalClass ? `= ${COMPARABILITY_LABEL[canonicalClass]}` : undefined} />
                <Fact label="Independent sources" value={`${data.independent_sources}`} sub={`${voters.length} voting · ${data.proxy_confirmations ?? 0} confirming · ${data.validator_confirmations ?? 0} validating`} />
                <Fact label="Dispersion" value={formatBps(data.dispersion_bps)} sub="spread between voting sources" />
                <Fact label="Confidence" value={`${Math.round(data.confidence * 100)}%`} sub={`newest observation ${formatDuration(data.freshness_ms)} old`} />
              </div>
              <p className="mt-3 text-xs leading-relaxed text-ink-3">
                <span className="font-medium text-ink-2">Method (consensus v{data.consensus_version}):</span> {data.method}. Status <StatusBadge status={data.realtime_status} /> · rights <RightsBadge status={data.rights_status} /> · computed {formatDateTime(data.computed_at, { seconds: true })}.
              </p>
              {data.shared_upstream_pairs && data.shared_upstream_pairs.length > 0 && (
                <p className="mt-2 rounded border border-rule bg-warning-soft px-2.5 py-1.5 text-xs text-ink-2">
                  <span className="font-medium">Likely shared upstream:</span>{" "}
                  {data.shared_upstream_pairs.map((p) => `${p.sourceA} ≈ ${p.sourceB} (similarity ${(p.similarity * 100).toFixed(1)} % over ${p.samples} samples)`).join("; ")} — these sources are counted as one family.
                </p>
              )}
              <div className="mt-3 overflow-x-auto">
                <table className="table-dense">
                  <thead>
                    <tr>
                      <th>Source</th>
                      <th>Type</th>
                      <th className="text-right">Value</th>
                      <th className="text-right">Age</th>
                      <th className="text-right">Δ consensus</th>
                      <th>Role</th>
                      <th className="text-right">Weight</th>
                      <th className="text-right">Reliability</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.contributions.map((c) => {
                      const role = roleOf(c);
                      const withheld = c.value == null;
                      return (
                        <tr key={`${c.source_id}-${c.connector_id}`} className={cx(role === "excluded" && "text-ink-3")}>
                          <td>
                            <Link href={`/sources#${c.source_id}`} className="hover:underline">
                              {c.source?.name ?? c.source_id}
                            </Link>
                            <span className="mono block text-[10.5px] text-ink-3">
                              {c.connector_id}
                              {c.source?.family && c.source.family !== c.source_id ? ` · family ${c.source.family}` : ""}
                            </span>
                          </td>
                          <td className="whitespace-nowrap text-xs">
                            {c.observation_type ? OBSERVATION_TYPE_LABEL[c.observation_type] : "—"}
                            <span className="block text-[10.5px] text-ink-3">
                              <StatusBadge status={c.realtime_status} />
                            </span>
                          </td>
                          <td className="num">
                            {withheld ? (
                              <span className="inline-flex items-center gap-1 text-ink-3">
                                — <span className="rounded-[3px] bg-surface-3 px-1 text-[10px] uppercase tracking-wide">validator</span>
                              </span>
                            ) : (
                              formatQuoteValue(c.value, assetClass, data.currency)
                            )}
                          </td>
                          <td className="num">{formatDuration(c.age_ms)}</td>
                          <td className={cx("num", deltaTone(c.delta_bps))}>
                            {withheld && role === "validates" ? (
                              <span title={formatDeltaBps(c.delta_bps)}>{c.reason === "validator_disagrees" ? "disagrees" : c.delta_bps == null ? "—" : "agrees"}</span>
                            ) : (
                              formatDeltaBps(c.delta_bps)
                            )}
                          </td>
                          <td>
                            <span className={cx("inline-flex h-5 items-center rounded-[3px] px-1.5 text-[10.5px] font-medium uppercase tracking-wide", ROLE_TONE[role])}>{ROLE_LABEL[role]}</span>
                            {!c.included && <span className="block max-w-[260px] whitespace-normal text-[10.5px] leading-tight text-ink-3">{reasonLabel(c.reason, c.observation_type, canonicalClass)}</span>}
                          </td>
                          <td className="num">{c.included ? c.weight.toFixed(3) : "—"}</td>
                          <td className="num">{Math.round(c.reliability_score * 100)}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
              <p className="mt-2 text-[11px] text-ink-3">
                Votes set the canonical value; proxies (stablecoin markets, derived crosses) confirm it with reduced weight and never count as independent families; validators (restricted rights) are compared but never displayed. Observations of another class (official fixing vs live market, last close vs today) are reported, never mixed. Reliability is the operational score of the connector, not a judgement of the venue. See <Link href="/methodology#source-mesh" className="text-accent hover:underline">methodology</Link>.
              </p>
            </>
          )}
        </div>
      )}
    </div>
  );
}

function Fact({ label, value, sub }: { label: string; value: string; sub?: string }) {
  return (
    <div>
      <div className="text-[10.5px] font-medium uppercase tracking-wide text-ink-3">{label}</div>
      <div className="mono text-lg font-semibold tnum">{value}</div>
      {sub && <div className="text-[11px] text-ink-3">{sub}</div>}
    </div>
  );
}