"use client";

import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import type { SynopStation } from "@/types/imgw";
import { ChartTooltip } from "@/components/charts/chart-tooltip";
import { Card } from "@/components/ui/card";
import { useI18n } from "@/lib/i18n";
import { useWeatherStore } from "@/lib/store";
import {
  convertPrecipitation,
  convertWindSpeed,
  convertWindSpeedToBeaufort,
  getPrecipitationUnitLabel,
  getWindSpeedUnitLabel,
} from "@/lib/weather-utils";

const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
const SNAPSHOT_COLORS = ["hsl(var(--chart-temperature))", "hsl(var(--chart-feels-like))", "hsl(var(--chart-rainfall))"];

export function SnapshotChart({ station }: { station: SynopStation }) {
  const { t } = useI18n();
  const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
  const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
  const windDigits = windSpeedUnit === "ms" ? 1 : 0;
  const windSpeed =
    station.windSpeed === null
      ? null
      : windSpeedUnit === "bft"
        ? convertWindSpeedToBeaufort(station.windSpeed)
        : Number(convertWindSpeed(station.windSpeed, windSpeedUnit).toFixed(windDigits));
  const windMax = windSpeedUnit === "ms" ? 20 : windSpeedUnit === "kmh" ? 72 : windSpeedUnit === "bft" ? 12 : 45;
  const rainfall =
    station.rainfall === null ? null : Number(convertPrecipitation(station.rainfall, precipitationUnit).toFixed(2));
  const rows = [
    { name: t("weather.humidity"), value: station.humidity, unit: "%", max: 100, color: SNAPSHOT_COLORS[0] },
    {
      name: t("weather.wind"),
      value: windSpeed,
      unit: getWindSpeedUnitLabel(windSpeedUnit),
      max: windMax,
      color: SNAPSHOT_COLORS[1],
    },
    {
      name: t("weather.rainfall"),
      value: rainfall,
      unit: getPrecipitationUnitLabel(precipitationUnit),
      max: convertPrecipitation(30, precipitationUnit),
      color: SNAPSHOT_COLORS[2],
    },
  ]
    .filter((row) => row.value !== null)
    .map((row) => ({ ...row, normalized: Math.min(100, ((row.value ?? 0) / row.max) * 100) }));

  return (
    <Card className="p-5">
      <p className="section-kicker">{t("snapshot.label")}</p>
      <h2 className="mt-2 text-xl font-semibold tracking-tight">{t("snapshot.title")}</h2>
      <p className="mt-1 text-sm leading-6 text-muted">{t("snapshot.description")}</p>
      <div className="mt-5 h-52 min-w-0">
        <ResponsiveContainer
          width="100%"
          height="100%"
          minWidth={0}
          minHeight={0}
          initialDimension={INITIAL_CHART_DIMENSION}
        >
          <BarChart data={rows} layout="vertical" margin={{ left: 0, right: 16 }}>
            <XAxis type="number" hide domain={[0, 100]} />
            <YAxis
              type="category"
              dataKey="name"
              width={86}
              axisLine={false}
              tickLine={false}
              tick={{ fill: "currentColor", fontSize: 12 }}
            />
            <Tooltip
              cursor={{ fill: "hsl(var(--border) / 0.22)" }}
              content={
                <ChartTooltip
                  valueFormatter={(entry) => {
                    const row = entry.payload;
                    return `${row?.value ?? "—"} ${row?.unit ?? ""}`.trim();
                  }}
                />
              }
            />
            <Bar dataKey="normalized" radius={[0, 8, 8, 0]} barSize={14}>
              {rows.map((row) => (
                <Cell fill={row.color} key={row.name} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Card>
  );
}