import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { ToolShell } from "@/components/ToolShell";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/tools/case-converter")({
  head: () => ({
    meta: [
      { title: "Text Case Converter — UPPER, lower, Title, camelCase" },
      { name: "description", content: "Convert text between UPPERCASE, lowercase, Title Case, Sentence case, camelCase, snake_case and kebab-case." },
      { property: "og:title", content: "Text Case Converter" },
      { property: "og:description", content: "Convert text between common letter cases instantly." },
    ],
  }),
  component: CaseTool,
});

function CaseTool() {
  const [text, setText] = useState("");
  const set = (fn: (s: string) => string) => setText(fn(text));
  const words = (s: string) => s.replace(/[_-]+/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").toLowerCase().trim().split(/\s+/).filter(Boolean);

  return (
    <ToolShell title="Case Converter" description="Quickly switch your text between common casing styles used in writing and code.">
      <div className="space-y-4">
        <Textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Type or paste your text…" className="min-h-[180px]" />
        <div className="flex flex-wrap gap-2">
          <Button onClick={() => set((s) => s.toUpperCase())}>UPPERCASE</Button>
          <Button onClick={() => set((s) => s.toLowerCase())} variant="outline">lowercase</Button>
          <Button onClick={() => set((s) => s.toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase()))} variant="outline">Title Case</Button>
          <Button onClick={() => set((s) => s.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, (c) => c.toUpperCase()))} variant="outline">Sentence case</Button>
          <Button onClick={() => set((s) => { const w = words(s); return w.map((x, i) => i === 0 ? x : x[0].toUpperCase() + x.slice(1)).join(""); })} variant="outline">camelCase</Button>
          <Button onClick={() => set((s) => words(s).join("_"))} variant="outline">snake_case</Button>
          <Button onClick={() => set((s) => words(s).join("-"))} variant="outline">kebab-case</Button>
        </div>
      </div>
    </ToolShell>
  );
}