sexy/components/sessions/SessionTitleEditor.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Check, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";

const AUTOSAVE_DELAY_MS = 600;

export function SessionTitleEditor({ sessionId, initialName }: { sessionId: number; initialName: string | null }) {
  const router = useRouter();
  const initial = initialName ?? "";
  const [value, setValue] = useState(initial);
  const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle");
  const lastSaved = useRef(initial);

  useEffect(() => {
    const trimmed = value.trim();
    if (trimmed.length === 0 || trimmed === lastSaved.current) return;

    setStatus("saving");
    const timer = setTimeout(async () => {
      const res = await fetch(`/api/sessions/${sessionId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: trimmed }),
      });
      if (res.ok) {
        lastSaved.current = trimmed;
        setStatus("saved");
        router.refresh();
      } else {
        setStatus("idle");
        toast.error("Could not rename session");
      }
    }, AUTOSAVE_DELAY_MS);

    return () => clearTimeout(timer);
  }, [value, sessionId, router]);

  useEffect(() => {
    if (status !== "saved") return;
    const timer = setTimeout(() => setStatus("idle"), 1500);
    return () => clearTimeout(timer);
  }, [status]);

  return (
    <div className="-mx-2 flex items-center gap-2">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={`Session #${sessionId}`}
        aria-label="Session name"
        className="min-w-0 flex-1 rounded-md border border-transparent bg-transparent px-2 py-0.5 font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-border focus:border-border focus:bg-muted/30"
      />
      <div className="relative flex size-4 shrink-0 items-center justify-center">
        <Loader2
          className={cn(
            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
            status === "saving" ? "opacity-100" : "opacity-0",
          )}
        />
        <Check
          className={cn(
            "absolute size-4 text-primary transition-opacity",
            status === "saved" ? "opacity-100" : "opacity-0",
          )}
        />
      </div>
    </div>
  );
}