/* Elevate — Tweaks app
   Overrides:
     - Day of week label (Mon..Sun, or Auto)
     - Season (Spring/Summer/Autumn/Winter, or Auto)
     - Coordinates string shown after "Waregem"
   Persists via __edit_mode_set_keys (EDITMODE block in this file). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "day": "auto",
  "season": "auto",
  "lat": 50.8956,
  "lon": 3.4239,
  "coordFormat": "decimal"
}/*EDITMODE-END*/;

const DAYS = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

function autoSeason(d) {
  const m = d.getMonth() + 1, day = d.getDate();
  if ((m === 3 && day >= 20) || m === 4 || m === 5 || (m === 6 && day < 21)) return 'spring';
  if ((m === 6 && day >= 21) || m === 7 || m === 8 || (m === 9 && day < 23)) return 'summer';
  if ((m === 9 && day >= 23) || m === 10 || m === 11 || (m === 12 && day < 21)) return 'autumn';
  return 'winter';
}

function fmtCoords(lat, lon, format) {
  const ns = lat >= 0 ? 'N' : 'S';
  const ew = lon >= 0 ? 'E' : 'W';
  const aLat = Math.abs(lat), aLon = Math.abs(lon);
  if (format === 'dms') {
    const toDms = (v) => {
      const deg = Math.floor(v);
      const minF = (v - deg) * 60;
      const min = Math.floor(minF);
      const sec = ((minF - min) * 60).toFixed(1);
      return `${deg}°${String(min).padStart(2,'0')}′${sec}″`;
    };
    return `${toDms(aLat)} ${ns}, ${toDms(aLon)} ${ew}`;
  }
  if (format === 'short') {
    return `${aLat.toFixed(2)}° ${ns}, ${aLon.toFixed(2)}° ${ew}`;
  }
  return `${aLat.toFixed(4)}° ${ns}, ${aLon.toFixed(4)}° ${ew}`;
}

function applyTweaks(t) {
  const dayEl = document.querySelector('[data-scene-day]');
  const seasonEl = document.querySelector('[data-scene-season]');
  const coordsEl = document.querySelector('[data-scene-coords]');

  const now = new Date();
  if (dayEl) {
    dayEl.textContent = t.day === 'auto' ? DAYS[now.getDay()] : DAYS[Number(t.day)];
  }
  if (seasonEl) {
    const season = t.season === 'auto' ? autoSeason(now) : t.season;
    seasonEl.textContent = season.charAt(0).toUpperCase() + season.slice(1);
    // Notify scene engine if available
    if (window.__sceneSetSeason) {
      window.__sceneSetSeason(t.season === 'auto' ? null : season);
    }
  }
  if (coordsEl) {
    coordsEl.textContent = fmtCoords(t.lat, t.lon, t.coordFormat);
  }
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero context" />

      <TweakSelect
        label="Day of week"
        value={String(t.day)}
        options={[
          { value: 'auto', label: 'Auto (today)' },
          { value: '1', label: 'Monday' },
          { value: '2', label: 'Tuesday' },
          { value: '3', label: 'Wednesday' },
          { value: '4', label: 'Thursday' },
          { value: '5', label: 'Friday' },
          { value: '6', label: 'Saturday' },
          { value: '0', label: 'Sunday' },
        ]}
        onChange={(v) => setTweak('day', v)}
      />

      <TweakSelect
        label="Season"
        value={t.season}
        options={[
          { value: 'auto', label: 'Auto (now)' },
          { value: 'spring', label: 'Spring' },
          { value: 'summer', label: 'Summer' },
          { value: 'autumn', label: 'Autumn' },
          { value: 'winter', label: 'Winter' },
        ]}
        onChange={(v) => setTweak('season', v)}
      />

      <TweakSection label="Office coordinates" />

      <TweakNumber
        label="Latitude"
        value={t.lat}
        min={-90} max={90} step={0.0001} unit="°"
        onChange={(v) => setTweak('lat', v)}
      />
      <TweakNumber
        label="Longitude"
        value={t.lon}
        min={-180} max={180} step={0.0001} unit="°"
        onChange={(v) => setTweak('lon', v)}
      />
      <TweakSelect
        label="Format"
        value={t.coordFormat}
        options={[
          { value: 'decimal', label: 'Decimal (50.8956° N)' },
          { value: 'short', label: 'Short (50.90° N)' },
          { value: 'dms', label: 'DMS (50°53′44″ N)' },
        ]}
        onChange={(v) => setTweak('coordFormat', v)}
      />
      <TweakButton
        label="Reset to Sint-Jansstraat 6, Waregem"
        secondary
        onClick={() => setTweak({ lat: 50.8956, lon: 3.4239, coordFormat: 'decimal' })}
      />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<App />);

// Apply once on load even before tweaks panel opens, so default values render.
document.addEventListener('DOMContentLoaded', () => applyTweaks(TWEAK_DEFAULTS));