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,
  };
}

const HORIZON_PRESETS: { label: string; value: number[] }[] = [
  { label: "단기 (1·3·5)", value: [1, 3, 5] },
  { label: "중기 (1·5·10)", value: [1, 5, 10] },
  { label: "장기 (5·10·20)", value: [5, 10, 20] },
];

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(0);
  const [customRaw, setCustomRaw] = useState("");
  const [useCustom, setUseCustom] = useState(false);

  function effectiveHorizons(): number[] {
    if (useCustom) {
      // 백엔드 predict.py 가 1~30 만 허용 (모델 학습/검증 범위와 일치).
      // 프론트에서 동일 cap 으로 끊어서 400 안 나게 한다.
      const parsed = customRaw
        .split(",")
        .map((s) => Number(s.trim()))
        .filter((n) => Number.isFinite(n) && n >= 1 && n <= 30);
      if (parsed.length > 0) return Array.from(new Set(parsed)).sort((a, b) => a - b);
    }
    return HORIZON_PRESETS[presetIdx].value;
  }

  async function runPredict() {
    setLoading(true);
    setErr(null);
    try {
      const horizons = effectiveHorizons();
      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">
        <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-emerald-700 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-600 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>
        {HORIZON_PRESETS.map((p, i) => (
          <button
            key={p.label}
            onClick={() => {
              setUseCustom(false);
              setPresetIdx(i);
            }}
            className={
              !useCustom && presetIdx === i
                ? "rounded-full bg-emerald-700 px-3 py-1 text-white"
                : "rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
            }
          >
            {p.label}
          </button>
        ))}
        <label
          className={
            useCustom
              ? "flex items-center gap-1 rounded-full bg-emerald-700 px-3 py-1 text-white"
              : "flex items-center gap-1 rounded-full border border-zinc-700 px-3 py-1 text-zinc-300 hover:border-zinc-500"
          }
        >
          <input
            type="checkbox"
            checked={useCustom}
            onChange={(e) => setUseCustom(e.target.checked)}
            className="h-3 w-3"
          />
          직접
          <input
            type="text"
            placeholder="1~30, 예: 1,2,3,7"
            value={customRaw}
            onChange={(e) => setCustomRaw(e.target.value)}
            onFocus={() => setUseCustom(true)}
            className="ml-1 w-28 rounded border border-zinc-700 bg-zinc-900 px-1 py-0.5 text-xs text-zinc-100"
          />
        </label>
      </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>
          <table className="w-full text-left text-sm">
            <thead className="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-emerald-400"
                          : s.direction === "down"
                            ? "text-red-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 className="text-xs text-zinc-500">
          아직 예측이 없습니다. <b>예상차트 보기</b> 버튼을 누르면 1·3·5거래일 후 예측을 생성하고
          차트에 점선으로 이어 붙입니다.
        </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)}%`;
}