"use client";

import Link from "next/link";
import { motion, useReducedMotion } from "framer-motion";
import {
  ArrowUpRight, Brain, Clapperboard, Columns3, Cpu, MessagesSquare,
  Mic, Sparkles, TrendingUp, Users,
} from "lucide-react";
import type { ReactNode } from "react";

export interface QuickLaunchTileData {
  href: string;
  label: string;
  desc: string;
  icon: ReactNode;
  accent: string; // theme var — recolours with the theme
}

// Routes mirror Sidebar.tsx / the hermes ?tab deep-link. Accents are theme
// tokens on purpose: the grid stays coherent in aurora, neon, obsidian + ion.
// Exported so the Cockpit home can render a denser variant of the same list.
export const QUICK_LAUNCH_TILES: QuickLaunchTileData[] = [
  { href: "/claude", label: "Claude", desc: "Your senior coding agent", icon: <Sparkles size={17} />, accent: "var(--rust)" },
  { href: "/hermes", label: "Hermes", desc: "Chat, skills and kanban", icon: <Cpu size={17} />, accent: "var(--gold-soft)" },
  { href: "/hermes?tab=talk", label: "Voice", desc: "Talk to Jarvis out loud", icon: <Mic size={17} />, accent: "var(--plum)" },
  { href: "/kanban", label: "Kanban", desc: "Multi-agent task board", icon: <Columns3 size={17} />, accent: "var(--emerald)" },
  { href: "/studio", label: "Studio", desc: "Images, video and speech", icon: <Clapperboard size={17} />, accent: "var(--gold)" },
  { href: "/leads", label: "Leads", desc: "Find and work prospects", icon: <Users size={17} />, accent: "var(--emerald)" },
  { href: "/memory", label: "Memory", desc: "Search everything you know", icon: <Brain size={17} />, accent: "var(--rust)" },
  { href: "/seo", label: "SEO", desc: "Content pipeline to Netlify", icon: <TrendingUp size={17} />, accent: "var(--gold)" },
  { href: "/room", label: "Mastermind", desc: "All agents, one room", icon: <MessagesSquare size={17} />, accent: "var(--plum)" },
];

// QuickLaunch — a compact jump-anywhere grid for the Home dashboard.
export default function QuickLaunch() {
  const reduceMotion = useReducedMotion();

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
      {QUICK_LAUNCH_TILES.map((t, i) => (
        <Link key={t.href} href={t.href} className="block group focus-ring rounded-lg">
          <motion.div
            initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduceMotion ? 0.01 : 0.3, delay: reduceMotion ? 0 : Math.min(i * 0.03, 0.25) }}
            whileTap={reduceMotion ? undefined : { scale: 0.985 }}
            className="surface-card relative overflow-hidden h-full p-4!"
          >
            <div
              aria-hidden
              className="pointer-events-none absolute -top-10 -right-10 w-28 h-28 rounded-full blur-2xl opacity-0 group-hover:opacity-25 transition-opacity"
              style={{ background: t.accent }}
            />
            <div className="relative flex items-center justify-between mb-3">
              <span
                className="grid place-items-center w-9 h-9 rounded-md"
                style={{
                  background: `color-mix(in srgb, ${t.accent} 12%, transparent)`,
                  color: t.accent,
                  border: `1px solid color-mix(in srgb, ${t.accent} 24%, transparent)`,
                  boxShadow: `0 0 16px -10px ${t.accent}`,
                }}
              >
                {t.icon}
              </span>
              <ArrowUpRight size={13} className="opacity-0 group-hover:opacity-80 group-focus-visible:opacity-80 transition-opacity" style={{ color: "var(--cream-dim)" }} />
            </div>
            <div className="relative">
              <div className="text-[14.5px]" style={{ fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 500, letterSpacing: "-0.01em", color: "var(--cream)" }}>
                {t.label}
              </div>
              <div className="mt-0.5 text-[11.5px] leading-snug" style={{ color: "var(--cream-mute)" }}>
                {t.desc}
              </div>
            </div>
          </motion.div>
        </Link>
      ))}
    </div>
  );
}
