"use client";

import { useMemo, useState } from "react";

export function WordCounter() {
  const [text, setText] = useState("");

  const stats = useMemo(() => {
    const trimmed = text.trim();
    const words = trimmed ? trimmed.split(/\s+/).filter(Boolean).length : 0;
    const chars = text.length;
    const charsNoSpaces = text.replace(/\s/g, "").length;
    const sentences = trimmed ? trimmed.split(/[.!?]+/).filter((s) => s.trim()).length : 0;
    const paragraphs = trimmed ? trimmed.split(/\n\s*\n/).filter((p) => p.trim()).length : 0;
    const minutes = Math.max(1, Math.ceil(words / 220));

    return { words, chars, charsNoSpaces, sentences, paragraphs, minutes };
  }, [text]);

  return (
    <div className="space-y-5">
      <textarea
        value={text}
        onChange={(event) => setText(event.target.value)}
        placeholder="Text hier einfügen..."
        className="min-h-[220px] w-full resize-y rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
      />

      <div className="grid gap-3 sm:grid-cols-3">
        <Stat label="Wörter" value={stats.words} />
        <Stat label="Zeichen" value={stats.chars} />
        <Stat label="Ohne Leerzeichen" value={stats.charsNoSpaces} />
        <Stat label="Sätze" value={stats.sentences} />
        <Stat label="Absätze" value={stats.paragraphs} />
        <Stat label="Lesezeit" value={`${stats.minutes} min`} />
      </div>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: number | string }) {
  return (
    <div className="rounded-lg border bg-gray-50 p-4 text-center">
      <div className="text-2xl font-bold text-blue-600">{value}</div>
      <div className="mt-1 text-xs font-medium uppercase tracking-wide text-gray-500">{label}</div>
    </div>
  );
}