'use client';

import { useEffect, useMemo, useState } from 'react';
import { PlayerMatchupRadar } from '@/components/PlayerMatchupRadar';
import { PropValueCard } from '@/components/PropValueCard';
import {
  estimatePlayerPropProbability,
  type PlayerMetricProfile,
} from '@/lib/betting-utils';
import {
  calculatePlayerProps,
  type PlayerPropsResponse,
} from '@/lib/analytics-api';

type Metric = 'shots' | 'shots_on_target' | 'passes';

type RadarMetric = {
  攻擊: number;
  運球: number;
  組織: number;
  壓迫: number;
  對位完成: number;
  穩定度: number;
};

const metricLabelMap: Record<Metric, string> = {
  shots: '射門',
  shots_on_target: '射正',
  passes: '傳球',
};

export default function PropsPage() {
  const [playerName, setPlayerName] = useState('Kylian Mbappé');
  const [opponentName, setOpponentName] = useState('墨西哥');
  const [metric, setMetric] = useState<Metric>('shots');
  const [baselineMean, setBaselineMean] = useState(3.2);
  const [line, setLine] = useState(1.5);
  const [matchMinutes, setMatchMinutes] = useState(90);
  const [bookmakerOdds, setBookmakerOdds] = useState(2.15);
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [analysis, setAnalysis] = useState<PlayerPropsResponse | null>(null);
  const [radarMetric] = useState<RadarMetric>({
    攻擊: 72,
    運球: 68,
    組織: 74,
    壓迫: 61,
    對位完成: 66,
    穩定度: 70,
  });

  const profile = useMemo<PlayerMetricProfile>(() => ({
    playerId: playerName,
    metric,
    baselineMean,
    line,
    matchMinutes,
    teamAttackFactor: 1.15,
    opponentDefenceFactor: 0.92,
    weatherFatigueFactor: 1.02,
  }), [playerName, metric, baselineMean, line, matchMinutes]);

  const estimate = useMemo(() => estimatePlayerPropProbability(profile), [profile]);

  const fallback = useMemo(
    () =>
      ({
        metric,
        line,
        over_probability: estimate.overProbability,
        under_probability: estimate.underProbability,
        expected_count: estimate.expectedCount,
        p5: Number((estimate.expectedCount * 0.55).toFixed(2)),
        p50: Number((estimate.expectedCount * 1.05).toFixed(2)),
        p95: Number((estimate.expectedCount * 1.65).toFixed(2)),
        simulation_runs: 12000,
        edge: null,
        top_edge: false,
        bookmaker_over_odds: bookmakerOdds,
        implied_prob: 1 / bookmakerOdds,
      }) as PlayerPropsResponse,
    [metric, line, estimate, bookmakerOdds],
  );

  useEffect(() => {
    const signal = new AbortController();

    const runAnalysis = async () => {
      setLoading(true);
      setErrorMessage('');
      try {
        const result = await calculatePlayerProps({
          player_id: playerName,
          player_name: playerName,
          metric,
          baseline_mean: baselineMean,
          line,
          match_minutes: matchMinutes,
          team_attack_factor: 1.15,
          opponent_defence_factor: 0.92,
          weather_fatigue_factor: 1.02,
          bookmaker_over_odds: bookmakerOdds,
          simulations: 12000,
        });

        if (signal.signal.aborted) {
          return;
        }
        setAnalysis(result);
      } catch (error) {
        if (signal.signal.aborted) {
          return;
        }
        setErrorMessage(error instanceof Error ? error.message : '道具盤分析暫時無法使用');
        setAnalysis(fallback);
      } finally {
        if (!signal.signal.aborted) {
          setLoading(false);
        }
      }
    };

    runAnalysis();

    return () => {
      signal.abort();
    };
  }, [fallback, line, metric, baselineMean, bookmakerOdds, matchMinutes, playerName]);

  const current = analysis ?? fallback;
  const edgePercent = current.edge === null ? (current.over_probability - (current.implied_prob ?? 0)) * 100 : current.edge * 100;

  return (
    <div className="space-y-4">
      <h2 className="dot-matrix text-2xl text-[#7d2a15]">球員道具盤（Player Props）專業模組</h2>

      <section className="panel-glow rounded-2xl p-4">
        <h3 className="dot-matrix text-lg text-[#7d2a15]">道具盤參數</h3>
        <div className="mt-3 grid gap-3 md:grid-cols-2">
          <label className="text-sm text-[#7a5b46]">
            球員名稱
            <input
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              value={playerName}
              onChange={(event) => setPlayerName(event.target.value)}
            />
          </label>

          <label className="text-sm text-[#7a5b46]">
            對手球隊
            <input
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              value={opponentName}
              onChange={(event) => setOpponentName(event.target.value)}
            />
          </label>

          <label className="text-sm text-[#7a5b46]">
            道具類型
            <select
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              value={metric}
              onChange={(event) => setMetric(event.target.value as Metric)}
            >
              <option value="shots">射門</option>
              <option value="shots_on_target">射正</option>
              <option value="passes">傳球數</option>
            </select>
          </label>

          <label className="text-sm text-[#7a5b46]">
            基準基線（平均值）
            <input
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              type="number"
              step={0.1}
              value={baselineMean}
              onChange={(event) => setBaselineMean(Number(event.target.value))}
            />
          </label>

          <label className="text-sm text-[#7a5b46]">
            盤口 O/U 線
            <input
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              type="number"
              step={0.5}
              value={line}
              onChange={(event) => setLine(Number(event.target.value))}
            />
          </label>

          <label className="text-sm text-[#7a5b46]">
            莊家 Over 賠率
            <input
              className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
              type="number"
              step={0.01}
              value={bookmakerOdds}
              onChange={(event) => setBookmakerOdds(Number(event.target.value))}
            />
          </label>
        </div>
      </section>

      <section className="grid gap-4 lg:grid-cols-2">
        <PropValueCard
          playerName={playerName}
          metricLabel={metricLabelMap[metric]}
          line={current.line}
          overProbability={current.over_probability}
          impliedProb={current.implied_prob ?? 1 / bookmakerOdds}
          edgePercent={Number(edgePercent.toFixed(1))}
          topEdge={current.top_edge}
        />
        <div className="grid gap-3">
          <article className="panel-glow rounded-2xl p-4">
            <h3 className="dot-matrix text-lg text-[#7d2a15]">道具盤輸出</h3>
            <p className="mt-2 text-sm text-[#7a5b46]">預期數：{current.expected_count}</p>
            <p className="mt-1 text-sm text-[#7a5b46]">低位分位（P5）：{current.p5}</p>
            <p className="mt-1 text-sm text-[#7a5b46]">中位數（P50）：{current.p50}</p>
            <p className="mt-1 text-sm text-[#7a5b46]">高位分位（P95）：{current.p95}</p>
            <p className="mt-1 text-xs text-[#6f4f3c]">樣本模擬：{current.simulation_runs.toLocaleString()} 次</p>
            {loading ? <p className="mt-2 text-xs text-[#a16b4f]">更新道具盤模型中…</p> : null}
            {errorMessage ? <p className="mt-2 text-xs text-[#8c2f2f]">{errorMessage}</p> : null}
          </article>
          <article className="panel-glow rounded-2xl p-4">
            <h3 className="dot-matrix text-lg text-[#7d2a15]">模擬控制</h3>
            <label className="text-sm text-[#7a5b46]">
              參與分鐘
              <input
                className="mt-2 w-full rounded-lg border border-[#e0c6a8] bg-white/70 px-3 py-2"
                type="range"
                min={60}
                max={120}
                value={matchMinutes}
                onChange={(event) => setMatchMinutes(Number(event.target.value))}
              />
              <p className="text-xs text-[#7a5b46]">{matchMinutes} 分鐘</p>
            </label>
          </article>
        </div>
      </section>

      <PlayerMatchupRadar
        playerName={playerName}
        opponentName={opponentName}
        metrics={radarMetric}
      />
    </div>
  );
}