import { useState } from 'react';

interface WeatherData {
  stationName: string;
  location: { lat: number; lon: number };
  currentTime: string;
  wind: {
    speed: number;
    direction: number;
    directionLabel: string;
    speed_1k: number;
    speed_3k: number;
  };
  wave: {
    height: number;
    maxHeight: number;
    period: number;
    direction: string;
  };
  temperature: {
    current: number;
    feelsLike: number;
  };
  pressure: number;
  visibility: number;
  salinity: number;
  astronomy?: {
    sunrise: string;
    sunset: string;
    moonrise: string;
    moonset: string;
    moonPhase: string;
    tidalRange: number;
  };
  alert?: string;
  forecast: WeatherForecast[];
}

interface WeatherForecast {
  time: string;
  hour: string;
  icon: string;
  temperature: number;
  windSpeed: number;
}

interface WeatherRightPanelProps {
  weatherData: WeatherData | null;
}

/** 풍속 텍스트 색상 (2단계 — danger | accent) */
function windTextColor(speed: number): string {
  return speed >= 10 ? 'var(--color-danger)' : 'var(--color-accent)';
}

/** 파고 텍스트 색상 (2단계 — danger | accent) */
function waveTextColor(height: number): string {
  return height >= 2 ? 'var(--color-danger)' : 'var(--color-accent)';
}

/** 풍향 텍스트 */
function windDirText(deg: number): string {
  const dirs = [
    'N',
    'NNE',
    'NE',
    'ENE',
    'E',
    'ESE',
    'SE',
    'SSE',
    'S',
    'SSW',
    'SW',
    'WSW',
    'W',
    'WNW',
    'NW',
    'NNW',
  ];
  return dirs[Math.round(deg / 22.5) % 16];
}

export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
  const [collapsed, setCollapsed] = useState(false);

  if (collapsed) {
    return (
      <div className="flex flex-col bg-bg-surface border-l border-stroke w-8 shrink-0">
        <button
          onClick={() => setCollapsed(false)}
          className="flex-1 flex flex-col items-center justify-start pt-3 gap-1 text-fg-sub hover:text-fg transition-colors"
          title="패널 펼치기"
        >
          <span className="text-heading-2 leading-none">‹</span>
          <span className="text-subtitle text-fg-disabled [writing-mode:vertical-rl]">펼치기</span>
        </button>
      </div>
    );
  }

  if (!weatherData) {
    return (
      <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
        <div className="flex items-center justify-between px-4 py-3 border-b border-stroke bg-bg-elevated">
          <p className="text-fg-disabled text-title-4 font-korean">
            지도에서 해양 지점을 클릭하세요
          </p>
          <button
            onClick={() => setCollapsed(true)}
            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2"
            title="패널 접기"
          >
            <span className="text-subtitle text-fg-disabled">접기</span>
            <span className="text-heading-2 leading-none">›</span>
          </button>
        </div>
      </div>
    );
  }

  const { wind, wave, temperature, pressure, visibility, salinity, astronomy, alert, forecast } =
    weatherData;
  const wSpd = wind.speed;
  const wHgt = wave.height;
  const wTemp = temperature.current;
  const windDir = windDirText(wind.direction);

  return (
    <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
      {/* 헤더 */}
      <div className="px-4 py-3 border-b border-stroke bg-bg-elevated">
        <div className="flex items-start justify-between">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <span className="text-title-4 font-bold text-color-accent font-korean truncate">
                📍 {weatherData.stationName}
              </span>
              <span className="px-1.5 py-px text-label-2 rounded bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-color-accent font-bold shrink-0">
                기상예보관
              </span>
            </div>
            <p className="text-label-2 text-fg-disabled font-mono">
              {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '}
              {weatherData.currentTime}
            </p>
          </div>
          <button
            onClick={() => setCollapsed(true)}
            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2 mt-0.5"
            title="패널 접기"
          >
            <span className="text-subtitle text-fg-disabled">접기</span>
            <span className="text-heading-2 leading-none">›</span>
          </button>
        </div>
      </div>

      {/* 스크롤 콘텐츠 */}
      <div
        className="flex-1 overflow-auto"
        style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--stroke-light) transparent' }}
      >
        {/* ── 핵심 지표 3칸 카드 ── */}
        <div className="grid grid-cols-3 gap-1 px-3 py-2.5">
          <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
            <div className="text-[20px] font-bold font-mono" style={{ color: windTextColor(wSpd) }}>
              {wSpd.toFixed(1)}
            </div>
            <div className="text-label-2 text-fg-disabled font-korean">풍속 (m/s)</div>
          </div>
          <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
            <div className="text-[20px] font-bold font-mono" style={{ color: waveTextColor(wHgt) }}>
              {wHgt.toFixed(1)}
            </div>
            <div className="text-label-2 text-fg-disabled font-korean">파고 (m)</div>
          </div>
          <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
            <div className="text-[20px] font-bold font-mono text-color-accent">
              {wTemp.toFixed(1)}
            </div>
            <div className="text-label-2 text-fg-disabled font-korean">수온 (°C)</div>
          </div>
        </div>

        {/* ── 바람 상세 ── */}
        <div className="px-3 py-2 border-b border-stroke">
          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌬️ 바람 현황</div>
          <div className="flex items-center gap-3 mb-2">
            {/* 풍향 컴파스 */}
            <div className="relative w-[50px] h-[50px] shrink-0">
              <svg viewBox="0 0 50 50" className="w-full h-full">
                <circle
                  cx="25"
                  cy="25"
                  r="22"
                  fill="none"
                  stroke="var(--stroke-default)"
                  strokeWidth="1"
                />
                <circle
                  cx="25"
                  cy="25"
                  r="16"
                  fill="none"
                  stroke="var(--stroke-default)"
                  strokeWidth="0.5"
                  strokeDasharray="2 2"
                />
                {['N', 'E', 'S', 'W'].map((d, i) => {
                  const angle = i * 90;
                  const rad = ((angle - 90) * Math.PI) / 180;
                  const x = 25 + 20 * Math.cos(rad);
                  const y = 25 + 20 * Math.sin(rad);
                  return (
                    <text
                      key={d}
                      x={x}
                      y={y}
                      textAnchor="middle"
                      dominantBaseline="central"
                      fill="var(--fg-disabled)"
                      fontSize="6"
                      fontWeight="bold"
                    >
                      {d}
                    </text>
                  );
                })}
                {/* 풍향 화살표 */}
                <line
                  x1="25"
                  y1="25"
                  x2={25 + 14 * Math.sin((wind.direction * Math.PI) / 180)}
                  y2={25 - 14 * Math.cos((wind.direction * Math.PI) / 180)}
                  stroke="var(--color-accent)"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
                <circle cx="25" cy="25" r="3" fill="var(--color-accent)" />
              </svg>
            </div>
            <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1.5 text-label-2">
              <div className="flex justify-between">
                <span className="text-fg-disabled">풍향</span>
                <span className="text-fg font-mono font-bold text-title-4">
                  {windDir} {wind.direction}°
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-fg-disabled">기압</span>
                <span className="text-fg font-mono text-title-4">{pressure} hPa</span>
              </div>
              <div className="flex justify-between">
                <span className="text-fg-disabled">1k 최고</span>
                <span className="font-mono text-title-4 text-fg">
                  {Number(wind.speed_1k).toFixed(1)}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-fg-disabled">3k 평균</span>
                <span className="font-mono text-title-4 text-fg">
                  {Number(wind.speed_3k).toFixed(1)}
                </span>
              </div>
              <div className="col-span-2 flex justify-between">
                <span className="text-fg-disabled">가시거리</span>
                <span className="text-fg font-mono text-title-4">{visibility} km</span>
              </div>
            </div>
          </div>
          {/* 풍속 게이지 바 */}
          <div className="flex items-center gap-2">
            <div className="flex-1 h-[5px] bg-bg-card rounded-full overflow-hidden">
              <div
                className="h-full rounded-full transition-all bg-color-accent"
                style={{ width: `${Math.min((wSpd / 20) * 100, 100)}%` }}
              />
            </div>
            <span className="text-label-2 font-mono text-fg-disabled shrink-0">
              {wSpd.toFixed(1)}/20
            </span>
          </div>
        </div>

        {/* ── 파도 상세 ── */}
        <div className="px-3 py-2 border-b border-stroke">
          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌊 파도</div>
          <div className="grid grid-cols-4 gap-1">
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">{wHgt.toFixed(1)}m</div>
              <div className="text-caption text-fg-disabled">유의파고</div>
            </div>
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">
                {wave.maxHeight.toFixed(1)}m
              </div>
              <div className="text-caption text-fg-disabled">최고파고</div>
            </div>
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">{wave.period}s</div>
              <div className="text-caption text-fg-disabled">주기</div>
            </div>
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">{wave.direction}</div>
              <div className="text-caption text-fg-disabled">파향</div>
            </div>
          </div>
          {/* 파고 게이지 바 */}
          <div className="flex items-center gap-2 mt-1.5">
            <div className="flex-1 h-[5px] bg-bg-card rounded-full overflow-hidden">
              <div
                className="h-full rounded-full transition-all"
                style={{
                  width: `${Math.min((wHgt / 5) * 100, 100)}%`,
                  background: 'var(--color-accent)',
                }}
              />
            </div>
            <span className="text-label-2 font-mono text-fg-disabled shrink-0">
              {wHgt.toFixed(1)}/5m
            </span>
          </div>
        </div>

        {/* ── 수온/공기 ── */}
        <div className="px-3 py-2 border-b border-stroke">
          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌡️ 수온 · 공기</div>
          <div className="grid grid-cols-3 gap-1">
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">{wTemp.toFixed(1)}°</div>
              <div className="text-caption text-fg-disabled">수온</div>
            </div>
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">
                {temperature.feelsLike.toFixed(1)}°
              </div>
              <div className="text-caption text-fg-disabled">기온</div>
            </div>
            <div className="text-center py-2 bg-bg-base border border-stroke rounded">
              <div className="text-title-3 font-bold font-mono text-fg">{salinity.toFixed(1)}</div>
              <div className="text-caption text-fg-disabled">염분(PSU)</div>
            </div>
          </div>
        </div>

        {/* ── 시간별 예보 ── */}
        <div className="px-3 py-2 border-b border-stroke">
          <div className="text-label-2 text-fg-disabled font-korean mb-2">⏰ 시간별 예보</div>
          <div className="grid grid-cols-5 gap-1">
            {forecast.map((f, i) => (
              <div
                key={i}
                className="flex flex-col items-center py-2 px-1 bg-bg-base border border-stroke rounded"
              >
                <span className="text-label-2 text-fg-disabled mb-0.5">{f.hour}</span>
                <span className="text-lg mb-0.5">{f.icon}</span>
                <span className="text-title-4 font-bold text-fg">{f.temperature}°</span>
                <span className="text-label-2 text-fg-disabled font-mono">{f.windSpeed}</span>
              </div>
            ))}
          </div>
        </div>

        {/* ── 천문/조석 ── */}
        {astronomy && (
          <div className="px-3 py-2 border-b border-stroke">
            <div className="text-label-2 text-fg-disabled font-korean mb-2">☀️ 천문 · 조석</div>
            <div className="grid grid-cols-4 gap-1">
              {[
                { icon: '🌅', label: '일출', value: astronomy.sunrise },
                { icon: '🌄', label: '일몰', value: astronomy.sunset },
                { icon: '🌙', label: '월출', value: astronomy.moonrise },
                { icon: '🌜', label: '월몰', value: astronomy.moonset },
              ].map((item, i) => (
                <div key={i} className="text-center py-2 bg-bg-base border border-stroke rounded">
                  <div className="text-base mb-0.5">{item.icon}</div>
                  <div className="text-caption text-fg-disabled">{item.label}</div>
                  <div className="text-title-4 font-bold font-mono text-fg">{item.value}</div>
                </div>
              ))}
            </div>
            <div className="flex items-center gap-2 mt-1.5 px-2 py-1 bg-bg-base border border-stroke rounded text-label-2">
              <span className="text-body-2">🌓</span>
              <span className="text-fg-disabled">{astronomy.moonPhase}</span>
              <span className="ml-auto text-fg font-mono">조차 {astronomy.tidalRange}m</span>
            </div>
          </div>
        )}

        {/* ── 날씨 특보 ── */}
        {alert && (
          <div className="px-3 py-2">
            <div className="text-label-2 text-fg-disabled font-korean mb-2">🚨 날씨 특보</div>
            <div
              className="px-2.5 py-2 rounded border"
              style={{
                background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
                borderColor: 'color-mix(in srgb, var(--color-danger) 20%, transparent)',
              }}
            >
              <div className="flex items-center gap-2 text-label-2">
                <span
                  className="px-1.5 py-px rounded text-label-2 font-bold"
                  style={{
                    background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
                    color: 'var(--color-danger)',
                  }}
                >
                  주의
                </span>
                <span className="text-fg font-korean">{alert}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
