from __future__ import annotations

import json
from dataclasses import dataclass
from datetime import datetime

from gibil.classes.models import WeatherForecastPoint, WeatherResolvedTruth


@dataclass(frozen=True)
class WeatherDisplayDataset:
    forecast_points: list[WeatherForecastPoint]
    resolved_truth: list[WeatherResolvedTruth]


class WeatherDisplay:
    """Renders weather source data for the Astrape web UI."""

    def render(self) -> str:
        return """
        <section class="panel weather-panel" data-module="weather-display">
          <div class="panel-heading">
            <div>
              <h2>Weather</h2>
              <p>External forecast history</p>
            </div>
            <div class="control-row">
              <label>
                Variable
                <select id="weather-variable">
                  <option value="temperature_c">Temperature</option>
                  <option value="shortwave_radiation_w_m2">Solar radiation</option>
                </select>
              </label>
              <div class="legend-control">
                <div class="legend-title">Horizons</div>
                <div id="weather-horizons" class="horizon-options"></div>
                <div class="horizon-option">
                  <span class="legend-swatch truth-swatch"></span>
                  <span>Resolved truth</span>
                </div>
              </div>
            </div>
          </div>
          <div class="chart-shell">
            <canvas id="weather-chart" width="1100" height="420"></canvas>
          </div>
        </section>
        <script>
        window.astrapeModules = window.astrapeModules || {};
        window.astrapeModules.weatherDisplay = (() => {
          const palette = ["#60a5fa", "#34d399", "#fbbf24", "#a78bfa", "#fb7185", "#22d3ee"];
          const defaultSlots = [
            { enabled: true, horizon: 4 },
            { enabled: true, horizon: 8 },
            { enabled: true, horizon: 12 },
            { enabled: false, horizon: 16 },
            { enabled: false, horizon: 24 },
            { enabled: false, horizon: 36 },
          ];

          function init() {
            const variable = document.getElementById("weather-variable");
            variable.addEventListener("change", render);
            buildHorizonControls();
            refresh();
            setInterval(refresh, 5000);
          }

          async function refresh() {
            const response = await fetch("/api/weather", { cache: "no-store" });
            const payload = await response.json();
            window.astrapeWeatherData = payload;
            render();
          }

          function buildHorizonControls() {
            const horizons = document.getElementById("weather-horizons");
            horizons.innerHTML = "";
            const slots = loadSlots();

            slots.forEach((slot, index) => {
              const option = document.createElement("div");
              option.className = "horizon-option";
              option.innerHTML = `
                <input class="horizon-enabled" type="checkbox" ${slot.enabled ? "checked" : ""}>
                <span class="legend-swatch" style="background: ${palette[index]}"></span>
                <input class="horizon-value" type="number" min="1" max="47" step="1" value="${slot.horizon}">
                <span>h</span>
              `;
              const checkbox = option.querySelector(".horizon-enabled");
              const value = option.querySelector(".horizon-value");
              checkbox.addEventListener("change", render);
              value.addEventListener("input", render);
              horizons.appendChild(option);
            });
          }

          function render() {
            const payload = window.astrapeWeatherData || { forecast_points: [], resolved_truth: [] };
            const variable = document.getElementById("weather-variable").value;
            const selectedHorizons = selectedSlots();
            saveSlots();
            drawChart(payload, variable, selectedHorizons);
          }

          function drawChart(payload, variable, selectedHorizons) {
            const canvas = document.getElementById("weather-chart");
            const ctx = canvas.getContext("2d");
            const series = buildSeries(payload, variable, selectedHorizons);

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            const allPoints = series.flatMap((item) => item.points);
            const now = Date.now();
            const xs = allPoints.map((point) => new Date(point.target_at).getTime());
            xs.push(now);
            const ys = allPoints.map((point) => point.value).filter((value) => value !== null);
            if (!xs.length || !ys.length) return;

            const bounds = {
              minX: Math.min(...xs),
              maxX: Math.max(...xs),
              minY: Math.min(...ys),
              maxY: Math.max(...ys),
            };
            if (bounds.minY === bounds.maxY) {
              bounds.minY -= 1;
              bounds.maxY += 1;
            }

            drawAxes(ctx, canvas, bounds);
            drawNowMarker(ctx, canvas, bounds);
            series.forEach((item) => {
              drawSeries(ctx, canvas, bounds, item.points, item.color, item.width);
            });
          }

          function buildSeries(payload, variable, selectedHorizons) {
            const series = [];
            for (const slot of selectedHorizons) {
              const points = (payload.forecast_points || [])
                .filter((point) => point.horizon_hours === slot.horizon)
                .map((point) => ({ target_at: point.target_at, value: point[variable] }))
                .filter((point) => point.value !== null);
              series.push({ label: `${slot.horizon}h forecast`, points, color: slot.color, width: 2 });
            }

            const truth = (payload.resolved_truth || [])
              .map((point) => ({ target_at: point.resolved_at, value: point[variable] }))
              .filter((point) => point.value !== null);
            series.push({ label: "resolved truth", points: truth, color: "#f8fafc", width: 3 });
            return series;
          }

          function drawAxes(ctx, canvas, bounds) {
            const margin = chartMargin();
            ctx.strokeStyle = "#94a3b8";
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(margin.left, margin.top);
            ctx.lineTo(margin.left, canvas.height - margin.bottom);
            ctx.lineTo(canvas.width - margin.right, canvas.height - margin.bottom);
            ctx.stroke();

            ctx.fillStyle = "#475569";
            ctx.font = "12px system-ui";
            ctx.fillText(bounds.maxY.toFixed(1), 10, margin.top + 4);
            ctx.fillText(bounds.minY.toFixed(1), 10, canvas.height - margin.bottom);
          }

          function drawSeries(ctx, canvas, bounds, points, color, width) {
            if (!points.length) return;
            const margin = chartMargin();
            if (points.length === 1) {
              const point = points[0];
              const x = scale(new Date(point.target_at).getTime(), bounds.minX, bounds.maxX, margin.left, canvas.width - margin.right);
              const y = scale(point.value, bounds.minY, bounds.maxY, canvas.height - margin.bottom, margin.top);
              ctx.fillStyle = color;
              ctx.beginPath();
              ctx.arc(x, y, width + 3, 0, Math.PI * 2);
              ctx.fill();
              return;
            }

            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.beginPath();

            points.forEach((point, index) => {
              const x = scale(new Date(point.target_at).getTime(), bounds.minX, bounds.maxX, margin.left, canvas.width - margin.right);
              const y = scale(point.value, bounds.minY, bounds.maxY, canvas.height - margin.bottom, margin.top);
              if (index === 0) ctx.moveTo(x, y);
              else ctx.lineTo(x, y);
            });
            ctx.stroke();
          }

          function drawNowMarker(ctx, canvas, bounds) {
            const now = Date.now();
            if (now < bounds.minX || now > bounds.maxX) return;

            const margin = chartMargin();
            const x = scale(now, bounds.minX, bounds.maxX, margin.left, canvas.width - margin.right);

            ctx.save();
            ctx.strokeStyle = "#f8fafc";
            ctx.lineWidth = 1;
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(x, margin.top);
            ctx.lineTo(x, canvas.height - margin.bottom);
            ctx.stroke();
            ctx.setLineDash([]);
            ctx.fillStyle = "#f8fafc";
            ctx.font = "12px system-ui";
            ctx.fillText("now", Math.min(x + 8, canvas.width - margin.right - 28), margin.top + 14);
            ctx.restore();
          }

          function selectedSlots() {
            return [...document.querySelectorAll("#weather-horizons .horizon-option")]
              .map((item, index) => {
                const enabled = item.querySelector(".horizon-enabled").checked;
                const input = item.querySelector(".horizon-value");
                const horizon = clamp(Number(input.value), 1, 47);
                input.value = horizon;
                return enabled ? { horizon, color: palette[index] } : null;
              })
              .filter(Boolean);
          }

          function saveSlots() {
            const slots = [...document.querySelectorAll("#weather-horizons .horizon-option")]
              .map((item) => ({
                enabled: item.querySelector(".horizon-enabled").checked,
                horizon: Number(item.querySelector(".horizon-value").value),
              }));
            localStorage.setItem("astrapeWeatherHorizonSlots", JSON.stringify(slots));
          }

          function loadSlots() {
            try {
              const parsed = JSON.parse(localStorage.getItem("astrapeWeatherHorizonSlots"));
              if (Array.isArray(parsed) && parsed.length === 6) return parsed;
            } catch (error) {
              return defaultSlots;
            }
            return defaultSlots;
          }

          function clamp(value, min, max) {
            if (!Number.isFinite(value)) return min;
            return Math.min(max, Math.max(min, Math.round(value)));
          }

          function chartMargin() {
            return { top: 24, right: 28, bottom: 34, left: 52 };
          }

          function scale(value, inMin, inMax, outMin, outMax) {
            if (inMin === inMax) return (outMin + outMax) / 2;
            return outMin + ((value - inMin) / (inMax - inMin)) * (outMax - outMin);
          }

          return { init };
        })();
        window.astrapeModules.weatherDisplay.init();
        </script>
        """

    def data_payload(self, dataset: WeatherDisplayDataset | None = None) -> str:
        if dataset is None:
            dataset = WeatherDisplayDataset(forecast_points=[], resolved_truth=[])

        forecast_points = [self._forecast_point(point) for point in dataset.forecast_points]
        resolved_truth = [self._truth_point(point) for point in dataset.resolved_truth]
        horizons = sorted({point["horizon_hours"] for point in forecast_points})

        return json.dumps(
            {
                "forecast_points": forecast_points,
                "resolved_truth": resolved_truth,
                "horizons": horizons,
                "min_horizon": 1,
                "max_horizon": 47,
            }
        )

    def _forecast_point(self, point: WeatherForecastPoint) -> dict[str, object]:
        return {
            "issued_at": self._iso(point.issued_at),
            "target_at": self._iso(point.target_at),
            "horizon_hours": point.horizon_hours,
            "source": point.source,
            "temperature_c": point.temperature_c,
            "shortwave_radiation_w_m2": point.shortwave_radiation_w_m2,
            "cloud_cover_pct": point.cloud_cover_pct,
        }

    def _truth_point(self, point: WeatherResolvedTruth) -> dict[str, object]:
        return {
            "resolved_at": self._iso(point.resolved_at),
            "source": point.source,
            "temperature_c": point.temperature_c,
            "shortwave_radiation_w_m2": point.shortwave_radiation_w_m2,
        }

    def _iso(self, value: datetime) -> str:
        return value.isoformat()