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

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);

  async function runPredict() {
    setLoading(true);
    setErr(null);
    try {
      const r = await api.predict(code);
      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>

      {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)}%`;
}