"use client";

// 거래주체 패널 — chart.trading_value (외국인/기관/개인 순매수) 를 최근 5일 표로.
// 별도 백엔드 호출 없음. ChartPayload 에 이미 들어있는 시리즈를 재사용.
// 단위: 백엔드는 원(KRW) 단위. UI 는 억원(억원=1e8)으로 환산.
// 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑.

import type { TradingValuePoint } from "../lib/api";

export function TradingValuePanel({
  data,
}: {
  data: TradingValuePoint[];
}) {
  if (!data || data.length === 0) {
    return (
      <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
        거래주체 데이터 없음
      </div>
    );
  }
  // 최근 5일만 (입력은 오래된→최신 순), 표시는 최신이 위.
  const recent = data.slice(-5).reverse();

  return (
    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
      <div className="mb-3 flex items-baseline justify-between">
        <div className="text-sm font-medium text-zinc-200">거래주체 순매수</div>
        <div className="text-[11px] text-zinc-500">최근 {recent.length}일 · 단위: 억원</div>
      </div>
      <div className="overflow-hidden rounded-md border border-zinc-800">
        <table className="w-full text-xs tabular-nums">
          <thead className="bg-zinc-900/60 text-[11px] text-zinc-500">
            <tr>
              <th className="px-2 py-1.5 text-left font-normal">일자</th>
              <th className="px-2 py-1.5 text-right font-normal">외국인</th>
              <th className="px-2 py-1.5 text-right font-normal">기관</th>
              <th className="px-2 py-1.5 text-right font-normal">개인</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-zinc-800">
            {recent.map((row) => (
              <tr key={row.date}>
                <td className="px-2 py-1.5 text-left text-zinc-400">
                  {shortDate(row.date)}
                </td>
                <NetCell value={row.foreign_net} />
                <NetCell value={row.institution_net} />
                <NetCell value={row.individual_net} />
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function NetCell({ value }: { value: number | null }) {
  if (value == null) {
    return <td className="px-2 py-1.5 text-right text-zinc-600">—</td>;
  }
  const eok = value / 1e8;
  const tone =
    eok === 0
      ? "text-zinc-400"
      : eok > 0
      ? "text-rose-400"
      : "text-sky-400";
  const sign = eok > 0 ? "+" : "";
  return (
    <td className={`px-2 py-1.5 text-right ${tone}`}>
      {sign}
      {eok.toLocaleString(undefined, { maximumFractionDigits: 0 })}
    </td>
  );
}

function shortDate(iso: string): string {
  // 'YYYY-MM-DD' → 'MM-DD'
  const m = /^\d{4}-(\d{2})-(\d{2})/.exec(iso);
  return m ? `${m[1]}-${m[2]}` : iso;
}