import type { StarterKitDefinition } from "./types";

/**
 * Visual presets + UI foundation hints for codegen.
 *
 * Popular stacks (shadcn/ui, MUI, HeroUI, Untitled UI) are **different
 * products** — distinct installs, APIs, and licensing. Presets that share
 * `uiFoundation: "agnostic"` are token themes only; the agent should map
 * tokens onto whatever framework already exists unless greenfield.
 *
 * Mood presets at the bottom mirror legacy DESIGN_FEELS in
 * `preview-assist-ui/src/App.jsx`.
 */
export const STARTER_KITS: StarterKitDefinition[] = [
  {
    id: "shadcn-neutral",
    name: "shadcn / Neutral SaaS",
    tagline: "Slate neutrals · minimal chrome · Tailwind-friendly",
    defaults: {
      accentHex: "#6366f1",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font"],
    uiFoundation: "shadcn-ui",
    foundationNotesForAi:
      "Prefer shadcn/ui patterns when adding UI (Tailwind + Radix primitives; copy components into the repo). Map resolved accent/radius to CSS variables and Tailwind theme as shadcn expects.",
  },
  {
    id: "mui-material",
    name: "MUI (Material)",
    tagline:
      "Enterprise components · Material Design · dashboards & CRM shells",
    defaults: {
      accentHex: "#1976d2",
      radiusMdPx: 4,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "mui-material",
    foundationNotesForAi:
      "Prefer MUI (@mui/material) when scaffolding new screens unless the repo already uses something else. Map accent and corners via createTheme (palette.primary, shape.borderRadius); avoid mixing MUI with a second heavy kit without user consent.",
  },
  {
    id: "heroui-next",
    name: "HeroUI",
    tagline: "Next.js-optimized · React Aria · Tailwind primitives",
    defaults: {
      accentHex: "#006fee",
      radiusMdPx: 12,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "heroui",
    foundationNotesForAi:
      "Prefer HeroUI (@heroui/react) on Next.js greenfield; Tailwind-based with React Aria. Align semantic colors with tokens below via Tailwind/HeroUI theme config.",
  },
  {
    id: "untitled-ui",
    name: "Untitled UI",
    tagline: "Professional SaaS density · React Aria · Tailwind",
    defaults: {
      accentHex: "#444ce7",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "untitled-ui",
    foundationNotesForAi:
      "Untitled UI is a commercial kit — confirm the user has a license before importing paid sections from Figma handoff. When cleared, follow Untitled UI + React Aria + Tailwind patterns; map tokens to their spacing/color scales.",
  },
  {
    id: "twenty-crm",
    name: "Twenty CRM UI Kit",
    tagline: "CRM density · indigo accent · Radix-aligned semantics",
    defaults: {
      accentHex: "#5f6bf5",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Twenty-inspired tokens only — do not assume or vendor Twenty OSS unless the user asks. If greenfield with Tailwind, shadcn/ui-class primitives fit well; if repo uses MUI/HeroUI, map tokens there instead.",
  },
  {
    id: "flyonui",
    name: "FlyonUI",
    tagline: "Tailwind + daisyUI semantics + Preline JS",
    defaults: {
      accentHex: "#4f46e5",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Prefer FlyonUI semantics (daisyUI class names + Preline JS for interactivity) when scaffolding new screens. 800+ copy-paste components available. Use semantic classes like 'btn btn-primary' instead of raw utility classes where possible.",
  },
  {
    id: "warm-minimal",
    name: "Warm minimal",
    tagline: "Soft stone grays · rounded surfaces · editorial spacing",
    defaults: {
      accentHex: "#c2410c",
      radiusMdPx: 10,
      fontPreset: "system",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Warm SaaS mood — tokens only. Respect whichever UI stack exists; prefer centralized CSS/Tailwind variables for neutrals and accent.",
  },
  {
    id: "bold-confident",
    name: "Bold & confident",
    tagline: "High contrast · vivid accent — Stripe / Vercel energy",
    defaults: {
      accentHex: "#f43f5e",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Bold marketing/product mood — tokens only. Map accent into existing theme; avoid bolting on a new framework if one is already present.",
  },
  {
    id: "fresh-modern",
    name: "Fresh & modern",
    tagline: "Crisp green accent · friendly surfaces",
    defaults: {
      accentHex: "#22c55e",
      radiusMdPx: 10,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Fresh palette mood — tokens only. Align greens with brand accent variables without prescribing a specific component vendor.",
  },
  {
    id: "electric-vivid",
    name: "Electric & vivid",
    tagline: "Purple creative tooling — Figma / Framer mood",
    defaults: {
      accentHex: "#8b5cf6",
      radiusMdPx: 8,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Creative-tool mood — tokens only. Prefer mapping into existing DS before introducing another library.",
  },
  {
    id: "luxury-refined",
    name: "Premium & refined",
    tagline: "Gold accent · tight radius · editorial polish",
    defaults: {
      accentHex: "#d4a853",
      radiusMdPx: 6,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Premium editorial mood — tokens only. Dark chrome often pairs with subtle borders; respect existing stack.",
  },
  {
    id: "anthropic-claude",
    name: "Anthropic / Claude",
    tagline: "Warm terracotta accent · clean editorial layout · serif headers",
    defaults: {
      accentHex: "#d97757",
      radiusMdPx: 8,
      fontPreset: "system",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Claude Design System — Editorial, warm terracotta accent (#d97757), off-white backgrounds (#f9f8f6). Use serif fonts (like Recoleta or a strong serif fallback) for primary headers and clean sans-serif for body. Buttons are rounded, surfaces are separated by subtle hairlines instead of heavy shadows. Read github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/claude/DESIGN.md for specific token semantics.",
  },
  {
    id: "stripe-fintech",
    name: "Stripe / Fintech",
    tagline: "Signature purple gradients · weight-300 elegance · crisp utility",
    defaults: {
      accentHex: "#635bff",
      radiusMdPx: 6,
      fontPreset: "inter",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Stripe Design System — Crisp precision. Signature blurple accent (#635bff). Use incredibly soft, large shadows (0 50px 100px -20px rgba(50,50,93,0.25)) and crisp borders. Typography is tightly tracked, favoring font-weight 400 and 500. Gradients should be used sparingly but impactfully on active states. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/stripe/DESIGN.md.",
  },
  {
    id: "vercel-dev",
    name: "Vercel / Developer",
    tagline: "Black and white precision · Geist font · maximum contrast",
    defaults: {
      accentHex: "#000000",
      radiusMdPx: 6,
      fontPreset: "system",
      density: "compact",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Vercel Design System — Monochrome, high-contrast, developer-oriented. Use Geist or Geist Mono. The primary accent is solid black (#000) on white, or white on black in dark mode. Extremely sparse use of color, only for status (success, error, warning). Layouts are boxy, defined by 1px solid #eaeaea borders. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/vercel/DESIGN.md.",
  },
  {
    id: "linear-app",
    name: "Linear / Productivity",
    tagline: "Ultra-minimal · precise dark UI · purple glow",
    defaults: {
      accentHex: "#5e6ad2",
      radiusMdPx: 8,
      fontPreset: "system",
      density: "compact",
    },
    customizeFields: ["accent", "radius", "font", "density"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Linear Design System — Dark mode first. Very subtle, single-pixel inner borders (box-shadow inset) on surfaces to give them depth. Primary accent is a muted indigo/purple. Backgrounds are deep gray (#111214) rather than pure black. Typography is highly structured, slightly smaller (13px/14px base) for density. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/linear.app/DESIGN.md.",
  },
  {
    id: "airbnb-marketplace",
    name: "Airbnb / Marketplace",
    tagline: "Warm coral accent · photography-driven · large rounded UI",
    defaults: {
      accentHex: "#ff385c",
      radiusMdPx: 12,
      fontPreset: "system",
      density: "comfortable",
    },
    customizeFields: ["accent", "radius", "font"],
    uiFoundation: "agnostic",
    foundationNotesForAi:
      "Airbnb Design System — Friendly, consumer-focused. Large touch targets, heavy border-radius (12px+), and a stark contrast between pure white backgrounds and the vibrant 'Rausch' coral accent (#ff385c). Minimal borders, using white space and soft, dispersed shadows for elevation. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/airbnb/DESIGN.md.",
  },
];

export function getStarterKit(id: string): StarterKitDefinition | undefined {
  return STARTER_KITS.find((k) => k.id === id);
}
