"use client";

import Link from "next/link";
import { ConfidenceMeter } from "@/components/ui/confidence";
import { FreshnessLabel } from "@/components/ui/freshness";
import { LivePrice } from "@/components/ui/price";
import { StatusBadge } from "@/components/ui/status-badge";
import { ASSET_CLASS_LABEL } from "@/lib/format";
import { useLiveQuote, useMarketStream } from "@/lib/stream";
import type { Exchange, Instrument, InstrumentCoverage, Quote } from "@/lib/types";
import { CoverageBadge } from "@/components/market/coverage-badge";

/** Sticky quote header: symbol, name, live price + change, status badge, freshness, confidence. */
export function InstrumentHeader({ instrument: i, quote, exchange, coverage }: { instrument: Instrument; quote: Quote | null; exchange: (Exchange & { status?: Exchange["status"] }) | null; coverage?: InstrumentCoverage }) {
  useMarketStream([`quotes:${i.id}`, `events:${i.id}`]);
  const live = useLiveQuote(i.id);
  const sources = live && quote && live.received >= Date.parse(quote.updated_at) ? live.sources : quote?.source_count;
  const conf = live && quote && live.received >= Date.parse(quote.updated_at) ? live.confidence : quote?.confidence;
  return (
    <div className="sticky top-[var(--header-h)] z-[60] border-b border-rule bg-canvas/95 backdrop-blur md:top-[calc(var(--header-h)+29px)]">
      <div className="mx-auto flex max-w-[1440px] flex-wrap items-end justify-between gap-x-6 gap-y-2 px-3 py-3 sm:px-5">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2 text-xs text-ink-3">
            <Link href={classHref(i.asset_class)} className="hover:text-ink">
              {ASSET_CLASS_LABEL[i.asset_class] ?? i.asset_class}
            </Link>
            {exchange && (
              <>
                <span>·</span>
                <Link href={`/exchanges/${exchange.id}`} className="hover:text-ink">
                  {exchange.name}
                </Link>
                {exchange.status && <StatusBadge status={exchange.status.state} />}
              </>
            )}
            {i.country && i.country !== "XX" && (
              <>
                <span>·</span>
                <Link href={`/countries/${i.country}`} className="hover:text-ink">
                  {i.country}
                </Link>
              </>
            )}
          </div>
          <h1 className="mt-0.5 flex flex-wrap items-baseline gap-x-3">
            <span className="mono text-2xl font-semibold tracking-tight sm:text-3xl">{i.symbol}</span>
            <span className="truncate text-base text-ink-2 sm:text-lg">{i.name}</span>
          </h1>
        </div>
        <div className="flex flex-col items-start gap-1 sm:items-end">
          <div className="flex items-center gap-3">
            <LivePrice instrumentId={i.id} quote={quote} assetClass={i.asset_class} big />
            <StatusBadge status={quote?.data_status ?? "UNKNOWN"} dot />
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <FreshnessLabel quote={quote} exchangeTz={exchange?.timezone} />
            <ConfidenceMeter confidence={conf} sources={sources} proxies={quote?.proxy_count} validators={quote?.validator_count} />
            {coverage && <CoverageBadge coverage={coverage} compact className="hidden sm:inline-flex" />}
          </div>
        </div>
      </div>
    </div>
  );
}

function classHref(c: string) {
  switch (c) {
    case "EQUITY":
      return "/stocks";
    case "ETF":
    case "ETN":
      return "/etfs";
    case "INDEX":
      return "/indices";
    case "CRYPTO":
      return "/crypto";
    case "FOREX":
      return "/forex";
    case "TREASURY":
    case "BOND":
    case "INTEREST_RATE":
      return "/rates";
    case "COMMODITY":
    case "FUTURE":
      return "/commodities";
    default:
      return "/markets";
  }
}