stock_chart_site/web/components/PredictionPanel.tsx

"use client";

import { useState } from "react";
import {
  api,
  type LatestPredictionResponse,
  type LatestPredictionStep,
  type PredictResponse,
} from "../lib/api";

type Props = {
  code: string;
  initial?: LatestPredictionResponse | null;
  onResult: (pred: LatestPredictionResponse) => void;
};

function normalizeFromPredictResponse(
  code: string,
  resp: PredictResponse,
): LatestPredictionResponse {
  const steps: LatestPredictionStep[] = resp.steps.map((s) => ({
    predicted_at: null,
    target_date: s.target_date ?? "",
    horizon: s.horizon,
    direction: s.direction,
    prob_up: s.prob_up,
    prob_flat: s.prob_flat,
    prob_down: s.prob_down,
    expected_return: s.expected_return,
    point_close: s.point_close,
    ci_low: s.ci_low,
    ci_high: s.ci_high,
    user_triggered: resp.user_triggered,
    features_snapshot: null,
  }));
  return {
    code,
    found: true,
    base_date: resp.base_date,
    base_close: resp.base_close,
    steps,
  };
}

// 15일/30일/1년 세 프리셋. 각각 그 구간 안에 6~7 step 을 깔아서 차트 캔들이
// 너무 듬성하지 않게 한다. 백엔드는 1..252 거래일 horizon 을 허용 (predict.py 참조).
const PREDICT_PRESETS: { id: string; label: string; horizons: number[] }[] = [
  { id: "15d", label: "15일", horizons: [1, 3, 5, 7, 10, 15] },
  { id: "30d", label: "30일", horizons: [1, 5, 10, 15, 20, 25, 30] },
  { id: "1y", label: "1년", horizons: [5, 15, 30, 60, 120, 180, 240] },
];

export function PredictionPanel({ code, initial, onResult }: Props) {
  const [pred, setPred] = useState<LatestPredictionResponse | null>(initial ?? null);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [presetIdx, setPresetIdx] = useState(1); // 30일 기본

  async function runPredict() {
    setLoading(true);
    setErr(null);
    try {
      const horizons = PREDICT_PRESETS[presetIdx].horizons;
      const r = await api.predict(code, horizons);
      const normalized = normalizeFromPredictResponse(code, r);
      setPred(normalized);
      onResult(normalized);
    } catch (e) {
      setErr(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }

  const steps = pred?.steps ?? [];

  return (
    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <div className="text-sm font-medium text-zinc-200">예측 (Chronos + LightGBM 앙상블)</div>
          <div className="text-xs text-zinc-500">
            결과는 차트에 옅은 색 캔들로 이어 붙고, 꼬리 길이가 신뢰구간 폭입니다.
          </div>
        </div>
        <button
          onClick={runPredict}
          disabled={loading}
          className="rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-500 disabled:opacity-50"
        >
          {loading ? "예측 중…" : pred?.found ? "다시 예측" : "예상차트 보기"}
        </button>
      </div>

      <div className="mb-3 flex flex-wrap items-center gap-2 text-xs">
        <span className="text-zinc-500">예측 기간:</span>
        {PREDICT_PRESETS.map((p, i) => {
          const on = presetIdx === i;
          return (
            // segmented control — PeriodTabs / InvestorCumulative window / SMA·RSI·MACD 토글과
            // 같은 패턴. type="button" 으로 폼 submit 기본값 사고 차단, aria-pressed 로 스크린
            // 리더에 현재 선택 노출. 시각 토큰은 PredictionPanel 자체 톤(bg-zinc-700 solid)
            // 유지 — 본문 카드 영역 안 primary 보조 컨트롤이라 툴바용 zinc-800/80 보다 한
            // 단계 도드라지는 게 의도. 패딩(px-3 py-1) 도 옆 rose-600 실행 버튼과 시각
            // 무게 균형을 위해 툴바 토글(px-2 py-0.5) 보다 큼.
            <button
              key={p.id}
              type="button"
              onClick={() => setPresetIdx(i)}
              aria-pressed={on}
              className={
                on
                  ? "rounded-full bg-zinc-700 px-3 py-1 font-medium text-zinc-50"
                  : "rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
              }
            >
              {p.label}
            </button>
          );
        })}
        {presetIdx === 2 && (
          <span className="ml-1 text-[11px] text-amber-400">
            ※ 30거래일 너머는 모델 학습 범위 밖 — 참고용
          </span>
        )}
      </div>

      {err && <div className="mb-3 text-xs text-red-400">에러: {err}</div>}

      {pred?.found ? (
        <div>
          <div className="mb-2 text-xs text-zinc-500">
            기준일 {pred.base_date} · 기준종가{" "}
            {pred.base_close != null ? pred.base_close.toLocaleString() : "-"}
          </div>
          <div className="max-h-60 overflow-y-auto">
            <table className="w-full text-left text-sm">
              <thead className="sticky top-0 bg-zinc-900/95 text-xs text-zinc-500">
                <tr>
                  <th className="py-1">+거래일</th>
                  <th>매칭일</th>
                  <th>방향</th>
                  <th>P(up/flat/down)</th>
                  <th>기대수익</th>
                  <th>예측 종가</th>
                  <th>q10~q90</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-800">
                {steps.map((s) => (
                  <tr key={s.horizon}>
                    <td className="py-2">+{s.horizon}</td>
                    <td className="text-xs text-zinc-400">{s.target_date}</td>
                    <td>
                      <span
                        className={
                          s.direction === "up"
                            ? "text-rose-400"
                            : s.direction === "down"
                              ? "text-sky-400"
                              : "text-zinc-300"
                        }
                      >
                        {s.direction}
                      </span>
                    </td>
                    <td className="text-xs text-zinc-300">
                      {fmtPct(s.prob_up)} / {fmtPct(s.prob_flat)} / {fmtPct(s.prob_down)}
                    </td>
                    <td>{fmtSignedPct(s.expected_return)}</td>
                    <td>{s.point_close != null ? s.point_close.toLocaleString() : "-"}</td>
                    <td className="text-xs text-zinc-400">
                      {s.ci_low != null ? s.ci_low.toLocaleString() : "-"} ~{" "}
                      {s.ci_high != null ? s.ci_high.toLocaleString() : "-"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <div className="text-xs text-zinc-500">
          아직 예측이 없습니다. <b>예상차트 보기</b> 를 누르면 선택한 기간의 예측 캔들이
          현재 차트에 옅은 색으로 이어 붙습니다.
        </div>
      )}
    </div>
  );
}

function fmtPct(v: number | null): string {
  if (v == null) return "-";
  return `${(v * 100).toFixed(0)}%`;
}

function fmtSignedPct(v: number | null): string {
  if (v == null) return "-";
  const pct = v * 100;
  const sign = pct >= 0 ? "+" : "";
  return `${sign}${pct.toFixed(2)}%`;
}