"use client";

// 종목 페이지 상단 가격 헤더.
// 표시: 종목명 / (코드·시장) / 현재가 / 전일대비 + 우측에 sparkline.
// 한국 거래소 관행대로 상승=빨강, 하락=파랑.

type Props = {
  name: string;
  code: string;
  market: string;
  current: number | null;
  prev: number | null;
  asOf?: string | null;
  // 헤더 우측 sparkline 용 종가 시계열 (오래된 → 최신 순). 비어 있으면 미표시.
  series?: number[];
};

export function PriceHero({ name, code, market, current, prev, asOf, series }: Props) {
  const change = current != null && prev != null ? current - prev : null;
  const pct = change != null && prev ? (change / prev) * 100 : null;
  const tone =
    change == null || change === 0
      ? "text-zinc-400"
      : change > 0
        ? "text-rose-400"
        : "text-sky-400";
  const arrow = change == null || change === 0 ? "—" : change > 0 ? "▲" : "▼";

  return (
    <div className="mb-5 flex items-end justify-between gap-4">
      <div>
        <div className="text-xs text-zinc-500">
          {code} · {market}
        </div>
        <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-50">
          {name}
        </h1>
        <div className="mt-3 flex items-baseline gap-3">
          <span className="text-4xl font-semibold tabular-nums text-zinc-50">
            {current != null ? current.toLocaleString() : "-"}
          </span>
          {change != null && pct != null && (
            <span className={`text-base font-medium tabular-nums ${tone}`}>
              {arrow} {Math.abs(change).toLocaleString()}{" "}
              ({pct >= 0 ? "+" : ""}
              {pct.toFixed(2)}%)
            </span>
          )}
        </div>
        {asOf && <div className="mt-1 text-xs text-zinc-500">기준 {asOf}</div>}
      </div>

      {series && series.length >= 2 && (
        <Sparkline
          values={series}
          stroke={change != null && change < 0 ? "#3b82f6" : "#ef4444"}
        />
      )}
    </div>
  );
}

// 가벼운 SVG sparkline. lightweight-charts 인스턴스를 또 만들 필요 없음.
function Sparkline({ values, stroke }: { values: number[]; stroke: string }) {
  const W = 140;
  const H = 44;
  const min = Math.min(...values);
  const max = Math.max(...values);
  const span = max - min || 1;
  const stepX = W / (values.length - 1);
  const points = values
    .map((v, i) => {
      const x = (i * stepX).toFixed(1);
      const y = (H - ((v - min) / span) * H).toFixed(1);
      return `${x},${y}`;
    })
    .join(" ");
  return (
    <svg
      width={W}
      height={H}
      viewBox={`0 0 ${W} ${H}`}
      className="shrink-0 opacity-80"
      aria-hidden
    >
      <polyline
        points={points}
        fill="none"
        stroke={stroke}
        strokeWidth={1.5}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </svg>
  );
}