stock_chart_site/web/app/[code]/page.tsx

"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { MetricsPanel } from "../../components/MetricsPanel";
import { NewsList } from "../../components/NewsList";
import { PeriodTabs, periodSpec, type Period } from "../../components/PeriodTabs";
import { PredictionPanel } from "../../components/PredictionPanel";
import { PriceHero } from "../../components/PriceHero";
import { StockChart } from "../../components/StockChart";
import { SymbolSidebar } from "../../components/SymbolSidebar";
import { api, type ChartPayload, type LatestPredictionResponse } from "../../lib/api";

export default function CodePage({ params }: { params: { code: string } }) {
  const { code } = params;
  const [chart, setChart] = useState<ChartPayload | null>(null);
  const [prediction, setPrediction] = useState<LatestPredictionResponse | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [period, setPeriod] = useState<Period>("3M");

  const spec = periodSpec(period);
  const isIntraday = spec.interval === "10m";

  useEffect(() => {
    let alive = true;
    setErr(null);
    setChart(null);

    const load = () => {
      api
        .getChart(code, spec.days, spec.interval)
        .then((c) => {
          if (alive) setChart(c);
        })
        .catch((e) => {
          if (alive) setErr(e instanceof Error ? e.message : String(e));
        });
    };
    load();

    // 1일(10분봉) 모드만 60s 폴링 — 백엔드가 10분 내면 DB 만 읽음.
    if (isIntraday) {
      const h = window.setInterval(load, 60_000);
      return () => {
        alive = false;
        window.clearInterval(h);
      };
    }
    return () => {
      alive = false;
    };
  }, [code, spec.days, spec.interval, isIntraday]);

  useEffect(() => {
    let alive = true;
    api
      .latestPrediction(code)
      .then((r) => {
        if (alive && r.found) setPrediction(r);
      })
      .catch(() => {
        // 예측 이력 없음 — 무시
      });
    return () => {
      alive = false;
    };
  }, [code]);

  // 현재가/전일가 + 헤더 sparkline 시리즈 — ohlcv 끝부분에서 산출.
  const { current, prev, asOf, sparkSeries } = useMemo(() => {
    if (!chart || !chart.ohlcv.length)
      return { current: null, prev: null, asOf: null, sparkSeries: [] as number[] };
    const valid = chart.ohlcv.filter((p) => p.close != null);
    if (!valid.length)
      return { current: null, prev: null, asOf: null, sparkSeries: [] as number[] };
    const last = valid[valid.length - 1];
    const prevPt = valid.length >= 2 ? valid[valid.length - 2] : null;
    // 최근 30개 종가 (없으면 가용 전체).
    const recent = valid.slice(-30).map((p) => p.close as number);
    return {
      current: last.close,
      prev: prevPt?.close ?? null,
      asOf: last.date,
      sparkSeries: recent,
    };
  }, [chart]);

  return (
    <main className="mx-auto max-w-5xl px-6 py-8">
      <div className="mb-4 flex items-center justify-between gap-3">
        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
          ← 검색
        </Link>
        <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
      </div>

      {err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}

      {chart && (
        <>
          <PriceHero
            name={chart.name}
            code={chart.code}
            market={chart.market}
            current={current}
            prev={prev}
            asOf={asOf}
            series={sparkSeries}
          />
          <div className="grid gap-6 lg:grid-cols-[1fr_280px]">
            <div>
              <StockChart chart={chart} prediction={prediction} />
              {isIntraday && chart.intraday_status && (
                <div className="mt-2 text-right text-[11px] text-zinc-500">
                  실시간 10분봉 · 60초 갱신 · [{chart.intraday_status}]
                </div>
              )}
              <div className="mt-6">
                <PredictionPanel code={code} initial={prediction} onResult={setPrediction} />
              </div>
            </div>
            <SymbolSidebar code={code} />
          </div>
          <div className="mt-6 grid gap-6 md:grid-cols-2">
            <MetricsPanel code={code} />
            <NewsList code={code} />
          </div>
        </>
      )}
    </main>
  );
}