"use client";

import { useMemo, useState } from "react";
import { Copy } from "lucide-react";
import { Button } from "@/components/ui/button";

type Mode = "upper" | "lower" | "title" | "sentence" | "slug";

const modes: { id: Mode; label: string }[] = [
  { id: "upper", label: "GROSS" },
  { id: "lower", label: "klein" },
  { id: "title", label: "Title Case" },
  { id: "sentence", label: "Satz" },
  { id: "slug", label: "slug" },
];

export function CaseConverter() {
  const [text, setText] = useState("");
  const [mode, setMode] = useState<Mode>("upper");

  const output = useMemo(() => convert(text, mode), [text, mode]);

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

      <textarea
        value={text}
        onChange={(event) => setText(event.target.value)}
        placeholder="Text 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="rounded-lg border bg-gray-50 p-4">
        <div className="mb-3 flex items-center justify-between gap-3">
          <span className="text-sm font-medium text-gray-600">Ergebnis</span>
          <Button
            type="button"
            size="sm"
            variant="outline"
            onClick={() => navigator.clipboard.writeText(output)}
            disabled={!output}
          >
            <Copy className="mr-2 h-4 w-4" />
            Kopieren
          </Button>
        </div>
        <p className="min-h-[80px] whitespace-pre-wrap break-words font-mono text-sm text-gray-800">
          {output || "Noch kein Ergebnis."}
        </p>
      </div>
    </div>
  );
}

function convert(value: string, mode: Mode) {
  if (mode === "upper") return value.toUpperCase();
  if (mode === "lower") return value.toLowerCase();
  if (mode === "title") {
    return value
      .toLowerCase()
      .split(" ")
      .map((word) => (word ? word[0].toUpperCase() + word.slice(1) : word))
      .join(" ");
  }
  if (mode === "sentence") {
    const lower = value.toLowerCase();
    return lower.replace(/(^\s*[a-zäöüß]|[.!?]\s+[a-zäöüß])/g, (part) => part.toUpperCase());
  }
  return value
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "");
}