"use client";

import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import type { SynopStation } from "@/types/imgw";
import { Card } from "@/components/ui/card";

export function SnapshotChart({ station }: { station: SynopStation }) {
  const rows = [
    { name: "Wilgotność", value: station.humidity, unit: "%", max: 100, color: "#38bdf8" },
    { name: "Wiatr", value: station.windSpeed, unit: "m/s", max: 20, color: "#818cf8" },
    { name: "Opad", value: station.rainfall, unit: "mm", max: 30, color: "#22d3ee" },
  ].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="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-300">Snapshot pomiarowy</p>
      <h2 className="mt-2 text-xl font-semibold tracking-tight">Aktualne proporcje parametrów</h2>
      <p className="mt-1 text-sm leading-6 text-slate-600 dark:text-slate-300">Wizualizacja bieżącego odczytu. API synoptyczne IMGW nie udostępnia historii ani prognozy godzinowej.</p>
      <div className="mt-5 h-52 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <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: "rgba(148,163,184,0.08)" }} formatter={(_, __, item) => [`${item.payload.value} ${item.payload.unit}`, item.payload.name]} />
            <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>
  );
}