"use client";

import type { SeasonalWeather, SeasonStats } from "@/types/site-finder";

interface Props {
  seasonal: SeasonalWeather | null | undefined;
}

const SEASON_CONFIG: Array<{
  key: keyof SeasonalWeather["seasons"];
  label: string;
  bg: string;
  color: string;
}> = [
  { key: "winter", label: "Зима", bg: "#dbeafe", color: "#1e40af" },
  { key: "spring", label: "Весна", bg: "#dcfce7", color: "#15803d" },
  { key: "summer", label: "Лето", bg: "#fef3c7", color: "#92400e" },
  { key: "autumn", label: "Осень", bg: "#fed7aa", color: "#c2410c" },
];

function SeasonCard({
  label,
  bg,
  color,
  stats,
}: {
  label: string;
  bg: string;
  color: string;
  stats: SeasonStats;
}) {
  return (
    <div
      style={{
        borderRadius: 10,
        padding: "12px 14px",
        background: bg,
        display: "flex",
        flexDirection: "column",
        gap: 6,
        flex: "1 1 0",
        minWidth: 120,
      }}
    >
      <div style={{ fontSize: 13, fontWeight: 700, color }}>{label}</div>
      <div style={{ fontSize: 15, fontWeight: 700, color: "#111827" }}>
        {stats.avg_t_min_c}…{stats.avg_t_max_c}°C
      </div>
      <div style={{ fontSize: 11, color: "#6b7280" }}>
        (макс ↓{stats.min_t_c} / ↑{stats.max_t_c}°C)
      </div>
      <div style={{ fontSize: 12, color: "#374151" }}>
        {stats.total_precip_mm} мм осадков
      </div>
    </div>
  );
}

export function SeasonalWeatherBlock({ seasonal }: Props) {
  if (!seasonal) {
    return (
      <div
        style={{
          borderRadius: 10,
          padding: "14px 16px",
          background: "#f3f4f6",
          display: "flex",
          flexDirection: "column",
          gap: 6,
        }}
      >
        <div style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>
          Климат (нормали)
        </div>
        <div style={{ fontSize: 13, color: "#9ca3af" }}>
          Климат-данные недоступны
        </div>
      </div>
    );
  }

  return (
    <div
      style={{
        borderRadius: 10,
        padding: "14px 16px",
        background: "#fafafa",
        border: "1px solid #e5e7eb",
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      {/* Header */}
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          gap: 8,
          flexWrap: "wrap",
        }}
      >
        <div style={{ fontSize: 13, fontWeight: 700, color: "#374151" }}>
          Климат (нормали)
        </div>
        <div style={{ fontSize: 11, color: "#9ca3af" }}>{seasonal.period}</div>
      </div>

      {/* Season cards */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {SEASON_CONFIG.map(({ key, label, bg, color }) => {
          const stats = seasonal.seasons[key];
          if (!stats) {
            return (
              <div
                key={key}
                style={{
                  borderRadius: 10,
                  padding: "12px 14px",
                  background: "#f3f4f6",
                  flex: "1 1 0",
                  minWidth: 120,
                }}
              >
                <div
                  style={{ fontSize: 13, fontWeight: 700, color: "#9ca3af" }}
                >
                  {label}
                </div>
                <div style={{ fontSize: 12, color: "#9ca3af", marginTop: 4 }}>
                  Нет данных
                </div>
              </div>
            );
          }
          return (
            <SeasonCard
              key={key}
              label={label}
              bg={bg}
              color={color}
              stats={stats}
            />
          );
        })}
      </div>

      {/* Footer */}
      <div style={{ fontSize: 11, color: "#9ca3af" }}>
        {seasonal.source} · {seasonal.model}
      </div>
    </div>
  );
}