"use client";

import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { Card } from "@/components/ui/card";
import { useI18n } from "@/lib/i18n";
import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
import type { HourlyForecast } from "@/types/forecast";

function formatHour(value: string) {
  return value.slice(11, 16);
}

export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
  const { language, t } = useI18n();
  const rows = hours.map((hour) => ({
    time: formatHour(hour.time),
    temperature: hour.temperature,
    feelsLike: hour.feelsLike,
    precipitation: hour.precipitation,
    precipitationProbability: hour.precipitationProbability,
  }));

  return (
    <div className="grid gap-3 lg:grid-cols-2">
      <Card className="p-4 sm:p-5">
        <h3 className="text-sm font-semibold">{t("forecast.temperatureChart")}</h3>
        <p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.temperatureChartDescription")}</p>
        <div className="mt-4 h-56 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <ComposedChart data={rows} margin={{ left: -20, right: 8, top: 8 }}>
              <CartesianGrid stroke="rgba(148,163,184,0.18)" strokeDasharray="4 4" vertical={false} />
              <XAxis dataKey="time" axisLine={false} tickLine={false} interval={3} tick={{ fill: "currentColor", fontSize: 11 }} />
              <YAxis axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit="°" />
              <Tooltip
                contentStyle={{ borderRadius: 16, border: "1px solid rgba(148,163,184,0.2)", background: "rgba(15,23,42,0.9)", color: "#f8fafc" }}
                formatter={(value) => [formatForecastTemperature(typeof value === "number" ? value : null, language)]}
              />
              <Legend wrapperStyle={{ fontSize: "0.72rem" }} />
              <Line type="monotone" dataKey="temperature" name={t("forecast.temperature")} stroke="#0284c7" strokeWidth={3} dot={false} connectNulls />
              <Line type="monotone" dataKey="feelsLike" name={t("forecast.apparentTemperature")} stroke="#818cf8" strokeWidth={2} strokeDasharray="5 4" dot={false} connectNulls />
            </ComposedChart>
          </ResponsiveContainer>
        </div>
      </Card>

      <Card className="p-4 sm:p-5">
        <h3 className="text-sm font-semibold">{t("forecast.rainfallChart")}</h3>
        <p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.rainfallChartDescription")}</p>
        <div className="mt-4 h-56 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <ComposedChart data={rows} margin={{ left: -20, right: -10, top: 8 }}>
              <CartesianGrid stroke="rgba(148,163,184,0.18)" strokeDasharray="4 4" vertical={false} />
              <XAxis dataKey="time" axisLine={false} tickLine={false} interval={3} tick={{ fill: "currentColor", fontSize: 11 }} />
              <YAxis yAxisId="rainfall" axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit=" mm" />
              <YAxis yAxisId="probability" orientation="right" domain={[0, 100]} axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit="%" />
              <Tooltip
                contentStyle={{ borderRadius: 16, border: "1px solid rgba(148,163,184,0.2)", background: "rgba(15,23,42,0.9)", color: "#f8fafc" }}
                formatter={(value, name) => [
                  name === t("forecast.precipitation")
                    ? formatForecastRainfall(typeof value === "number" ? value : null, language)
                    : `${typeof value === "number" ? value : "—"}%`,
                  name,
                ]}
              />
              <Legend wrapperStyle={{ fontSize: "0.72rem" }} />
              <Bar yAxisId="rainfall" dataKey="precipitation" name={t("forecast.precipitation")} fill="#38bdf8" radius={[5, 5, 0, 0]} />
              <Line yAxisId="probability" type="monotone" dataKey="precipitationProbability" name={t("forecast.precipitationProbability")} stroke="#6366f1" strokeWidth={2} dot={false} connectNulls />
            </ComposedChart>
          </ResponsiveContainer>
        </div>
      </Card>
    </div>
  );
}