import React, { useEffect } from "react";

const Step4Environment = ({ data, updateData }) => {
  const toggleTerrain = (terrain) => {
    const current = data.terrain || [];
    const updated = current.includes(terrain)
      ? current.filter((t) => t !== terrain)
      : [...current, terrain];
    updateData({ terrain: updated });
  };

  // Автоматически определяем сезон из даты потери
  useEffect(() => {
    if (data.lost_time && !data.season) {
      const date = new Date(data.lost_time);
      const month = date.getMonth() + 1; // 1-12
      
      let season = 'лето';
      if (month >= 3 && month <= 5) season = 'весна';
      else if (month >= 6 && month <= 8) season = 'лето';
      else if (month >= 9 && month <= 11) season = 'осень';
      else season = 'зима'; // 12, 1, 2
      
      updateData({ season });
    }
  }, [data.lost_time]);

  const handleGetLocation = () => {
    if (!navigator.geolocation) {
      updateData({ gps_error: 'Геолокация не поддерживается вашим браузером' });
      return;
    }

    updateData({ gps_loading: true, gps_error: null });

    navigator.geolocation.getCurrentPosition(
      (position) => {
        updateData({
          tnp_lat: position.coords.latitude.toFixed(6),
          tnp_lon: position.coords.longitude.toFixed(6),
          gps_loading: false,
          gps_error: null
        });
      },
      (error) => {
        updateData({ gps_error: 'Ошибка получения координат: ' + error.message, gps_loading: false });
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0
      }
    );
  };

  return (
    <div className="form-step">
      <h2>Среда и местность</h2>
      
      {/* Сезон определяется автоматически, показываем только для информации */}
      {data.season && (
        <div className="form-group">
          <label>Сезон (определен автоматически)</label>
          <div style={{ padding: "12px", background: "#161b22", borderRadius: "6px", color: "#8b949e" }}>
            {data.season.charAt(0).toUpperCase() + data.season.slice(1)}
          </div>
        </div>
      )}

      <div className="form-group">
        <label>Температура (°C)</label>
        <input
          type="number"
          value={data.temperature || ""}
          onChange={(e) => updateData({ temperature: parseFloat(e.target.value) })}
          min="-40"
          max="40"
          step="1"
          placeholder="Например: 15"
        />
      </div>

      <div className="form-group">
        <label>Осадки</label>
        <div className="button-group">
          <button
            type="button"
            className={data.precipitation === "нет" ? "selected" : ""}
            onClick={() => updateData({ precipitation: "нет" })}
          >
            Нет
          </button>
          <button
            type="button"
            className={data.precipitation === "дождь" ? "selected" : ""}
            onClick={() => updateData({ precipitation: "дождь" })}
          >
            Дождь
          </button>
          <button
            type="button"
            className={data.precipitation === "снег" ? "selected" : ""}
            onClick={() => updateData({ precipitation: "снег" })}
          >
            Снег
          </button>
          <button
            type="button"
            className={data.precipitation === "туман" ? "selected" : ""}
            onClick={() => updateData({ precipitation: "туман" })}
          >
            Туман
          </button>
        </div>
      </div>

      <div className="form-group">
        <label>Видимость</label>
        <div className="button-group">
          <button
            type="button"
            className={data.visibility === "хорошая" ? "selected" : ""}
            onClick={() => updateData({ visibility: "хорошая" })}
          >
            Хорошая
          </button>
          <button
            type="button"
            className={data.visibility === "средняя" ? "selected" : ""}
            onClick={() => updateData({ visibility: "средняя" })}
          >
            Средняя
          </button>
          <button
            type="button"
            className={data.visibility === "плохая" ? "selected" : ""}
            onClick={() => updateData({ visibility: "плохая" })}
          >
            Плохая
          </button>
        </div>
      </div>

      <div className="form-group">
        <label>Типы местности (можно выбрать несколько) *</label>
        <div className="checkbox-group">
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("лес")}
              onChange={() => toggleTerrain("лес")}
            />
            Лес
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("поле")}
              onChange={() => toggleTerrain("поле")}
            />
            Поле
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("болото")}
              onChange={() => toggleTerrain("болото")}
            />
            Болото
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("водоём")}
              onChange={() => toggleTerrain("водоём")}
            />
            Водоём (река, озеро)
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("населённый_пункт")}
              onChange={() => toggleTerrain("населённый_пункт")}
            />
            Населённый пункт
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("дороги")}
              onChange={() => toggleTerrain("дороги")}
            />
            Дороги / тропы
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("заброшенные_здания")}
              onChange={() => toggleTerrain("заброшенные_здания")}
            />
            Заброшенные здания
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("сельхоз")}
              onChange={() => toggleTerrain("сельхоз")}
            />
            Сельхоз угодья
          </label>
          <label className="checkbox-label">
            <input
              type="checkbox"
              checked={data.terrain?.includes("овраги")}
              onChange={() => toggleTerrain("овраги")}
            />
            Овраги / ямы
          </label>
        </div>
      </div>

      <div className="form-group">
        <label>Координаты точки потери (GPS) *</label>
        <div style={{ marginBottom: "12px" }}>
          <button
            type="button"
            className="gps-button"
            onClick={handleGetLocation}
            disabled={data.gps_loading}
          >
            {data.gps_loading ? "Получение координат..." : "📍 Получить текущие координаты"}
          </button>
        </div>
        <div style={{ display: "flex", gap: "12px" }}>
          <div style={{ flex: 1 }}>
            <label style={{ fontSize: "12px", color: "#8b949e" }}>Широта</label>
            <input
              type="number"
              value={data.tnp_lat || ""}
              onChange={(e) => updateData({ tnp_lat: e.target.value })}
              placeholder="53.9000"
              step="0.000001"
            />
          </div>
          <div style={{ flex: 1 }}>
            <label style={{ fontSize: "12px", color: "#8b949e" }}>Долгота</label>
            <input
              type="number"
              value={data.tnp_lon || ""}
              onChange={(e) => updateData({ tnp_lon: e.target.value })}
              placeholder="27.5667"
              step="0.000001"
            />
          </div>
        </div>
      </div>

      <div className="form-group">
        <label>Или введите адрес</label>
        <input
          type="text"
          value={data.tnp_address || ""}
          onChange={(e) => updateData({ tnp_address: e.target.value })}
          placeholder="Минск, ул. Ленина 10"
        />
        <p style={{ fontSize: "12px", color: "#8b949e", marginTop: "4px" }}>
          Адрес будет преобразован в координаты автоматически
        </p>
      </div>
    </div>
  );
};

export default Step4Environment;