import React from 'react';
import type { PriceStats } from '../utils/calculations';

interface StatsPanelProps {
  stats: PriceStats | null;
  symbol: string;
  onClose: () => void;
}

function fmt(n: number, digits = 2): string {
  if (!isFinite(n)) return '—';
  return n.toLocaleString('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits });
}

function fmtVol(n: number): string {
  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
  if (n >= 1e3) return (n / 1e3).toFixed(2) + 'K';
  return n.toFixed(0);
}

const StatRow: React.FC<{ label: string; value: string; highlight?: 'up' | 'down' | 'neutral' }> = ({ label, value, highlight }) => (
  <div className="stat-row">
    <span className="stat-label">{label}</span>
    <span className={`stat-value ${highlight ?? ''}`}>{value}</span>
  </div>
);

const StatsPanel: React.FC<StatsPanelProps> = ({ stats, symbol, onClose }) => {
  if (!stats) return null;
  const trendColor = stats.trend === 'up' ? 'up' : stats.trend === 'down' ? 'down' : 'neutral';
  const changeColor = stats.change >= 0 ? 'up' : 'down';

  return (
    <div className="stats-panel">
      <div className="stats-header">
        <span className="stats-title">📊 {symbol} 통계</span>
        <button className="stats-close" onClick={onClose}>✕</button>
      </div>
      <div className="stats-body">
        <div className="stats-section">
          <div className="stats-section-title">가격</div>
          <StatRow label="현재가" value={fmt(stats.current)} />
          <StatRow label="변동" value={`${stats.change >= 0 ? '+' : ''}${fmt(stats.change)} (${fmt(stats.changePct)}%)`} highlight={changeColor} />
          <StatRow label="52주 고점" value={fmt(stats.high52w)} highlight="up" />
          <StatRow label="52주 저점" value={fmt(stats.low52w)} highlight="down" />
          <StatRow label="평균 일일 범위" value={fmt(stats.avgRange)} />
        </div>
        <div className="stats-section">
          <div className="stats-section-title">추세 & 강도</div>
          <StatRow label="추세" value={stats.trend === 'up' ? '상승 ▲' : stats.trend === 'down' ? '하락 ▼' : '횡보 ▶'} highlight={trendColor} />
          <StatRow label="RSI(14)" value={fmt(stats.rrsi14, 1)} highlight={stats.rrsi14 > 70 ? 'down' : stats.rrsi14 < 30 ? 'up' : 'neutral'} />
          <StatRow label="변동성(연)" value={`${fmt(stats.volatility, 1)}%`} />
        </div>
        <div className="stats-section">
          <div className="stats-section-title">피벗 포인트</div>
          <StatRow label="저항2" value={fmt(stats.resistance2)} highlight="down" />
          <StatRow label="저항1" value={fmt(stats.resistance1)} highlight="down" />
          <StatRow label="피벗(P)" value={fmt(stats.pivotP)} highlight="neutral" />
          <StatRow label="지지1"  value={fmt(stats.support1)} highlight="up" />
          <StatRow label="지지2"  value={fmt(stats.support2)} highlight="up" />
        </div>
        <div className="stats-section">
          <div className="stats-section-title">거래량</div>
          <StatRow label="평균 거래량" value={fmtVol(stats.avgVol)} />
        </div>
      </div>
    </div>
  );
};

export default StatsPanel;