"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export function Base64Encoder() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [error, setError] = useState<string | null>(null);

  const encode = () => {
    setError(null);
    setOutput(btoa(unescape(encodeURIComponent(input))));
  };

  const decode = () => {
    setError(null);
    try {
      setOutput(decodeURIComponent(escape(atob(input.trim()))));
    } catch {
      setError("Dieser Text ist kein gültiges Base64.");
      setOutput("");
    }
  };

  return (
    <div className="space-y-5">
      <textarea
        value={input}
        onChange={(event) => setInput(event.target.value)}
        placeholder="Text oder Base64 eingeben..."
        className="min-h-[150px] w-full resize-y rounded-lg border border-gray-200 px-4 py-3 text-sm outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
      />

      <div className="flex flex-wrap gap-2">
        <Button onClick={encode} disabled={!input}>
          Kodieren
        </Button>
        <Button onClick={decode} disabled={!input} variant="outline">
          Dekodieren
        </Button>
      </div>

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

      <div className="rounded-lg border bg-gray-50 p-4">
        <span className="text-sm font-medium text-gray-600">Ergebnis</span>
        <p className="mt-3 min-h-[80px] whitespace-pre-wrap break-words font-mono text-sm text-gray-800">
          {output || "Noch kein Ergebnis."}
        </p>
      </div>
    </div>
  );
}