"use client";

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

type Mode = "percent-of" | "what-percent" | "change";

export function PercentCalculator() {
  const [mode, setMode] = useState<Mode>("percent-of");
  const [a, setA] = useState("");
  const [b, setB] = useState("");
  const [result, setResult] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const calculate = () => {
    const numA = parseFloat(a.replace(",", "."));
    const numB = parseFloat(b.replace(",", "."));

    if (isNaN(numA) || isNaN(numB)) {
      setError("Bitte gültige Zahlen eingeben.");
      setResult(null);
      return;
    }

    setError(null);

    if (mode === "percent-of") {
      setResult(`${formatNum((numA / 100) * numB)}`);
    } else if (mode === "what-percent") {
      if (numB === 0) {
        setError("Teiler darf nicht 0 sein.");
        return;
      }
      setResult(`${formatNum((numA / numB) * 100)} %`);
    } else {
      if (numA === 0) {
        setError("Ausgangswert darf nicht 0 sein.");
        return;
      }
      const change = ((numB - numA) / Math.abs(numA)) * 100;
      const sign = change >= 0 ? "+" : "";
      setResult(`${sign}${formatNum(change)} %`);
    }
  };

  const formatNum = (n: number) =>
    Number.isInteger(n) ? n.toString() : n.toFixed(6).replace(/\.?0+$/, "");

  const modes: { id: Mode; label: string; aLabel: string; bLabel: string; description: string }[] = [
    {
      id: "percent-of",
      label: "X % von Y",
      aLabel: "Prozentsatz (X)",
      bLabel: "Wert (Y)",
      description: "Berechnet wie viel X Prozent von Y ist.",
    },
    {
      id: "what-percent",
      label: "X ist ? % von Y",
      aLabel: "Teilwert (X)",
      bLabel: "Gesamtwert (Y)",
      description: "Berechnet welchen prozentualen Anteil X von Y hat.",
    },
    {
      id: "change",
      label: "Veränderung X → Y",
      aLabel: "Ausgangswert (X)",
      bLabel: "Neuer Wert (Y)",
      description: "Berechnet die prozentuale Veränderung von X zu Y.",
    },
  ];

  const current = modes.find((m) => m.id === mode)!;

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-2">
        {modes.map((m) => (
          <button
            key={m.id}
            onClick={() => {
              setMode(m.id);
              setResult(null);
              setError(null);
            }}
            className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
              mode === m.id
                ? "bg-blue-600 text-white"
                : "border border-gray-200 text-gray-600 hover:bg-gray-50"
            }`}
          >
            {m.label}
          </button>
        ))}
      </div>

      <p className="text-sm text-gray-500">{current.description}</p>

      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-1.5">
          <Label htmlFor="calc-a">{current.aLabel}</Label>
          <Input
            id="calc-a"
            type="text"
            inputMode="decimal"
            placeholder="z.B. 15"
            value={a}
            onChange={(e) => setA(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && calculate()}
          />
        </div>
        <div className="space-y-1.5">
          <Label htmlFor="calc-b">{current.bLabel}</Label>
          <Input
            id="calc-b"
            type="text"
            inputMode="decimal"
            placeholder="z.B. 200"
            value={b}
            onChange={(e) => setB(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && calculate()}
          />
        </div>
      </div>

      {error && <p className="text-sm text-red-500">{error}</p>}

      <Button onClick={calculate} className="w-full sm:w-auto">
        Berechnen
      </Button>

      {result !== null && !error && (
        <div className="rounded-xl border-2 border-blue-100 bg-blue-50 p-5 text-center">
          <p className="text-sm text-blue-600 font-medium mb-1">Ergebnis</p>
          <p className="text-3xl font-bold text-blue-700">{result}</p>
        </div>
      )}
    </div>
  );
}