import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Input } from '@/components/ui/input'
import { 
  BookOpen, 
  MapPin, 
  FileCode, 
  CheckCircle, 
  Clock, 
  Sparkle,
  Code,
  Database,
  Tree,
  PaintBrush,
  Flask,
  Play,
  Cube,
  Wrench,
  Gear,
  Package,
  Rocket,
  Target,
  Lightbulb,
  MagnifyingGlass,
  GitBranch
} from '@phosphor-icons/react'

export function DocumentationView() {
  const [activeTab, setActiveTab] = useState('readme')
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <div className="h-full flex flex-col bg-background">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
        <div className="border-b border-border bg-card px-6 py-3 space-y-3">
          <div className="flex items-center gap-3">
            <TabsList className="bg-muted/50">
              <TabsTrigger value="readme" className="gap-2">
                <BookOpen size={18} />
                README
              </TabsTrigger>
              <TabsTrigger value="roadmap" className="gap-2">
                <MapPin size={18} />
                Roadmap
              </TabsTrigger>
              <TabsTrigger value="agents" className="gap-2">
                <FileCode size={18} />
                Agents Files
              </TabsTrigger>
              <TabsTrigger value="pwa" className="gap-2">
                <Rocket size={18} />
                PWA Guide
              </TabsTrigger>
              <TabsTrigger value="sass" className="gap-2">
                <PaintBrush size={18} />
                Sass Styles Guide
              </TabsTrigger>
              <TabsTrigger value="cicd" className="gap-2">
                <GitBranch size={18} />
                CI/CD Guide
              </TabsTrigger>
            </TabsList>
          </div>
          <div className="relative">
            <MagnifyingGlass size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Search documentation..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

        <ScrollArea className="flex-1">
          <div className="max-w-5xl mx-auto p-8">
            <TabsContent value="readme" className="m-0 space-y-6">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                    <Code size={32} weight="duotone" className="text-white" />
                  </div>
                  <div>
                    <h1 className="text-4xl font-bold">CodeForge</h1>
                    <p className="text-lg text-muted-foreground">
                      Low-Code Next.js App Builder with AI
                    </p>
                  </div>
                </div>

                <Separator />

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Overview</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge is a comprehensive visual low-code platform for generating production-ready Next.js applications. 
                    It combines the power of visual designers with direct code editing, AI-powered generation, and a complete 
                    full-stack development toolkit.
                  </p>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Rocket size={20} weight="duotone" />
                      Key Features
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="Monaco Code Editor"
                      description="Full-featured code editor with syntax highlighting, autocomplete, and AI-powered improvements"
                    />
                    <FeatureItem 
                      icon={<Database size={18} />}
                      title="Prisma Schema Designer"
                      description="Visual database model designer with automatic schema generation and AI assistance"
                    />
                    <FeatureItem 
                      icon={<Tree size={18} />}
                      title="Component Tree Builder"
                      description="Hierarchical component structure builder with drag-and-drop and AI generation"
                    />
                    <FeatureItem 
                      icon={<PaintBrush size={18} />}
                      title="Theme Designer"
                      description="Material UI theme customizer with multiple variants, custom colors, and AI theme generation"
                    />
                    <FeatureItem 
                      icon={<Flask size={18} />}
                      title="Flask Backend Designer"
                      description="Visual Python Flask API designer with blueprints, endpoints, and CORS configuration"
                    />
                    <FeatureItem 
                      icon={<Play size={18} />}
                      title="Playwright Test Designer"
                      description="E2E test builder with step configuration and AI test generation"
                    />
                    <FeatureItem 
                      icon={<Cube size={18} />}
                      title="Unit Test Designer"
                      description="Comprehensive test suite builder for components, functions, hooks, and integration tests"
                    />
                    <FeatureItem 
                      icon={<Wrench size={18} />}
                      title="Auto Error Repair"
                      description="Automated error detection and AI-powered code repair system"
                    />
                    <FeatureItem 
                      icon={<Gear size={18} />}
                      title="Project Settings"
                      description="Configure Next.js options, npm packages, scripts, and build settings"
                    />
                    <FeatureItem 
                      icon={<Sparkle size={18} />}
                      title="AI Integration"
                      description="OpenAI-powered generation across all features for rapid development"
                    />
                  </CardContent>
                </Card>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Getting Started</h2>
                  <Card>
                    <CardContent className="pt-6 space-y-4">
                      <div className="space-y-2">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">1</span>
                          Create Your First Model
                        </h3>
                        <p className="text-muted-foreground ml-8">
                          Navigate to the <strong>Models</strong> tab and create your database schema using the visual designer 
                          or describe your data model to the AI.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">2</span>
                          Design Your Components
                        </h3>
                        <p className="text-muted-foreground ml-8">
                          Use the <strong>Components</strong> tab to build your UI hierarchy visually or let the AI generate 
                          component structures based on your requirements.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">3</span>
                          Customize Your Theme
                        </h3>
                        <p className="text-muted-foreground ml-8">
                          Head to the <strong>Styling</strong> tab to create custom color palettes, manage theme variants (light/dark), 
                          and configure typography.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">4</span>
                          Build Your Backend
                        </h3>
                        <p className="text-muted-foreground ml-8">
                          Configure your Flask API in the <strong>Flask API</strong> tab by creating blueprints and endpoints 
                          with full CORS and authentication support.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="text-lg font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm">5</span>
                          Export Your Project
                        </h3>
                        <p className="text-muted-foreground ml-8">
                          Click <strong>Export Project</strong> to generate all files including Next.js pages, Prisma schemas, 
                          Flask backend, tests, and configuration files ready for deployment.
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                </div>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">AI-Powered Features</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge integrates OpenAI across every designer to accelerate development:
                  </p>
                  <div className="grid gap-3">
                    <AIFeatureCard 
                      title="Complete App Generation"
                      description="Describe your application and get a full project structure with models, components, and styling"
                    />
                    <AIFeatureCard 
                      title="Model Generation"
                      description="Generate Prisma models with fields and relations from natural language descriptions"
                    />
                    <AIFeatureCard 
                      title="Component Creation"
                      description="Build complex React components with proper structure and Material UI integration"
                    />
                    <AIFeatureCard 
                      title="Theme Generation"
                      description="Create beautiful, accessible color palettes that match your brand or description"
                    />
                    <AIFeatureCard 
                      title="Test Generation"
                      description="Generate comprehensive E2E, unit, and integration tests with proper assertions"
                    />
                    <AIFeatureCard 
                      title="Code Explanation"
                      description="Get detailed explanations of any code snippet to understand implementation details"
                    />
                    <AIFeatureCard 
                      title="Code Improvement"
                      description="Automatically optimize code for performance, readability, and best practices"
                    />
                    <AIFeatureCard 
                      title="Error Repair"
                      description="Automatically detect and fix syntax, type, import, and lint errors with context-aware fixes"
                    />
                  </div>
                </div>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Technology Stack</h2>
                  <div className="grid md:grid-cols-2 gap-4">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-base">Frontend</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2 text-sm text-foreground/80">
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Next.js 14 with App Router
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            React 18 with TypeScript
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Material UI 5
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Monaco Editor
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Tailwind CSS
                          </li>
                        </ul>
                      </CardContent>
                    </Card>
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-base">Backend & Tools</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2 text-sm text-foreground/80">
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Flask REST API
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Prisma ORM
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Playwright E2E Testing
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Vitest & React Testing Library
                          </li>
                          <li className="flex items-center gap-2">
                            <CheckCircle size={16} weight="fill" className="text-accent" />
                            Storybook for Components
                          </li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>
                </div>

                <Card className="bg-accent/10 border-accent/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Lightbulb size={20} weight="duotone" className="text-accent" />
                      Pro Tips
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2 text-sm">
                    <p>💡 Use the AI Generate feature to quickly scaffold entire applications from descriptions</p>
                    <p>💡 The Error Repair tab automatically scans and fixes common issues - check it before exporting</p>
                    <p>💡 Create multiple theme variants (light, dark, custom) in the Styling tab for complete theme support</p>
                    <p>💡 Test your components with Storybook stories before writing full E2E tests</p>
                    <p>💡 Flask blueprints help organize your API endpoints by feature or resource</p>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="roadmap" className="m-0 space-y-6">
              <div className="space-y-4">
                <h1 className="text-4xl font-bold flex items-center gap-3">
                  <MapPin size={36} weight="duotone" className="text-accent" />
                  Product Roadmap
                </h1>
                <p className="text-lg text-muted-foreground">
                  Features delivered and planned for CodeForge development
                </p>

                <Separator />

                <div className="space-y-6">
                  <div>
                    <div className="flex items-center gap-3 mb-4">
                      <CheckCircle size={24} weight="fill" className="text-green-500" />
                      <h2 className="text-2xl font-semibold">Completed Features</h2>
                    </div>
                    <div className="space-y-3 ml-9">
                      <RoadmapItem 
                        status="completed"
                        title="Monaco Code Editor Integration"
                        description="Full-featured code editor with syntax highlighting, multi-file tabs, and auto-save"
                        version="v1.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Prisma Schema Designer"
                        description="Visual database model designer with fields, relations, and schema generation"
                        version="v1.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Component Tree Builder"
                        description="Hierarchical React component structure builder with Material UI components"
                        version="v1.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Theme Designer"
                        description="Material UI theme customizer with color palettes and typography configuration"
                        version="v1.1"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="OpenAI Integration"
                        description="AI-powered generation across models, components, themes, and code"
                        version="v2.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Multi-Theme Variants"
                        description="Support for light, dark, and custom theme variants with unlimited custom colors"
                        version="v2.1"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Playwright Test Designer"
                        description="Visual E2E test builder with step-by-step configuration and AI generation"
                        version="v3.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Storybook Story Designer"
                        description="Component story builder with args configuration and category organization"
                        version="v3.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Unit Test Designer"
                        description="Comprehensive test suite builder for components, functions, hooks, and integration tests"
                        version="v3.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Auto Error Detection & Repair"
                        description="Automated error scanning with AI-powered context-aware code repair"
                        version="v3.1"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Responsive UI Improvements"
                        description="Multi-row tab support and improved layout for complex applications"
                        version="v3.2"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Flask Backend Designer"
                        description="Python Flask REST API designer with blueprints, endpoints, and CORS configuration"
                        version="v4.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Project Settings Designer"
                        description="Next.js configuration, npm package management, and build script customization"
                        version="v4.0"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="CI/CD Configuration"
                        description="Complete CI/CD pipelines for GitHub Actions, GitLab CI, Jenkins, and CircleCI"
                        version="v4.2"
                      />
                      <RoadmapItem 
                        status="completed"
                        title="Docker Containerization"
                        description="Multi-stage Docker builds with Nginx, docker-compose, and health checks"
                        version="v4.2"
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex items-center gap-3 mb-4">
                      <Clock size={24} weight="duotone" className="text-accent" />
                      <h2 className="text-2xl font-semibold">Planned Features</h2>
                    </div>
                    <div className="space-y-3 ml-9">
                      <RoadmapItem 
                        status="planned"
                        title="Real-Time Preview"
                        description="Live preview of generated applications with hot reload"
                        version="v4.1"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Database Seeding Designer"
                        description="Visual interface for creating seed data for Prisma models"
                        version="v4.2"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="API Client Generator"
                        description="Generate TypeScript API clients from Flask backend definitions"
                        version="v4.2"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Form Builder"
                        description="Visual form designer with validation, field types, and submission handling"
                        version="v4.3"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Authentication Designer"
                        description="Configure authentication flows (JWT, OAuth, sessions) for both frontend and backend"
                        version="v5.0"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Docker Configuration"
                        description="Generate Docker and docker-compose files for containerized deployment"
                        version="v5.0"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="GraphQL API Designer"
                        description="Alternative to Flask REST - design GraphQL schemas and resolvers"
                        version="v5.1"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="State Management Designer"
                        description="Configure Redux, Zustand, or Jotai state management patterns"
                        version="v5.2"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="CI/CD Pipeline Generator"
                        description="Generate GitHub Actions, GitLab CI, or CircleCI configuration files"
                        version="v5.3"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Component Library Export"
                        description="Export designed components as a standalone npm package"
                        version="v6.0"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Design System Generator"
                        description="Create complete design systems with tokens, components, and documentation"
                        version="v6.0"
                      />
                      <RoadmapItem 
                        status="planned"
                        title="Collaboration Features"
                        description="Real-time collaborative editing and commenting system"
                        version="v6.1"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="agents" className="m-0 space-y-6">
              <div className="space-y-4">
                <h1 className="text-4xl font-bold flex items-center gap-3">
                  <FileCode size={36} weight="duotone" className="text-accent" />
                  Agents Files
                </h1>
                <p className="text-lg text-muted-foreground">
                  AI agent configuration and service architecture
                </p>

                <Separator />

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">AI Service Architecture</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge uses a modular AI service architecture that integrates OpenAI's GPT models across all features. 
                    Each designer has specialized prompts and validation logic to ensure high-quality generated code.
                  </p>

                  <Card>
                    <CardHeader>
                      <CardTitle>Core AI Services</CardTitle>
                      <CardDescription>Primary modules handling AI operations</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <AgentFileItem 
                        filename="ai-service.ts"
                        path="/src/lib/ai-service.ts"
                        description="Central AI service orchestrating OpenAI API calls"
                        features={[
                          'Complete application generation from descriptions',
                          'Model generation with Prisma schema validation',
                          'Component generation with Material UI integration',
                          'Theme generation with color theory and accessibility',
                          'Code explanation and documentation',
                          'Code improvement and optimization',
                          'Test generation for Playwright, Storybook, and unit tests'
                        ]}
                      />
                      <AgentFileItem 
                        filename="error-repair-service.ts"
                        path="/src/lib/error-repair-service.ts"
                        description="Error detection and automated repair system"
                        features={[
                          'Syntax error detection and repair',
                          'Import statement validation and fixes',
                          'TypeScript type error resolution',
                          'ESLint violation detection and fixes',
                          'Context-aware repair using related files',
                          'Batch repair operations',
                          'Repair explanation generation'
                        ]}
                      />
                      <AgentFileItem 
                        filename="generators.ts"
                        path="/src/lib/generators.ts"
                        description="Code generation utilities for project export"
                        features={[
                          'Next.js project structure generation',
                          'Prisma schema file generation',
                          'Material UI theme configuration',
                          'Playwright test file generation',
                          'Storybook story file generation',
                          'Unit test file generation',
                          'Flask application structure',
                          'Package.json configuration'
                        ]}
                      />
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>AI Integration Points</CardTitle>
                      <CardDescription>Features enhanced by AI capabilities</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="grid gap-4">
                        <IntegrationPoint 
                          component="ModelDesigner"
                          capabilities={[
                            'Generate models from natural language',
                            'Suggest appropriate field types',
                            'Create relations between models',
                            'Generate realistic field names and structures'
                          ]}
                        />
                        <IntegrationPoint 
                          component="ComponentTreeBuilder"
                          capabilities={[
                            'Generate component hierarchies',
                            'Suggest Material UI components',
                            'Create prop configurations',
                            'Build complex layouts from descriptions'
                          ]}
                        />
                        <IntegrationPoint 
                          component="StyleDesigner"
                          capabilities={[
                            'Generate color palettes from descriptions',
                            'Ensure WCAG accessibility compliance',
                            'Create harmonious color relationships',
                            'Suggest typography pairings'
                          ]}
                        />
                        <IntegrationPoint 
                          component="CodeEditor"
                          capabilities={[
                            'Explain code functionality',
                            'Improve code quality and performance',
                            'Suggest best practices',
                            'Generate inline documentation'
                          ]}
                        />
                        <IntegrationPoint 
                          component="PlaywrightDesigner"
                          capabilities={[
                            'Generate E2E test scenarios',
                            'Create test steps from user flows',
                            'Suggest appropriate selectors',
                            'Generate assertions for validations'
                          ]}
                        />
                        <IntegrationPoint 
                          component="StorybookDesigner"
                          capabilities={[
                            'Generate component stories',
                            'Create meaningful story variations',
                            'Configure args based on prop types',
                            'Organize stories by categories'
                          ]}
                        />
                        <IntegrationPoint 
                          component="UnitTestDesigner"
                          capabilities={[
                            'Generate comprehensive test suites',
                            'Create test cases with assertions',
                            'Generate setup and teardown code',
                            'Cover edge cases and error scenarios'
                          ]}
                        />
                        <IntegrationPoint 
                          component="ErrorPanel"
                          capabilities={[
                            'Analyze error patterns',
                            'Generate context-aware fixes',
                            'Explain error causes',
                            'Prevent similar errors in future'
                          ]}
                        />
                      </div>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle>Prompt Engineering</CardTitle>
                      <CardDescription>How we optimize AI interactions</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <h3 className="font-semibold">Context Preservation</h3>
                        <p className="text-sm text-muted-foreground">
                          All AI prompts include relevant project context such as existing models, components, 
                          and theme configurations to ensure generated code integrates seamlessly.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold">Format Specification</h3>
                        <p className="text-sm text-muted-foreground">
                          Prompts specify exact output formats (JSON, TypeScript, Python) with strict schemas 
                          to ensure parseable and valid responses.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold">Best Practices Enforcement</h3>
                        <p className="text-sm text-muted-foreground">
                          Generated code follows Next.js, React, and Flask best practices through detailed 
                          prompt instructions and post-processing validation.
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold">Error Handling</h3>
                        <p className="text-sm text-muted-foreground">
                          Fallback mechanisms and retry logic ensure graceful degradation when AI services 
                          are unavailable or responses are malformed.
                        </p>
                      </div>
                    </CardContent>
                  </Card>

                  <Card className="bg-muted/50">
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Package size={20} weight="duotone" />
                        Future AI Enhancements
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2 text-sm">
                        <li className="flex items-start gap-2">
                          <Target size={16} className="text-accent mt-1 flex-shrink-0" />
                          <span><strong>Multi-Model Support:</strong> Integration with Claude, Gemini, and other LLMs for specialized tasks</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Target size={16} className="text-accent mt-1 flex-shrink-0" />
                          <span><strong>Fine-Tuned Models:</strong> Custom models trained on specific frameworks and design patterns</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Target size={16} className="text-accent mt-1 flex-shrink-0" />
                          <span><strong>Code Review Agent:</strong> Automated code review with security and performance analysis</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Target size={16} className="text-accent mt-1 flex-shrink-0" />
                          <span><strong>Conversational Interface:</strong> Chat-based project building with natural language commands</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <Target size={16} className="text-accent mt-1 flex-shrink-0" />
                          <span><strong>Learning System:</strong> AI that learns from user corrections and preferences over time</span>
                        </li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </TabsContent>

            <TabsContent value="pwa" className="m-0 space-y-6">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                    <Rocket size={32} weight="duotone" className="text-white" />
                  </div>
                  <div>
                    <h1 className="text-4xl font-bold">Progressive Web App</h1>
                    <p className="text-lg text-muted-foreground">
                      Offline-first experience with native-like capabilities
                    </p>
                  </div>
                </div>

                <Separator />

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Overview</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge is a fully-featured Progressive Web App that can be installed on any device and works offline. 
                    With intelligent caching, automatic updates, and native app-like features, you can build applications anywhere, anytime.
                  </p>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>PWA Features</CardTitle>
                    <CardDescription>Native app capabilities in your browser</CardDescription>
                  </CardHeader>
                  <CardContent className="grid md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">Installable</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Install on desktop or mobile for quick access from your home screen or applications menu
                      </p>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">Offline Support</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Work without internet connection; changes sync automatically when you reconnect
                      </p>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">Automatic Updates</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Get notified when new versions are available with one-click updates
                      </p>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">Push Notifications</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Opt-in to receive updates about builds, errors, and new features
                      </p>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">App Shortcuts</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Quick access to Dashboard, Code Editor, and Models from your OS
                      </p>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <CheckCircle size={16} weight="fill" className="text-accent" />
                        <span className="font-semibold text-sm">Share Target</span>
                      </div>
                      <p className="text-xs text-muted-foreground ml-6">
                        Share code files directly to CodeForge from other apps
                      </p>
                    </div>
                  </CardContent>
                </Card>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Installation</h2>
                  
                  <div className="grid md:grid-cols-2 gap-4">
                    <Card>
                      <CardHeader>
                        <CardTitle className="text-base">Desktop Installation</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3 text-sm">
                        <div>
                          <div className="font-semibold mb-1">Chrome/Edge/Brave:</div>
                          <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
                            <li>Look for install icon (⊕) in address bar</li>
                            <li>Click "Install" or use prompt in app</li>
                            <li>App added to applications menu</li>
                          </ol>
                        </div>
                        <div>
                          <div className="font-semibold mb-1">Safari (macOS):</div>
                          <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
                            <li>Click File → Add to Dock</li>
                            <li>App appears in Dock</li>
                          </ol>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle className="text-base">Mobile Installation</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3 text-sm">
                        <div>
                          <div className="font-semibold mb-1">iOS (Safari):</div>
                          <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
                            <li>Tap Share button</li>
                            <li>Select "Add to Home Screen"</li>
                            <li>Tap "Add"</li>
                          </ol>
                        </div>
                        <div>
                          <div className="font-semibold mb-1">Android (Chrome):</div>
                          <ol className="list-decimal list-inside space-y-1 text-muted-foreground ml-2">
                            <li>Tap menu (three dots)</li>
                            <li>Select "Install app"</li>
                            <li>Confirm installation</li>
                          </ol>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">PWA Settings</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    Navigate to the <strong>PWA</strong> tab to manage all Progressive Web App features:
                  </p>
                  
                  <Card>
                    <CardHeader>
                      <CardTitle>Available Controls</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="space-y-2">
                        <div className="font-semibold">Installation Status</div>
                        <p className="text-sm text-muted-foreground">
                          Check if app is installed and trigger installation if available
                        </p>
                      </div>
                      <Separator />
                      <div className="space-y-2">
                        <div className="font-semibold">Network Status</div>
                        <p className="text-sm text-muted-foreground">
                          Real-time online/offline indicator with connectivity information
                        </p>
                      </div>
                      <Separator />
                      <div className="space-y-2">
                        <div className="font-semibold">Push Notifications</div>
                        <p className="text-sm text-muted-foreground">
                          Toggle notifications and manage permissions
                        </p>
                      </div>
                      <Separator />
                      <div className="space-y-2">
                        <div className="font-semibold">Cache Management</div>
                        <p className="text-sm text-muted-foreground">
                          View cache size, service worker status, and clear cached data
                        </p>
                      </div>
                      <Separator />
                      <div className="space-y-2">
                        <div className="font-semibold">Update Management</div>
                        <p className="text-sm text-muted-foreground">
                          Install pending updates when new versions are available
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                </div>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Offline Capabilities</h2>
                  
                  <div className="grid md:grid-cols-2 gap-4">
                    <Card className="border-accent/50">
                      <CardHeader>
                        <CardTitle className="text-base flex items-center gap-2">
                          <CheckCircle size={20} weight="fill" className="text-accent" />
                          Works Offline
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2 text-sm text-foreground/80">
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>View and edit existing projects</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>Browse files and code</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>Use Monaco editor</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>Navigate all tabs</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>View documentation</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="text-accent mt-0.5">•</span>
                            <span>Make changes locally</span>
                          </li>
                        </ul>
                      </CardContent>
                    </Card>

                    <Card className="border-muted">
                      <CardHeader>
                        <CardTitle className="text-base flex items-center gap-2">
                          <Wrench size={20} weight="duotone" className="text-muted-foreground" />
                          Requires Internet
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ul className="space-y-2 text-sm text-muted-foreground">
                          <li className="flex items-start gap-2">
                            <span className="mt-0.5">•</span>
                            <span>AI-powered generation</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="mt-0.5">•</span>
                            <span>External font loading</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="mt-0.5">•</span>
                            <span>Database sync</span>
                          </li>
                          <li className="flex items-start gap-2">
                            <span className="mt-0.5">•</span>
                            <span>External resources</span>
                          </li>
                        </ul>
                      </CardContent>
                    </Card>
                  </div>
                </div>

                <Card className="bg-accent/10 border-accent/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Lightbulb size={20} weight="duotone" className="text-accent" />
                      Pro Tips
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-start gap-2">
                        <span className="text-accent mt-1">•</span>
                        <span><strong>Install for best performance:</strong> Installed apps load faster and work more reliably offline</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-accent mt-1">•</span>
                        <span><strong>Save before going offline:</strong> Ensure projects are saved to local storage before losing connection</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-accent mt-1">•</span>
                        <span><strong>Clear cache if issues arise:</strong> Use PWA settings to clear cache and reload with fresh data</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-accent mt-1">•</span>
                        <span><strong>Enable notifications:</strong> Stay informed about updates and build completions</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-accent mt-1">•</span>
                        <span><strong>Update regularly:</strong> New versions bring performance improvements and features</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="sass" className="m-0 space-y-6">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                    <PaintBrush size={32} weight="duotone" className="text-white" />
                  </div>
                  <div>
                    <h1 className="text-4xl font-bold">Sass Styles Guide</h1>
                    <p className="text-lg text-muted-foreground">
                      Custom Material UI components with Sass
                    </p>
                  </div>
                </div>

                <Separator />

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Overview</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. 
                    This system provides pre-built components, utilities, mixins, and animations that extend beyond the 
                    standard Material UI component library.
                  </p>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>File Structure</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="space-y-2">
                      <code className="text-sm font-mono text-accent">src/styles/_variables.scss</code>
                      <p className="text-sm text-muted-foreground ml-4">
                        Color palettes, spacing scales, typography, transitions, and other design tokens
                      </p>
                    </div>
                    <div className="space-y-2">
                      <code className="text-sm font-mono text-accent">src/styles/_utilities.scss</code>
                      <p className="text-sm text-muted-foreground ml-4">
                        Mixins and functions for responsive design, colors, typography, and layout helpers
                      </p>
                    </div>
                    <div className="space-y-2">
                      <code className="text-sm font-mono text-accent">src/styles/_animations.scss</code>
                      <p className="text-sm text-muted-foreground ml-4">
                        Keyframe animations and animation utility classes for transitions and effects
                      </p>
                    </div>
                    <div className="space-y-2">
                      <code className="text-sm font-mono text-accent">src/styles/material-ui-custom.scss</code>
                      <p className="text-sm text-muted-foreground ml-4">
                        Custom Material UI component styles with variants and states
                      </p>
                    </div>
                    <div className="space-y-2">
                      <code className="text-sm font-mono text-accent">src/styles/main.scss</code>
                      <p className="text-sm text-muted-foreground ml-4">
                        Main entry point that imports all Sass modules and provides layout components
                      </p>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>Available Components</CardTitle>
                    <CardDescription>Custom Material UI components built with Sass</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid gap-4 md:grid-cols-2">
                      <SassComponentItem 
                        name="Buttons"
                        classes={['mui-custom-button--primary', 'mui-custom-button--secondary', 'mui-custom-button--accent', 'mui-custom-button--outline', 'mui-custom-button--ghost']}
                        description="Custom styled buttons with hover effects and variants"
                      />
                      <SassComponentItem 
                        name="Cards"
                        classes={['mui-custom-card', 'mui-custom-card--gradient', 'mui-custom-card--glass']}
                        description="Elevated cards with gradient and glassmorphism variants"
                      />
                      <SassComponentItem 
                        name="Inputs"
                        classes={['mui-custom-input', 'mui-custom-input--error', 'mui-custom-input--success']}
                        description="Form inputs with focus states and validation styling"
                      />
                      <SassComponentItem 
                        name="Chips"
                        classes={['mui-custom-chip--primary', 'mui-custom-chip--success', 'mui-custom-chip--error', 'mui-custom-chip--warning']}
                        description="Status chips and tags with color variants"
                      />
                      <SassComponentItem 
                        name="Panels"
                        classes={['mui-custom-panel', 'mui-custom-panel--with-header']}
                        description="Content panels with headers and footers"
                      />
                      <SassComponentItem 
                        name="Dialogs"
                        classes={['mui-custom-dialog']}
                        description="Modal dialogs with backdrop blur effects"
                      />
                      <SassComponentItem 
                        name="Badges"
                        classes={['custom-mui-badge', 'custom-mui-badge--dot']}
                        description="Notification badges and indicators"
                      />
                      <SassComponentItem 
                        name="Progress"
                        classes={['mui-custom-progress', 'mui-custom-progress--indeterminate']}
                        description="Loading progress bars with animations"
                      />
                      <SassComponentItem 
                        name="Skeletons"
                        classes={['mui-custom-skeleton--text', 'mui-custom-skeleton--circle', 'mui-custom-skeleton--rect']}
                        description="Loading skeleton placeholders with shimmer effect"
                      />
                      <SassComponentItem 
                        name="Accordions"
                        classes={['mui-custom-accordion']}
                        description="Collapsible content sections with animations"
                      />
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>Layout Components</CardTitle>
                    <CardDescription>Sass-powered layout utilities</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="custom-mui-container"
                      description="Max-width container with responsive padding"
                    />
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="custom-mui-grid"
                      description="CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
                    />
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="custom-mui-flex"
                      description="Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
                    />
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="custom-mui-stack"
                      description="Vertical/horizontal stacks with configurable gaps"
                    />
                    <FeatureItem 
                      icon={<Code size={18} />}
                      title="custom-mui-surface"
                      description="Interactive surfaces with elevation and hover effects"
                    />
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>Sass Utilities & Mixins</CardTitle>
                    <CardDescription>Reusable functions for custom styling</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Responsive Design
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">@include respond-to($breakpoint)</p>
                          <p className="text-muted-foreground">Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`@include respond-to('lg') {
  padding: 2rem;
}`}
                          </pre>
                        </div>
                      </div>

                      <Separator />

                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Elevation & Shadows
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">@include elevation($level)</p>
                          <p className="text-muted-foreground">Apply box shadows with levels 1-4</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`@include elevation(2);`}
                          </pre>
                        </div>
                      </div>

                      <Separator />

                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Glassmorphism
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">@include glassmorphism($blur, $opacity)</p>
                          <p className="text-muted-foreground">Create frosted glass effects with backdrop blur</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`@include glassmorphism(16px, 0.1);`}
                          </pre>
                        </div>
                      </div>

                      <Separator />

                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Color Functions
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">get-color($palette, $shade)</p>
                          <p className="text-muted-foreground">Access colors from predefined palettes (primary, secondary, accent, success, error, warning)</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`color: get-color('primary', 500);`}
                          </pre>
                        </div>
                      </div>

                      <Separator />

                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Text Truncation
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">@include truncate($lines)</p>
                          <p className="text-muted-foreground">Truncate text with ellipsis after specified lines</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`@include truncate(2);`}
                          </pre>
                        </div>
                      </div>

                      <Separator />

                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <Lightbulb size={18} weight="duotone" className="text-accent" />
                          Custom Scrollbars
                        </h3>
                        <div className="ml-6 space-y-2 text-sm">
                          <p className="font-mono text-accent">@include show-scrollbar($track, $thumb)</p>
                          <p className="text-muted-foreground">Style webkit scrollbars with custom colors</p>
                          <pre className="custom-mui-code-block text-xs mt-2">
{`@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));`}
                          </pre>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>Animation Classes</CardTitle>
                    <CardDescription>Pre-built animation utilities</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                      <AnimationItem name="animate-fade-in" description="Fade in from opacity 0" />
                      <AnimationItem name="animate-slide-in-up" description="Slide in from bottom" />
                      <AnimationItem name="animate-slide-in-down" description="Slide in from top" />
                      <AnimationItem name="animate-scale-in" description="Scale in from 95%" />
                      <AnimationItem name="animate-pulse" description="Pulsing opacity effect" />
                      <AnimationItem name="animate-bounce" description="Bouncing effect" />
                      <AnimationItem name="animate-spin" description="Continuous rotation" />
                      <AnimationItem name="animate-shimmer" description="Shimmer effect for loading" />
                      <AnimationItem name="animate-float" description="Floating up and down" />
                      <AnimationItem name="animate-glow" description="Glowing shadow effect" />
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-accent/5 border-accent/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Rocket size={20} weight="duotone" />
                      Quick Start Example
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <h3 className="font-semibold">Using Custom Components</h3>
                      <pre className="custom-mui-code-block">
{`import './styles/main.scss'

function MyComponent() {
  return (
    <div className="custom-mui-container">
      <div className="custom-mui-grid custom-mui-grid--cols-3">
        <div className="mui-custom-card">
          <h3>Card Title</h3>
          <p>Card content</p>
          <button className="mui-custom-button mui-custom-button--primary">
            Click Me
          </button>
        </div>
      </div>
    </div>
  )
}`}
                      </pre>
                    </div>

                    <Separator />

                    <div className="space-y-2">
                      <h3 className="font-semibold">Creating Custom Styles with Mixins</h3>
                      <pre className="custom-mui-code-block">
{`@use './styles/utilities' as *;
@use './styles/variables' as *;

.my-custom-component {
  @include elevation(2);
  @include responsive-padding(spacing('6'));
  background: get-color('primary', 500);
  
  @include respond-to('md') {
    @include elevation(3);
  }
  
  &:hover {
    @include glassmorphism(12px, 0.15);
  }
}`}
                      </pre>
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-muted/50">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Target size={20} weight="duotone" />
                      Best Practices
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Import main.scss in your index.css to access all Sass components and utilities</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Use @use instead of @import for better module encapsulation</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Leverage mixins for consistent spacing, elevation, and responsive design</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Extend existing component classes rather than creating from scratch</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Use animation classes sparingly and respect prefers-reduced-motion</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Customize variables in _variables.scss to match your design system</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="cicd" className="m-0 space-y-6">
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                    <GitBranch size={32} weight="duotone" className="text-white" />
                  </div>
                  <div>
                    <h1 className="text-4xl font-bold">CI/CD Guide</h1>
                    <p className="text-lg text-muted-foreground">
                      Complete deployment automation for multiple platforms
                    </p>
                  </div>
                </div>

                <Separator />

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Overview</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    CodeForge includes production-ready CI/CD configurations for GitHub Actions, GitLab CI, Jenkins, 
                    and CircleCI. Each pipeline includes linting, testing, security scanning, Docker image building, 
                    and automated deployment workflows.
                  </p>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Available Configurations</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <CICDPlatformItem 
                      name="GitHub Actions"
                      file=".github/workflows/ci.yml"
                      description="Complete CI/CD with GHCR Docker registry integration"
                      features={[
                        'Parallel lint and test execution',
                        'E2E tests with Playwright',
                        'Docker build and push to GitHub Container Registry',
                        'Security scanning with Trivy',
                        'Automated staging and production deployments',
                        'Release workflow with versioned artifacts'
                      ]}
                    />
                    <CICDPlatformItem 
                      name="GitLab CI"
                      file=".gitlab-ci.yml"
                      description="Multi-stage pipeline with GitLab Container Registry"
                      features={[
                        'Dependency caching for faster builds',
                        'Coverage reporting with Cobertura',
                        'Docker-in-Docker builds',
                        'Manual production approval gates',
                        'Webhook-based deployment triggers'
                      ]}
                    />
                    <CICDPlatformItem 
                      name="Jenkins"
                      file="Jenkinsfile"
                      description="Declarative pipeline with Slack notifications"
                      features={[
                        'Node.js environment configuration',
                        'HTML report publishing for tests and coverage',
                        'Artifact archiving and fingerprinting',
                        'Manual production deployment approval',
                        'Slack integration for deployment notifications'
                      ]}
                    />
                    <CICDPlatformItem 
                      name="CircleCI"
                      file=".circleci/config.yml"
                      description="Workflow orchestration with orb integrations"
                      features={[
                        'Docker layer caching for optimization',
                        'Job dependency management',
                        'Test results and artifact storage',
                        'Approval workflows for production',
                        'Slack notifications via orb'
                      ]}
                    />
                  </CardContent>
                </Card>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Pipeline Stages</h2>
                  <p className="text-foreground/90 leading-relaxed">
                    All CI/CD configurations follow a similar multi-stage pipeline structure:
                  </p>
                  <div className="grid gap-3">
                    <PipelineStageCard 
                      stage="Lint"
                      description="ESLint and TypeScript type checking to ensure code quality"
                      duration="~1-2 min"
                    />
                    <PipelineStageCard 
                      stage="Test"
                      description="Unit tests with coverage reporting and result artifacts"
                      duration="~2-3 min"
                    />
                    <PipelineStageCard 
                      stage="Build"
                      description="Production build with artifact generation for deployment"
                      duration="~2-4 min"
                    />
                    <PipelineStageCard 
                      stage="E2E Tests"
                      description="Playwright end-to-end tests with HTML reports"
                      duration="~3-5 min"
                    />
                    <PipelineStageCard 
                      stage="Security"
                      description="npm audit and Trivy vulnerability scanning"
                      duration="~1-2 min"
                    />
                    <PipelineStageCard 
                      stage="Docker Build"
                      description="Multi-stage Docker image build and push to registry"
                      duration="~3-5 min"
                    />
                    <PipelineStageCard 
                      stage="Deploy"
                      description="Automated deployment to staging and production environments"
                      duration="~1-3 min"
                    />
                  </div>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Docker Configuration</CardTitle>
                    <CardDescription>Containerization for production deployment</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <h3 className="font-semibold">Files Included</h3>
                      <div className="space-y-2 ml-4">
                        <div className="space-y-1">
                          <code className="text-sm font-mono text-accent">Dockerfile</code>
                          <p className="text-sm text-muted-foreground">Multi-stage build with Node.js builder and Nginx runtime</p>
                        </div>
                        <div className="space-y-1">
                          <code className="text-sm font-mono text-accent">nginx.conf</code>
                          <p className="text-sm text-muted-foreground">Production Nginx configuration with health checks and caching</p>
                        </div>
                        <div className="space-y-1">
                          <code className="text-sm font-mono text-accent">docker-compose.yml</code>
                          <p className="text-sm text-muted-foreground">Local development and deployment orchestration</p>
                        </div>
                        <div className="space-y-1">
                          <code className="text-sm font-mono text-accent">.dockerignore</code>
                          <p className="text-sm text-muted-foreground">Optimized build context by excluding unnecessary files</p>
                        </div>
                      </div>
                    </div>

                    <Separator />

                    <div className="space-y-2">
                      <h3 className="font-semibold">Docker Commands</h3>
                      <pre className="custom-mui-code-block">
{`# Build image locally
docker build -t codeforge:local .

# Run container
docker run -p 3000:80 codeforge:local

# Use docker-compose
docker-compose up -d

# Pull from registry
docker pull ghcr.io/<username>/<repo>:latest`}
                      </pre>
                    </div>

                    <Separator />

                    <div className="space-y-2">
                      <h3 className="font-semibold">Features</h3>
                      <ul className="space-y-2 text-sm">
                        <li className="flex items-start gap-2">
                          <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                          <span>Multi-stage build reduces final image size to ~50MB</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                          <span>Nginx serves static files with gzip compression</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                          <span>Health check endpoint at /health for orchestration</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                          <span>Automatic cache headers for static assets</span>
                        </li>
                        <li className="flex items-start gap-2">
                          <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                          <span>SPA routing support with fallback to index.html</span>
                        </li>
                      </ul>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>Environment Variables</CardTitle>
                    <CardDescription>Required configuration for CI/CD platforms</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                          <thead>
                            <tr className="border-b">
                              <th className="text-left py-2 pr-4 font-semibold">Variable</th>
                              <th className="text-left py-2 pr-4 font-semibold">Description</th>
                              <th className="text-left py-2 font-semibold">Required</th>
                            </tr>
                          </thead>
                          <tbody className="text-muted-foreground">
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">NODE_VERSION</code></td>
                              <td className="py-2 pr-4">Node.js version (default: 20)</td>
                              <td className="py-2">No</td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">REGISTRY</code></td>
                              <td className="py-2 pr-4">Docker registry URL (default: ghcr.io)</td>
                              <td className="py-2">No</td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">STAGING_WEBHOOK_URL</code></td>
                              <td className="py-2 pr-4">Webhook for staging deployments</td>
                              <td className="py-2">Optional</td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">PRODUCTION_WEBHOOK_URL</code></td>
                              <td className="py-2 pr-4">Webhook for production deployments</td>
                              <td className="py-2">Optional</td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">CODECOV_TOKEN</code></td>
                              <td className="py-2 pr-4">Codecov integration token</td>
                              <td className="py-2">Optional</td>
                            </tr>
                            <tr className="border-b">
                              <td className="py-2 pr-4"><code className="text-accent">SLACK_WEBHOOK</code></td>
                              <td className="py-2 pr-4">Slack webhook for notifications</td>
                              <td className="py-2">Optional</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <div className="space-y-4">
                  <h2 className="text-2xl font-semibold">Branch Strategy</h2>
                  <div className="grid gap-4">
                    <Card className="bg-green-500/5 border-green-500/20">
                      <CardContent className="pt-4 pb-4">
                        <div className="flex items-start gap-3">
                          <GitBranch size={20} weight="duotone" className="text-green-500 mt-0.5" />
                          <div className="space-y-1">
                            <h4 className="font-semibold">main</h4>
                            <p className="text-sm text-muted-foreground">
                              Production branch - deploys to production environment (manual approval required)
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                    <Card className="bg-blue-500/5 border-blue-500/20">
                      <CardContent className="pt-4 pb-4">
                        <div className="flex items-start gap-3">
                          <GitBranch size={20} weight="duotone" className="text-blue-500 mt-0.5" />
                          <div className="space-y-1">
                            <h4 className="font-semibold">develop</h4>
                            <p className="text-sm text-muted-foreground">
                              Development branch - automatically deploys to staging environment
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                    <Card className="bg-purple-500/5 border-purple-500/20">
                      <CardContent className="pt-4 pb-4">
                        <div className="flex items-start gap-3">
                          <GitBranch size={20} weight="duotone" className="text-purple-500 mt-0.5" />
                          <div className="space-y-1">
                            <h4 className="font-semibold">feature/*</h4>
                            <p className="text-sm text-muted-foreground">
                              Feature branches - runs tests only, no deployment
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                    <Card className="bg-orange-500/5 border-orange-500/20">
                      <CardContent className="pt-4 pb-4">
                        <div className="flex items-start gap-3">
                          <GitBranch size={20} weight="duotone" className="text-orange-500 mt-0.5" />
                          <div className="space-y-1">
                            <h4 className="font-semibold">v* tags</h4>
                            <p className="text-sm text-muted-foreground">
                              Version tags - triggers release workflow with artifacts and changelog
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>

                <Card className="bg-accent/10 border-accent/20">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Lightbulb size={20} weight="duotone" className="text-accent" />
                      Quick Start
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-3">
                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-accent text-accent-foreground flex items-center justify-center text-sm">1</span>
                          Choose Your Platform
                        </h3>
                        <p className="text-sm text-foreground/80 ml-8">
                          Select GitHub Actions, GitLab CI, Jenkins, or CircleCI based on your infrastructure
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-accent text-accent-foreground flex items-center justify-center text-sm">2</span>
                          Configure Secrets
                        </h3>
                        <p className="text-sm text-foreground/80 ml-8">
                          Add required environment variables and secrets in your platform's settings
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-accent text-accent-foreground flex items-center justify-center text-sm">3</span>
                          Push to Repository
                        </h3>
                        <p className="text-sm text-foreground/80 ml-8">
                          Push code to main or develop branch to trigger the CI/CD pipeline
                        </p>
                      </div>
                      <div className="space-y-2">
                        <h3 className="font-semibold flex items-center gap-2">
                          <span className="w-6 h-6 rounded-full bg-accent text-accent-foreground flex items-center justify-center text-sm">4</span>
                          Monitor Pipeline
                        </h3>
                        <p className="text-sm text-foreground/80 ml-8">
                          View pipeline status, test results, and deployment logs in your platform's dashboard
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-muted/50">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Rocket size={20} weight="duotone" />
                      Best Practices
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Never commit secrets - use environment variables and platform secret management</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Enable branch protection on main and develop branches</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Require code reviews and passing tests before merging</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Use manual approval gates for production deployments</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Monitor security scan results and fix vulnerabilities promptly</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Keep dependencies updated with Dependabot or Renovate</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Use semantic versioning for releases (v1.0.0, v1.1.0, etc.)</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle size={16} className="text-accent mt-1 flex-shrink-0" weight="fill" />
                        <span>Configure Slack or email notifications for deployment status</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>

                <Card className="border-primary/30">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Package size={20} weight="duotone" />
                      Additional Resources
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 text-sm">
                      <li className="flex items-start gap-2">
                        <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
                        <span><code className="text-accent">CI_CD_GUIDE.md</code> - Detailed setup guide for all platforms</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
                        <span><code className="text-accent">.github/workflows/</code> - GitHub Actions workflows</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
                        <span><code className="text-accent">.gitlab-ci.yml</code> - GitLab CI configuration</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
                        <span><code className="text-accent">Jenkinsfile</code> - Jenkins pipeline definition</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <FileCode size={16} className="text-accent mt-1 flex-shrink-0" />
                        <span><code className="text-accent">.circleci/config.yml</code> - CircleCI configuration</span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </div>
        </ScrollArea>
      </Tabs>
    </div>
  )
}

function CICDPlatformItem({ name, file, description, features }: {
  name: string
  file: string
  description: string
  features: string[]
}) {
  return (
    <div className="space-y-3 border-l-2 border-accent pl-4">
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <GitBranch size={18} className="text-accent" />
          <h3 className="text-base font-semibold">{name}</h3>
        </div>
        <code className="text-xs text-muted-foreground font-mono">{file}</code>
        <p className="text-sm text-foreground/90">{description}</p>
      </div>
      <div className="space-y-1">
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
        <ul className="space-y-1">
          {features.map((feature, idx) => (
            <li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

function PipelineStageCard({ stage, description, duration }: {
  stage: string
  description: string
  duration: string
}) {
  return (
    <Card className="bg-primary/5 border-primary/20">
      <CardContent className="pt-4 pb-4">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1 flex-1">
            <h4 className="font-semibold text-sm">{stage}</h4>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
          <Badge variant="secondary" className="text-xs whitespace-nowrap">
            {duration}
          </Badge>
        </div>
      </CardContent>
    </Card>
  )
}

function SassComponentItem({ name, classes, description }: { name: string; classes: string[]; description: string }) {
  return (
    <div className="space-y-2 p-4 border rounded-lg bg-card">
      <h4 className="font-semibold">{name}</h4>
      <p className="text-sm text-muted-foreground">{description}</p>
      <div className="space-y-1">
        {classes.map((cls, idx) => (
          <code key={idx} className="text-xs font-mono text-accent block">{cls}</code>
        ))}
      </div>
    </div>
  )
}

function AnimationItem({ name, description }: { name: string; description: string }) {
  return (
    <div className="space-y-1 p-3 border rounded-lg bg-card">
      <code className="text-xs font-mono text-accent">{name}</code>
      <p className="text-xs text-muted-foreground">{description}</p>
    </div>
  )
}

function FeatureItem({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
  return (
    <div className="flex gap-3">
      <div className="text-accent mt-0.5">{icon}</div>
      <div className="space-y-1">
        <h4 className="font-semibold text-sm">{title}</h4>
        <p className="text-sm text-muted-foreground">{description}</p>
      </div>
    </div>
  )
}

function AIFeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <Card className="bg-primary/5 border-primary/20">
      <CardContent className="pt-4 pb-4">
        <div className="flex gap-3">
          <Sparkle size={20} weight="duotone" className="text-accent flex-shrink-0 mt-0.5" />
          <div className="space-y-1">
            <h4 className="font-semibold text-sm">{title}</h4>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

function RoadmapItem({ status, title, description, version }: { 
  status: 'completed' | 'planned'
  title: string
  description: string
  version: string 
}) {
  return (
    <Card className={status === 'completed' ? 'bg-green-500/5 border-green-500/20' : 'bg-muted/50'}>
      <CardContent className="pt-4 pb-4">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1 flex-1">
            <div className="flex items-center gap-2">
              <h4 className="font-semibold">{title}</h4>
              <Badge variant={status === 'completed' ? 'default' : 'secondary'} className="text-xs">
                {version}
              </Badge>
            </div>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

function AgentFileItem({ filename, path, description, features }: {
  filename: string
  path: string
  description: string
  features: string[]
}) {
  return (
    <div className="space-y-3 border-l-2 border-accent pl-4">
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <FileCode size={18} className="text-accent" />
          <code className="text-sm font-semibold text-accent">{filename}</code>
        </div>
        <p className="text-xs text-muted-foreground font-mono">{path}</p>
        <p className="text-sm text-foreground/90">{description}</p>
      </div>
      <div className="space-y-1">
        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Key Features:</p>
        <ul className="space-y-1">
          {features.map((feature, idx) => (
            <li key={idx} className="text-sm text-foreground/80 flex items-start gap-2">
              <CheckCircle size={14} weight="fill" className="text-accent mt-1 flex-shrink-0" />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

function IntegrationPoint({ component, capabilities }: { component: string; capabilities: string[] }) {
  return (
    <div className="space-y-2 border rounded-lg p-4 bg-card">
      <h4 className="font-semibold text-sm flex items-center gap-2">
        <Sparkle size={16} weight="duotone" className="text-accent" />
        {component}
      </h4>
      <ul className="space-y-1">
        {capabilities.map((capability, idx) => (
          <li key={idx} className="text-sm text-muted-foreground flex items-start gap-2">
            <span className="text-accent">•</span>
            <span>{capability}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}