import JSZip from "jszip"
import saveAs from "file-saver"

// Get current design settings from contexts
interface ExportSettings {
  primaryColor: string
  borderRadius: number
  font: string
  materialType: string
  packageType: "free" | "pro"
}

// Generate package.json for each package type
function generatePackageJson(packageType: "free" | "pro") {
  const baseDependencies = {
    "@heroicons/react": "^2.0.18",
    "@radix-ui/react-accordion": "^1.2.2",
    "@radix-ui/react-alert-dialog": "^1.1.4",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-progress": "^1.1.1",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-switch": "^1.1.2",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.6",
    "class-variance-authority": "^0.7.1",
    clsx: "^2.1.1",
    "lucide-react": "^0.454.0",
    next: "14.2.25",
    "next-themes": "^0.4.4",
    react: "^19",
    "react-dom": "^19",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
  }

  const proDependencies = {
    ...baseDependencies,
    "@vercel/analytics": "^1.1.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    uuid: "^9.0.0",
  }

  return JSON.stringify(
    {
      name: `percolate-ui-${packageType}`,
      version: "1.0.0",
      private: true,
      scripts: {
        dev: "next dev",
        build: "next build",
        start: "next start",
        lint: "next lint",
      },
      dependencies: packageType === "pro" ? proDependencies : baseDependencies,
      devDependencies: {
        "@types/node": "^22",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        postcss: "^8",
        tailwindcss: "^3.4.17",
        typescript: "^5",
      },
    },
    null,
    2,
  )
}

// Generate globals.css with current customizations
function generateGlobalsCss(settings: ExportSettings) {
  return `@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: ${settings.primaryColor};
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: ${settings.primaryColor};
  --radius: ${settings.borderRadius}px;
  --background-primary: #ffffff;
  --background-secondary: #f9fafb;
  --text-primary: #111827;
  --primary-text: #ffffff;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: ${settings.primaryColor};
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: ${settings.primaryColor};
  --background-primary: #0f172a;
  --background-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --primary-text: #ffffff;
}

* {
  @apply border-border;
}

body {
  @apply bg-background text-foreground;
  font-family: ${settings.font}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.text-crisp {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

${
  settings.materialType === "glass"
    ? `
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
`
    : ""
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}
`
}

// Generate lib/utils.ts
function generateUtils() {
  return `import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
`
}

// Generate theme provider
function generateThemeProvider() {
  return `"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"
import { useEffect } from "react"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  // Force theme update on client side
  useEffect(() => {
    // This runs only on client side
    const savedTheme = localStorage.getItem("theme") || "light"

    // Set initial theme
    document.documentElement.classList.remove("light", "dark")
    document.documentElement.classList.add(savedTheme)
    document.documentElement.style.colorScheme = savedTheme
  }, [])

  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="light"
      enableSystem={false}
      disableTransitionOnChange={true}
      {...props}
    >
      {children}
    </NextThemesProvider>
  )
}
`
}

// Generate Button component
function generateButton() {
  return `"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-[var(--primary-text)] hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-[var(--background-secondary)] hover:text-accent-foreground",
        secondary:
          "bg-[var(--background-secondary)] text-secondary-foreground hover:bg-[var(--background-secondary)]/80",
        ghost: "hover:bg-[var(--background-secondary)] hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-3 py-1.5",
        sm: "h-8 rounded-md px-2.5 text-xs",
        lg: "h-10 rounded-md px-6",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }
`
}

// Generate Card component
function generateCard() {
  return `import * as React from "react"
import { cn } from "@/lib/utils"

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("rounded-lg border bg-background-primary text-card-foreground shadow-sm", className)}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
`
}

// Generate Badge component
function generateBadge() {
  return `import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
`
}

// Generate theme toggle
function generateThemeToggle() {
  return `"use client"

import * as React from "react"
import { Moon, Sun } from 'lucide-react'
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()

  return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    >
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}
`
}

// Generate Starter Kit layout
function generateStarterLayout() {
  return `import type { Metadata } from "next"
import { Inter } from 'next/font/google'
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const inter = Inter({ 
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

export const metadata: Metadata = {
  title: "Percolate UI - Starter Kit",
  description: "A beautiful design system built with React and Tailwind CSS",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.variable}>
      <body className={inter.className + " text-crisp"}>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={false}
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
`
}

// Generate Starter Kit main page
function generateStarterPage() {
  return `"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ThemeToggle } from "@/components/theme-toggle"
import { 
  CodeBracketIcon, 
  SwatchIcon, 
  SparklesIcon,
  CubeIcon,
  DocumentTextIcon,
  PaintBrushIcon,
  CheckCircleIcon
} from "@heroicons/react/24/outline"

export default function Home() {
  return (
    <div className="min-h-screen bg-background-primary">
      {/* Header */}
      <header className="border-b border-border bg-background-primary">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center max-w-6xl">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
              <span className="text-primary-foreground font-bold text-sm">P</span>
            </div>
            <h1 className="text-xl font-semibold">Percolate UI</h1>
          </div>
          <div className="flex items-center gap-4">
            <Badge variant="secondary">Starter Kit</Badge>
            <ThemeToggle />
          </div>
        </div>
      </header>
      
      {/* Main Content */}
      <main className="container mx-auto px-4 py-16 max-w-6xl">
        {/* Hero Section */}
        <div className="text-center mb-20">
          <h2 className="text-5xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
            Welcome to Percolate UI
          </h2>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            A beautiful design system built with React, TypeScript, and Tailwind CSS. 
            Start building amazing interfaces today.
          </p>
          <div className="flex gap-4 justify-center">
            <Button size="lg">Get Started</Button>
            <Button variant="outline" size="lg">View Components</Button>
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
          <div className="text-center">
            <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <CodeBracketIcon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Copy & Paste</h3>
            <p className="text-muted-foreground">
              No package installation required. Simply copy the code and paste it into your project.
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <SwatchIcon className="w-8 h-8 text-green-600 dark:text-green-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Fully Customizable</h3>
            <p className="text-muted-foreground">
              Built with CSS variables and Tailwind CSS. Customize colors, spacing, and styling to match your brand.
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <SparklesIcon className="w-8 h-8 text-purple-600 dark:text-purple-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Production Ready</h3>
            <p className="text-muted-foreground">
              Accessible, responsive, and built with TypeScript. Ready for your next production application.
            </p>
          </div>
        </div>

        {/* What's Included */}
        <div className="mb-20">
          <h2 className="text-3xl font-bold mb-12 text-center">What's included in Starter Kit</h2>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <Card className="p-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                  <CubeIcon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">Essential Components</h3>
                  <p className="text-muted-foreground mb-4">
                    20+ production-ready components including buttons, cards, forms, and navigation elements.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">Button</Badge>
                    <Badge variant="secondary">Card</Badge>
                    <Badge variant="secondary">Badge</Badge>
                    <Badge variant="secondary">Form</Badge>
                    <Badge variant="secondary">+16 more</Badge>
                  </div>
                </div>
              </div>
            </Card>

            <Card className="p-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                  <PaintBrushIcon className="w-6 h-6 text-green-600 dark:text-green-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">Design Foundation</h3>
                  <p className="text-muted-foreground mb-4">
                    Complete design system with colors, typography, spacing, and theming support.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">Colors</Badge>
                    <Badge variant="secondary">Typography</Badge>
                    <Badge variant="secondary">Dark Mode</Badge>
                    <Badge variant="secondary">Responsive</Badge>
                  </div>
                </div>
              </div>
            </Card>

            <Card className="p-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                  <DocumentTextIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">TypeScript Support</h3>
                  <p className="text-muted-foreground mb-4">
                    Full TypeScript support with proper type definitions and IntelliSense.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">TypeScript</Badge>
                    <Badge variant="secondary">Type Safety</Badge>
                    <Badge variant="secondary">IntelliSense</Badge>
                  </div>
                </div>
              </div>
            </Card>

            <Card className="p-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                  <CheckCircleIcon className="w-6 h-6 text-orange-600 dark:text-orange-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">Best Practices</h3>
                  <p className="text-muted-foreground mb-4">
                    Built with accessibility, performance, and maintainability in mind.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">WCAG 2.1</Badge>
                    <Badge variant="secondary">Performance</Badge>
                    <Badge variant="secondary">SEO Ready</Badge>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>

        {/* Getting Started */}
        <div className="bg-muted/30 rounded-xl p-8 text-center">
          <h2 className="text-2xl font-bold mb-4">Ready to get started?</h2>
          <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
            This starter kit includes all the essential components and foundation elements
            you need to build beautiful interfaces. Perfect for learning and small projects.
          </p>
          <div className="flex gap-4 justify-center">
            <Button size="lg">Browse Components</Button>
            <Button variant="outline" size="lg">Read Documentation</Button>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-border bg-background-primary mt-20">
        <div className="container mx-auto px-4 py-8 max-w-6xl">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 bg-primary rounded flex items-center justify-center">
                <span className="text-primary-foreground font-bold text-xs">P</span>
              </div>
              <span className="font-medium">Percolate UI</span>
            </div>
            <p className="text-sm text-muted-foreground">
              Built with React, TypeScript, and Tailwind CSS
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
`
}

// Main export function
export async function exportStyleguide(options: {
  packageType: "free" | "pro"
  primaryColor?: string
  borderRadius?: number
  font?: string
  materialType?: string
}) {
  try {
    const {
      packageType,
      primaryColor = "222.2 47.4% 11.2%",
      borderRadius = 6,
      font = "Inter",
      materialType = "flat",
    } = options

    const settings: ExportSettings = {
      primaryColor,
      borderRadius,
      font,
      materialType,
      packageType,
    }

    const zip = new JSZip()

    // Add configuration files
    zip.file("package.json", generatePackageJson(packageType))
    zip.file("README.md", generateReadme(packageType, settings))
    zip.file("next.config.mjs", generateNextConfig())
    zip.file("tailwind.config.ts", generateTailwindConfig(settings))
    zip.file("tsconfig.json", generateTsConfig())
    zip.file("postcss.config.js", generatePostcssConfig())

    // Add app files
    const appFolder = zip.folder("app")!
    appFolder.file("globals.css", generateGlobalsCss(settings))
    appFolder.file("layout.tsx", packageType === "free" ? generateStarterLayout() : generateProLayout(settings))
    appFolder.file("page.tsx", packageType === "free" ? generateStarterPage() : generateProPage())

    // Add lib files
    const libFolder = zip.folder("lib")!
    libFolder.file("utils.ts", generateUtils())

    // Add components
    const componentsFolder = zip.folder("components")!
    componentsFolder.file("theme-provider.tsx", generateThemeProvider())
    componentsFolder.file("theme-toggle.tsx", generateThemeToggle())

    // Add UI components
    const uiFolder = componentsFolder.folder("ui")!
    uiFolder.file("button.tsx", generateButton())
    uiFolder.file("card.tsx", generateCard())
    uiFolder.file("badge.tsx", generateBadge())

    // Add more components for Pro version
    if (packageType === "pro") {
      // Add contexts
      const contextsFolder = zip.folder("contexts")!
      contextsFolder.file("sidebar-context.tsx", generateSidebarContext())
      contextsFolder.file("color-context.tsx", generateColorContext())
      contextsFolder.file("design-context.tsx", generateDesignContext())
      contextsFolder.file("material-context.tsx", generateMaterialContext())

      // Add more UI components
      uiFolder.file("input.tsx", generateInput())
      uiFolder.file("dialog.tsx", generateDialog())
      uiFolder.file("collapsible.tsx", generateCollapsible())

      // Add layout components
      const layoutsFolder = componentsFolder.folder("layouts")!
      layoutsFolder.file("app-layout.tsx", generateAppLayout())

      // Add other components
      componentsFolder.file("sidebar.tsx", generateSidebar())
      componentsFolder.file("fixed-header.tsx", generateFixedHeader())
      componentsFolder.file("right-sidebar.tsx", generateRightSidebar())
      componentsFolder.file("right-sidebar-toggle.tsx", generateRightSidebarToggle())
    }

    // Generate and download the zip
    const content = await zip.generateAsync({ type: "blob" })
    const filename = `percolate-ui-${packageType}.zip`

    try {
      saveAs(content, filename)
    } catch (error) {
      // Fallback to native browser download
      const url = URL.createObjectURL(content)
      const link = document.createElement("a")
      link.href = url
      link.download = filename
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    }

    return { success: true, filename }
  } catch (error) {
    console.error("Error exporting design system:", error)
    throw new Error(`Export failed: ${error}`)
  }
}

// Additional helper functions for configuration files
function generateNextConfig() {
  return `/** @type {import('next').NextConfig} */
const nextConfig = {}

export default nextConfig
`
}

function generateTailwindConfig(settings: ExportSettings) {
  return `import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        "background-primary": "var(--background-primary)",
        "background-secondary": "var(--background-secondary)",
        "text-primary": "var(--text-primary)",
        "primary-text": "var(--primary-text)",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
`
}

function generateTsConfig() {
  return JSON.stringify(
    {
      compilerOptions: {
        target: "es5",
        lib: ["dom", "dom.iterable", "esnext"],
        allowJs: true,
        skipLibCheck: true,
        strict: true,
        forceConsistentCasingInFileNames: true,
        noEmit: true,
        esModuleInterop: true,
        module: "esnext",
        moduleResolution: "node",
        resolveJsonModule: true,
        isolatedModules: true,
        jsx: "preserve",
        incremental: true,
        plugins: [
          {
            name: "next",
          },
        ],
        paths: {
          "@/*": ["./*"],
        },
      },
      include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
      exclude: ["node_modules"],
    },
    null,
    2,
  )
}

function generatePostcssConfig() {
  return `module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
`
}

function generateReadme(packageType: "free" | "pro", settings: ExportSettings) {
  return `# Percolate UI ${packageType === "free" ? "Starter Kit" : "Full Package"}

A beautiful design system built with React, TypeScript, and Tailwind CSS.

## 🚀 Quick Start

### Prerequisites
- Node.js 18+ 
- npm, yarn, or pnpm

### Installation

1. **Install dependencies:**
   \`\`\`bash
   npm install
   # or
   yarn install
   # or
   pnpm install
   \`\`\`

2. **Start the development server:**
   \`\`\`bash
   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   \`\`\`

3. **Open your browser:**
   Navigate to [http://localhost:3000](http://localhost:3000)

## 📦 What's Included

${
  packageType === "free"
    ? `
### Starter Kit Features

- **🎨 Design Foundation**: Colors, typography, spacing, and design tokens
- **🧩 Essential Components**: 20+ production-ready React components
- **🌙 Theming**: Light/dark mode support with smooth transitions
- **📱 Responsive**: Mobile-first responsive design
- **♿ Accessible**: WCAG 2.1 AA compliant components
- **🔧 TypeScript**: Full TypeScript support with proper type definitions

### Components Included

- Button, Card, Badge
- Theme Toggle
- Typography system
- Color system
- And more...

### Current Customizations Applied

- **Primary Color**: ${settings.primaryColor}
- **Border Radius**: ${settings.borderRadius}px
- **Font Family**: ${settings.font}
- **Material Type**: ${settings.materialType}
`
    : `
### Full Package Features

- **✨ Everything in Starter Kit**
- **🎛️ Design Controls**: Live customization interface
- **🏗️ Complete Layout**: Full application layout with sidebars
- **📋 Advanced Components**: 35+ components including complex patterns
- **🎨 Material System**: Flat and Glass material design options
- **⚙️ Live Customization**: Real-time design system customization
- **📱 Responsive Sidebars**: Collapsible navigation and control panels

### Additional Features

- Live color customization
- Typography controls  
- Material system (Flat/Glass)
- Border radius controls
- Component showcase
- Advanced layout system

### Current Customizations Applied

- **Primary Color**: ${settings.primaryColor}
- **Border Radius**: ${settings.borderRadius}px
- **Font Family**: ${settings.font}
- **Material Type**: ${settings.materialType}
`
}

## 🏗️ Project Structure

\`\`\`
├── app/                 # Next.js app directory
│   ├── globals.css     # Global styles with your customizations
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Home page
├── components/          # React components
│   ├── ui/             # Base UI components
│   ├── theme-provider.tsx
│   └── theme-toggle.tsx
├── lib/                # Utility functions
│   └── utils.ts        # Tailwind merge utility
${
  packageType === "pro"
    ? `├── contexts/           # React contexts for state management
├── layouts/            # Layout components`
    : ""
}
└── ...
\`\`\`

## 🎨 Customization

### Colors

Colors are defined in \`app/globals.css\` using CSS custom properties:

\`\`\`css
:root {
  --primary: ${settings.primaryColor};
  --background-primary: #ffffff;
  /* ... */
}
\`\`\`

### Typography

Font family is configured in \`app/layout.tsx\`:

\`\`\`tsx
const inter = Inter({ 
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})
\`\`\`

### Border Radius

Global border radius is set to \`${settings.borderRadius}px\` and can be adjusted in the CSS variables.

## 🚀 Building for Production

\`\`\`bash
npm run build
npm start
\`\`\`

## 📚 Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com)
- [Radix UI](https://www.radix-ui.com)
- [Heroicons](https://heroicons.com)

## 📄 License

This project is licensed under the MIT License.

---

**Built with ❤️ using Percolate UI**
`
}

// Pro version specific generators
function generateProLayout(settings: ExportSettings) {
  return `import type { Metadata } from "next"
import { Inter } from 'next/font/google'
import { ThemeProvider } from "@/components/theme-provider"
import { MaterialProvider } from "@/contexts/material-context"
import { SidebarProvider } from "@/contexts/sidebar-context"
import { ColorProvider from "@/contexts/color-context"
import { DesignProvider from "@/contexts/design-context"
import AppLayout from "@/components/layouts/app-layout"
import "./globals.css"

const inter = Inter({ 
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

export const metadata: Metadata = {
  title: "Percolate UI - Full Package",
  description: "A complete design system with live customization controls",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning className={inter.variable}>
      <body className={inter.className + " text-crisp"}>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={false}
          disableTransitionOnChange
        >
          <MaterialProvider>
            <ColorProvider>
              <DesignProvider>
                <SidebarProvider>
                  <AppLayout>{children}</AppLayout>
                </SidebarProvider>
              </DesignProvider>
            </ColorProvider>
          </MaterialProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
`
}

function generateProPage() {
  return `"use client"

import { useRef, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  ArrowRightIcon,
  SwatchIcon,
  CubeIcon,
  DocumentTextIcon,
  CheckCircleIcon,
  CodeBracketIcon,
  PaintBrushIcon,
  CommandLineIcon,
  SparklesIcon,
} from "@heroicons/react/24/outline"
import Link from "next/link"

// Introduction content component
function IntroductionContent() {
  return (
    <div className="max-w-none">
      {/* Hero Section */}
      <div className="mb-24 text-center">
        <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
          Percolate UI Design System
        </h1>
        <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
          A complete design system with live customization controls. Explore components, 
          customize colors and typography, and export your perfect design system.
        </p>
        <div className="flex gap-4 justify-center mb-8">
          <Button size="lg">Explore Components</Button>
          <Button variant="outline" size="lg">Customize Design</Button>
        </div>
        <Badge className="text-sm px-4 py-2">Full Package - Live Customization Enabled</Badge>
      </div>

      {/* Features Overview */}
      <div className="mb-24">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          <div className="text-center">
            <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <CodeBracketIcon className="w-8 h-8 text-blue-600 dark:text-blue-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Live Customization</h3>
            <p className="text-muted-foreground">
              Real-time design controls in the right sidebar. Customize colors, typography, and spacing instantly.
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <SwatchIcon className="w-8 h-8 text-green-600 dark:text-green-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Complete Component Library</h3>
            <p className="text-muted-foreground">
              35+ production-ready components with advanced patterns and complex interactions.
            </p>
          </div>

          <div className="text-center">
            <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
              <SparklesIcon className="w-8 h-8 text-purple-600 dark:text-purple-400" />
            </div>
            <h3 className="text-xl font-semibold mb-3">Export Ready</h3>
            <p className="text-muted-foreground">
              Export your customized design system as a complete Next.js project ready for production.
            </p>
          </div>
        </div>
      </div>

      {/* What's Included */}
      <div className="mb-24">
        <h2 className="text-3xl font-bold mb-12 text-center">Full Package Features</h2>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          <Card className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                <CubeIcon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Complete Component Library</h3>
                <p className="text-muted-foreground mb-4">
                  35+ components including advanced patterns, data tables, forms, and interactive elements.
                </p>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">Buttons</Badge>
                  <Badge variant="secondary">Forms</Badge>
                  <Badge variant="secondary">Tables</Badge>
                  <Badge variant="secondary">Charts</Badge>
                  <Badge variant="secondary">Modals</Badge>
                  <Badge variant="secondary">+30 more</Badge>
                </div>
              </div>
            </div>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                <DocumentTextIcon className="w-6 h-6 text-green-600 dark:text-green-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Live Design Controls</h3>
                <p className="text-muted-foreground mb-4">
                  Real-time customization interface with color pickers, typography controls, and material options.
                </p>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">Color Picker</Badge>
                  <Badge variant="secondary">Typography</Badge>
                  <Badge variant="secondary">Spacing</Badge>
                  <Badge variant="secondary">Materials</Badge>
                  <Badge variant="secondary">Export</Badge>
                </div>
              </div>
            </div>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                <PaintBrushIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Advanced Layout System</h3>
                <p className="text-muted-foreground mb-4">
                  Complete application layout with responsive sidebars, navigation, and content areas.
                </p>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">Responsive</Badge>
                  <Badge variant="secondary">Sidebars</Badge>
                  <Badge variant="secondary">Navigation</Badge>
                  <Badge variant="secondary">Layouts</Badge>
                </div>
              </div>
            </div>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                <CheckCircleIcon className="w-6 h-6 text-orange-600 dark:text-orange-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Production Ready</h3>
                <p className="text-muted-foreground mb-4">
                  Enterprise-grade code quality with TypeScript, accessibility, and performance optimizations.
                </p>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">TypeScript</Badge>
                  <Badge variant="secondary">WCAG 2.1</Badge>
                  <Badge variant="secondary">Performance</Badge>
                  <Badge variant="secondary">SEO</Badge>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Quick Navigation */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-24">
        <Card className="h-full transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer">
          <CardHeader>
            <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center mb-4">
              <PaintBrushIcon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
            <CardTitle>Foundation</CardTitle>
            <CardDescription>
              Colors, typography, spacing, and design principles that power the entire system.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center text-blue-600 dark:text-blue-400 group-hover:translate-x-1 transition-transform">
              Explore Foundation
              <ArrowRightIcon className="w-4 h-4 ml-2" />
            </div>
          </CardContent>
        </Card>

        <Card className="h-full transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer">
          <CardHeader>
            <div className="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mb-4">
              <CodeBracketIcon className="w-6 h-6 text-green-600 dark:text-green-400" />
            </div>
            <CardTitle>Components</CardTitle>
            <CardDescription>
              Production-ready React components with TypeScript support and accessibility built-in.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center text-green-600 dark:text-green-400 group-hover:translate-x-1 transition-transform">
              Browse Components
              <ArrowRightIcon className="w-4 h-4 ml-2" />
            </div>
          </CardContent>
        </Card>

        <Card className="h-full transition-all duration-200 hover:shadow-lg hover:-translate-y-1 cursor-pointer">
          <CardHeader>
            <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center mb-4">
              <CommandLineIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
            </div>
            <CardTitle>Customization</CardTitle>
            <CardDescription>
              Use the right sidebar to customize colors, typography, and export your design system.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center text-purple-600 dark:text-purple-400 group-hover:translate-x-1 transition-transform">
              Start Customizing
              <ArrowRightIcon className="w-4 h-4 ml-2" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Technical Stack */}
      <div className="bg-muted/30 rounded-xl p-8 text-center">
        <h2 className="text-2xl font-bold mb-4">Built with modern tools</h2>
        <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
          Percolate UI is built on proven technologies and follows industry best practices for performance,
          accessibility, and developer experience.
        </p>

        <div className="flex flex-wrap justify-center gap-3">
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            React 19
          </Badge>
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            TypeScript
          </Badge>
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            Tailwind CSS
          </Badge>
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            Radix UI
          </Badge>
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            Next.js 14
          </Badge>
          <Badge variant="secondary" className="px-4 py-2 text-sm">
            Heroicons
          </Badge>
        </div>
      </div>
    </div>
  )
}

export default function HomePage() {
  const contentRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // Force scroll to top on page load
    const forceScrollTop = () => {
      window.scrollTo(0, 0)
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

      if (contentRef.current) {
        contentRef.current.scrollTop = 0
      }
    }

    forceScrollTop()

    // Multiple attempts to ensure it works
    const timeouts = [
      setTimeout(forceScrollTop, 0),
      setTimeout(forceScrollTop, 10),
      setTimeout(forceScrollTop, 50),
      setTimeout(forceScrollTop, 100],
    ]

    return () => {
      timeouts.forEach(clearTimeout)
    }
  }, [])

  return (
    <div
      ref={contentRef}
      className="flex-1 min-h-full main-content overflow-auto scroll-smooth bg-background-primary relative z-0"
    >
      {/* Introduction Content */}
      <section className="w-full bg-background-primary pt-16 pb-32 px-4 md:pl-16 md:pr-16 2xl:pl-32 2xl:pr-32">
        <IntroductionContent />
      </section>
    </div>
  )
}
`
}

// Context generators for Pro version
function generateSidebarContext() {
  return `"use client"

import React, { createContext, useContext, useState, useEffect } from "react"

interface SidebarContextType {
  sidebarVisible: boolean
  setSidebarVisible: (visible: boolean) => void
  toggleSidebar: () => void
}

const SidebarContext = createContext<SidebarContextType | undefined>(undefined)

export function SidebarProvider({ children }: { children: React.ReactNode }) {
  const [sidebarVisible, setSidebarVisible] = useState(true)

  const toggleSidebar = () => {
    setSidebarVisible(!sidebarVisible)
  }

  return (
    <SidebarContext.Provider value={{ sidebarVisible, setSidebarVisible, toggleSidebar }}>
      {children}
    </SidebarContext.Provider>
  )
}

export function useSidebar() {
  const context = useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within SidebarProvider")
  }
  return context
}
`
}

function generateColorContext() {
  return `"use client"

import React, { createContext, useContext, useState } from "react"

interface ColorContextType {
  primaryColor: string
  setPrimaryColor: (color: string) => void
}

const ColorContext = createContext<ColorContextType | undefined>(undefined)

export function ColorProvider({ children }: { children: React.ReactNode }) {
  const [primaryColor, setPrimaryColor] = useState("222.2 47.4% 11.2%")

  return (
    <ColorContext.Provider value={{ primaryColor, setPrimaryColor }}>
      {children}
    </ColorContext.Provider>
  )
}

export function useColorPalette() {
  const context = useContext(ColorContext)
  if (!context) {
    throw new Error("useColorPalette must be used within ColorProvider")
  }
  return context
}
`
}

function generateDesignContext() {
  return `"use client"

import React, { createContext, useContext, useState } from "react"

interface DesignContextType {
  borderRadius: number
  setBorderRadius: (radius: number) => void
  font: string
  setFont: (font: string) => void
}

const DesignContext = createContext<DesignContextType | undefined>(undefined)

export function DesignProvider({ children }: { children: React.ReactNode }) {
  const [borderRadius, setBorderRadius] = useState(6)
  const [font, setFont] = useState("Inter")

  return (
    <DesignContext.Provider value={{ borderRadius, setBorderRadius, font, setFont }}>
      {children}
    </DesignContext.Provider>
  )
}

export function useDesign() {
  const context = useContext(DesignContext)
  if (!context) {
    throw new Error("useDesign must be used within DesignProvider")
  }
  return context
}
`
}

function generateMaterialContext() {
  return `"use client"

import React, { createContext, useContext, useState } from "react"

interface Material {
  name: string
  description: string
}

interface MaterialContextType {
  selectedMaterial: Material
  setSelectedMaterial: (material: Material) => void
  materials: Material[]
}

const materials: Material[] = [
  { name: "Flat", description: "Clean, minimal design" },
  { name: "Glass", description: "Translucent glass effect" },
]

const MaterialContext = createContext<MaterialContextType | undefined>(undefined)

export function MaterialProvider({ children }: { children: React.ReactNode }) {
  const [selectedMaterial, setSelectedMaterial] = useState(materials[0])

  return (
    <MaterialContext.Provider value={{ selectedMaterial, setSelectedMaterial, materials }}>
      {children}
    </MaterialContext.Provider>
  )
}

export function useMaterial() {
  const context = useContext(MaterialContext)
  if (!context) {
    throw new Error("useMaterial must be used within MaterialProvider")
  }
  return context
}
`
}

// Additional UI components for Pro version
function generateInput() {
  return `import * as React from "react"
import { cn } from "@/lib/utils"

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: boolean
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, error, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          error && "border-destructive focus-visible:ring-destructive",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
`
}

function generateDialog() {
  return `"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from 'lucide-react'
import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
`
}

function generateCollapsible() {
  return `"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
`
}

// Layout components for Pro version
function generateAppLayout() {
  return `"use client"

import type React from "react"
import { useEffect, useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { useSidebar from "@/contexts/sidebar-context"
import { RightSidebar from "@/components/right-sidebar"
import { FixedHeader from "@/components/fixed-header"
import { RightSidebarToggle from "@/components/right-sidebar-toggle"

// Create a wrapper component that uses the sidebar context
function AppLayoutContent({ children }: { children: React.ReactNode }) {
  const { sidebarVisible, toggleSidebar } = useSidebar()
  const [isInitialized, setIsInitialized] = useState(false)

  // Add event listener for the toggle-sidebar event
  useEffect(() => {
    const handleToggleSidebar = () => {
      toggleSidebar()
    }

    window.addEventListener("toggle-sidebar", handleToggleSidebar)
    return () => {
      window.removeEventListener("toggle-sidebar", handleToggleSidebar)
    }
  }, [toggleSidebar])

  // Mark as initialized after first render to enable transitions
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsInitialized(true)
    }, 100)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="min-h-screen bg-background-primary">
      {/* Fixed Header */}
      <FixedHeader />

      {/* Left Sidebar */}
      <div
        className="fixed top-0 left-0 h-screen w-64 z-40 bg-background-secondary hidden md:block"
        style={{
          transform: sidebarVisible ? "translate3d(0, 0, 0)" : "translate3d(-100%, 0, 0)",
          transition: isInitialized ? "transform 400ms cubic-bezier(0.23, 1, 0.32, 1)" : "none",
          willChange: "transform",
        }}
      >
        <Sidebar />
      </div>

      {/* Main Content Area */}
      <div
        className="min-h-screen md:pr-72"
        style={{
          marginLeft: sidebarVisible ? "16rem" : "0",
          transition: isInitialized ? "margin-left 400ms cubic-bezier(0.23, 1, 0.32, 1)" : "none",
        }}
      >
        {children}
      </div>

      {/* Right Sidebar */}
      <div className="fixed top-16 right-4 bottom-0 w-64 flex-shrink-0 right-sidebar z-20 hidden md:flex opacity-100">
        <RightSidebar />
      </div>

      {/* Right Sidebar Toggle */}
      <div className="fixed bottom-4 right-4 z-40">
        <RightSidebarToggle />
      </div>
    </div>
  )
}

// Main layout component that sets up providers
export default function AppLayout({ children }: { children: React.ReactNode }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className="min-h-screen bg-background-primary">
        <div className="fixed top-0 left-0 right-0 h-16 bg-background-primary border-b border-border z-50" />
        <div className="fixed top-0 left-0 h-screen w-64 bg-background-secondary border-r border-border z-40 hidden md:block" />
        <div className="md:ml-64 pt-16">
          <div className="flex items-center justify-center h-96">
            <div className="text-muted-foreground">Loading...</div>
          </div>
        </div>
      </div>
    )
  }

  return <AppLayoutContent>{children}</AppLayoutContent>
}
`
}

function generateSidebar() {
  return `"use client"

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { ChevronsLeft, ChevronDown } from 'lucide-react'
import { useSidebar } from "@/contexts/sidebar-context"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

// Foundation items
const foundationItems = [
  { name: "Color", id: "color" },
  { name: "Typography", id: "typography" },
  { name: "Spacing", id: "spacing" },
  { name: "Elevation", id: "elevation" },
]

// Component items
const componentItems = [
  { name: "Button", id: "buttons" },
  { name: "Card", id: "cards" },
  { name: "Badge", id: "badges" },
  { name: "Input", id: "inputs" },
  { name: "Dialog", id: "dialogs" },
]

export function Sidebar() {
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)
  const { setSidebarVisible } = useSidebar()

  const [openSections, setOpenSections] = useState({
    foundation: true,
    components: true,
  })

  const toggleSection = (section: string) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return null
  }

  const currentSection = pathname.replace("/", "") || "introduction"

  return (
    <div className="h-full bg-background-secondary border-r border-border">
      {/* Logo and toggle header */}
      <div className="h-16 flex items-center justify-between px-4">
        <Link href="/" className="font-semibold text-lg cursor-pointer hover:text-primary transition-colors flex items-center gap-2">
          <div className="w-6 h-6 bg-primary rounded flex items-center justify-center">
            <span className="text-primary-foreground font-bold text-xs">P</span>
          </div>
          <span>Percolate UI</span>
        </Link>

        <button
          onClick={() => setSidebarVisible(false)}
          className="text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center w-8 h-8 rounded-md hover:bg-background-primary"
          title="Hide sidebar"
        >
          <ChevronsLeft className="h-5 w-5" />
          <span className="sr-only">Hide sidebar</span>
        </button>
      </div>

      <div className="h-[calc(100%-4rem)] overflow-y-auto">
        <div className="p-4 pt-6">
          {/* Introduction section */}
          <div className="mb-6">
            <Link href="/">
              <button
                className={cn(
                  "flex items-center px-3 py-1 text-sm w-full text-left rounded-md",
                  currentSection === "introduction" ? "text-foreground font-medium bg-background-primary" : "hover:text-foreground hover:bg-background-primary",
                )}
              >
                Introduction
              </button>
            </Link>
          </div>

          {/* Foundation section */}
          <Collapsible open={openSections.foundation} onOpenChange={() => toggleSection("foundation")}>
            <CollapsibleTrigger className="flex items-center justify-between w-full text-xs font-medium mb-1 px-2 hover:text-foreground transition-colors">
              FOUNDATION
              <ChevronDown className={cn("h-3 w-3 transition-transform", openSections.foundation ? "rotate-180" : "")} />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <nav className="mb-4 space-y-1">
                {foundationItems.map((item) => (
                  <Link key={item.id} href={\`/\${item.id}\`}>
                    <button
                      className={cn(
                        "flex items-center px-3 py-1 text-sm w-full text-left rounded-md",
                        currentSection === item.id ? "text-foreground font-medium bg-background-primary" : "hover:text-foreground hover:bg-background-primary",
                      )}
                    >
                      {item.name}
                    </button>
                  </Link>
                ))}
              </nav>
            </CollapsibleContent>
          </Collapsible>

          {/* Components section */}
          <Collapsible open={openSections.components} onOpenChange={() => toggleSection("components")}>
            <CollapsibleTrigger className="flex items-center justify-between w-full text-xs font-medium mb-1 px-2 mt-6 hover:text-foreground transition-colors">
              COMPONENTS
              <ChevronDown className={cn("h-3 w-3 transition-transform", openSections.components ? "rotate-180" : "")} />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <nav className="space-y-1">
                {componentItems.map((item) => (
                  <Link key={item.id} href={\`/\${item.id}\`}>
                    <button
                      className={cn(
                        "flex items-center px-3 py-1 text-sm w-full text-left rounded-md",
                        currentSection === item.id ? "text-foreground font-medium bg-background-primary" : "hover:text-foreground hover:bg-background-primary",
                      )}
                    >
                      {item.name}
                    </button>
                  </Link>
                ))}
              </nav>
            </CollapsibleContent>
          </Collapsible>
        </div>
      </div>
    </div>
  )
}
`
}

function generateFixedHeader() {
  return `"use client"

import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"
import { Menu } from 'lucide-react'
import { useSidebar } from "@/contexts/sidebar-context"

export function FixedHeader() {
  const { sidebarVisible, toggleSidebar } = useSidebar()

  return (
    <header className="fixed top-0 left-0 right-0 h-16 bg-background-primary border-b border-border z-50">
      <div className="h-full flex items-center justify-between px-4">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleSidebar}
            className="md:hidden"
          >
            <Menu className="h-5 w-5" />
            <span className="sr-only">Toggle sidebar</span>
          </Button>
          
          {!sidebarVisible && (
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleSidebar}
              className="hidden md:flex"
            >
              <Menu className="h-5 w-5" />
              <span className="sr-only">Show sidebar</span>
            </Button>
          )}
        </div>

        <div className="flex items-center gap-4">
          <ThemeToggle />
        </div>
      </div>
    </header>
  )
}
`
}

function generateRightSidebar() {
  return `"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useColorPalette } from "@/contexts/color-context"
import { useDesign } from "@/contexts/design-context"
import { useMaterial } from "@/contexts/material-context"

export function RightSidebar() {
  const { primaryColor, setPrimaryColor } = useColorPalette()
  const { borderRadius, setBorderRadius, font, setFont } = useDesign()
  const { selectedMaterial, setSelectedMaterial, materials } = useMaterial()

  return (
    <div className="w-full h-full bg-background-secondary border border-border rounded-lg overflow-hidden">
      <div className="h-full overflow-y-auto">
        <div className="p-4">
          <div className="mb-6">
            <h2 className="text-lg font-semibold mb-2">Design Controls</h2>
            <p className="text-sm text-muted-foreground">
              Customize your design system in real-time
            </p>
          </div>

          {/* Color Controls */}
          <Card className="mb-4">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Primary Color</CardTitle>
              <CardDescription className="text-xs">
                Choose your brand's primary color
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-3 gap-2">
                {["222.2 47.4% 11.2%", "221.2 83.2% 53.3%", "142.1 76.2% 36.3%"].map((color) => (
                  <button
                    key={color}
                    onClick={() => setPrimaryColor(color)}
                    className="w-full h-8 rounded border-2 transition-all"
                    style={{
                      backgroundColor: \`hsl(\${color})\`,
                      borderColor: primaryColor === color ? "hsl(var(--ring))" : "transparent",
                    }}
                  />
                ))}
              </div>
              <div className="text-xs text-muted-foreground">
                Current: {primaryColor}
              </div>
            </CardContent>
          </Card>

          {/* Border Radius */}
          <Card className="mb-4">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Border Radius</CardTitle>
              <CardDescription className="text-xs">
                Adjust component roundness
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-4 gap-2">
                {[0, 4, 6, 12].map((radius) => (
                  <Button
                    key={radius}
                    variant={borderRadius === radius ? "default" : "outline"}
                    size="sm"
                    onClick={() => setBorderRadius(radius)}
                    className="text-xs"
                  >
                    {radius}px
                  </Button>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Typography */}
          <Card className="mb-4">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Typography</CardTitle>
              <CardDescription className="text-xs">
                Select your font family
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              {["Inter", "Roboto", "Open Sans", "Poppins"].map((fontFamily) => (
                <Button
                  key={fontFamily}
                  variant={font === fontFamily ? "default" : "outline"}
                  size="sm"
                  onClick={() => setFont(fontFamily)}
                  className="w-full text-xs justify-start"
                  style={{ fontFamily }}
                >
                  {fontFamily}
                </Button>
              ))}
            </CardContent>
          </Card>

          {/* Material Type */}
          <Card className="mb-4">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Material</CardTitle>
              <CardDescription className="text-xs">
                Choose your design style
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              {materials.map((material) => (
                <Button
                  key={material.name}
                  variant={selectedMaterial.name === material.name ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedMaterial(material)}
                  className="w-full text-xs justify-start"
                >
                  <div className="text-left">
                    <div>{material.name}</div>
                    <div className="text-xs opacity-70">{material.description}</div>
                  </div>
                </Button>
              ))}
            </CardContent>
          </Card>

          {/* Export */}
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm">Export</CardTitle>
              <CardDescription className="text-xs">
                Download your customized design system
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button className="w-full" size="sm">
                Export Design System
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
`
}

function generateRightSidebarToggle() {
  return `"use client"

import { Button } from "@/components/ui/button"
import { Settings } from 'lucide-react'

export function RightSidebarToggle() {
  return (
    <Button size="icon" className="rounded-full shadow-lg">
      <Settings className="h-4 w-4" />
      <span className="sr-only">Toggle design controls</span>
    </Button>
  )
}
`
}