"use client";

import { useMemo, useState } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type Mode = "length" | "mass" | "temperature" | "area" | "volume" | "speed" | "time" | "pressure" | "energy" | "power" | "data" | "angle";

const modes: Array<[Mode, string, string]> = [
  ["length", "Länge", "Meter"],
  ["mass", "Masse", "Kilogramm"],
  ["temperature", "Temperatur", "Celsius"],
  ["area", "Fläche", "Quadratmeter"],
  ["volume", "Volumen", "Liter"],
  ["speed", "Geschwindigkeit", "km/h"],
  ["time", "Zeit", "Sekunden"],
  ["pressure", "Druck", "bar"],
  ["energy", "Energie", "Joule"],
  ["power", "Leistung", "Watt"],
  ["data", "Datenmenge", "Byte"],
  ["angle", "Winkel", "Grad"],
];

export function UnitConverter() {
  const [mode, setMode] = useState<Mode>("length");
  const [value, setValue] = useState("1");
  const results = useMemo(() => calculate(mode, Number(value.replace(",", "."))), [mode, value]);
  const label = modes.find(([id]) => id === mode)?.[2] ?? "Wert";

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap gap-2">{modes.map(([id, name]) => <button key={id} onClick={() => setMode(id)} className={tab(mode === id)}>{name}</button>)}</div>
      <label className="space-y-2"><Label htmlFor="unit-value">Wert in {label}</Label><Input id="unit-value" inputMode="decimal" value={value} onChange={(event) => setValue(event.target.value)} /></label>
      {results ? <div className="grid gap-3 sm:grid-cols-2">{results.map(([name, result]) => <div key={name} className="rounded-lg border bg-gray-50 p-4"><p className="text-xs font-medium uppercase tracking-wide text-gray-500">{name}</p><p className="mt-2 break-words font-mono text-lg font-semibold text-blue-700">{format(result)}</p></div>)}</div> : <p className="text-sm text-red-500">Bitte gültige Zahl eingeben.</p>}
    </div>
  );
}

function calculate(mode: Mode, n: number): Array<[string, number]> | null {
  if (!Number.isFinite(n)) return null;
  const maps: Record<Mode, Array<[string, number]>> = {
    length: [["Meter", n], ["Kilometer", n / 1000], ["Zentimeter", n * 100], ["Millimeter", n * 1000], ["Meilen", n / 1609.344], ["Fuß", n * 3.28084]],
    mass: [["Kilogramm", n], ["Gramm", n * 1000], ["Milligramm", n * 1_000_000], ["Pfund", n * 2.20462], ["Unzen", n * 35.274]],
    temperature: [["Celsius", n], ["Fahrenheit", n * 9 / 5 + 32], ["Kelvin", n + 273.15]],
    area: [["m²", n], ["km²", n / 1_000_000], ["cm²", n * 10_000], ["ft²", n * 10.7639], ["acre", n / 4046.856]],
    volume: [["Liter", n], ["Milliliter", n * 1000], ["m³", n / 1000], ["US Gallonen", n * 0.264172]],
    speed: [["km/h", n], ["m/s", n / 3.6], ["mph", n * 0.621371], ["Knoten", n * 0.539957]],
    time: [["Sekunden", n], ["Minuten", n / 60], ["Stunden", n / 3600], ["Tage", n / 86400]],
    pressure: [["bar", n], ["kPa", n * 100], ["psi", n * 14.5038], ["Pa", n * 100000]],
    energy: [["Joule", n], ["kJ", n / 1000], ["Wh", n / 3600], ["kWh", n / 3_600_000]],
    power: [["Watt", n], ["Kilowatt", n / 1000], ["PS", n / 735.499], ["hp", n / 745.7]],
    data: [["Byte", n], ["KB", n / 1024], ["MB", n / 1024 ** 2], ["GB", n / 1024 ** 3], ["TB", n / 1024 ** 4]],
    angle: [["Grad", n], ["Radiant", n * Math.PI / 180], ["Gon", n * 10 / 9]],
  };
  return maps[mode];
}

function tab(active: boolean) {
  return `rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${active ? "bg-blue-600 text-white" : "border border-gray-200 text-gray-600 hover:bg-gray-50"}`;
}

function format(value: number) {
  return Number.isInteger(value) ? value.toString() : value.toLocaleString("de-DE", { maximumFractionDigits: 8 });
}