import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect } from "react";
import { PageShell } from "@/components/page-shell";
import { ensureAnonymousSession } from "@/lib/ensure-session";
import { Mic, FileText, Image as ImageIcon, Video, Music, Podcast, PenTool, User, Globe, MessageSquare } from "lucide-react";

export const Route = createFileRoute("/studio")({
  head: () => ({
    meta: [
      { title: "Studio — Gatavase AI Creative" },
      { name: "description", content: "Open the Gatavase AI Studio and start creating with voice, video, documents, images and music." },
    ],
  }),
  component: Studio,
});

const tools = [
  { to: "/tools/text-to-speech", icon: Podcast, title: "Text to Voice" },
  { to: "/tools/voice-cloning", icon: Mic, title: "Voice Cloning" },
  { to: "/tools/documents", icon: FileText, title: "Documents" },
  { to: "/tools/creative-writing", icon: PenTool, title: "Creative Writing" },
  { to: "/tools/biography", icon: User, title: "Biography" },
  { to: "/tools/images", icon: ImageIcon, title: "Images" },
  { to: "/tools/video", icon: Video, title: "Video" },
  { to: "/tools/songs", icon: Music, title: "Songs" },
  { to: "/tools/podcast", icon: Podcast, title: "Podcast" },
  { to: "/tools/website-builder", icon: Globe, title: "Website Builder" },
  { to: "/tools/chatbot", icon: MessageSquare, title: "AI Chatbot" },
] as const;

function Studio() {
  useEffect(() => { ensureAnonymousSession(); }, []);
  return (
    <PageShell eyebrow="Your workspace" title="Studio" lead="Pick a tool and start creating — no sign-up needed.">
      <div className="mb-6 flex flex-wrap justify-end gap-2">
        <Link to="/history" className="rounded-lg border border-border bg-card/50 px-4 py-2 text-sm hover:bg-card">History</Link>
      </div>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {tools.map(({ to, icon: Icon, title }) => (
          <Link key={to} to={to} className="glow-card rounded-2xl p-5 transition-all hover:-translate-y-1 hover:border-primary/60">
            <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-xl" style={{ background: "var(--gradient-brand)" }}>
              <Icon className="h-5 w-5 text-white" />
            </div>
            <div className="font-display font-semibold">{title}</div>
          </Link>
        ))}
      </div>
    </PageShell>
  );
}