import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation, useNavigate } from 'react-router-dom';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { useTheme } from '@voilajsx/uikit/theme-provider';
import { PageLayout } from '@voilajsx/uikit/page';
import type { NavigationItem } from '@voilajsx/uikit';
import { Home, Layout, Palette, BookOpen } from 'lucide-react';
import { SEO } from './components/SEO';
import { asset } from './utils/asset';

// Page Components
const HomePage: React.FC = () => {
  const { theme } = useTheme();
  
  const themeDescriptions = {
    base: 'Clean default configuration showcasing the base system',
    elegant: 'Fresh sky blue theme with clean design', 
    metro: 'Dark teal theme with bright yellow accents',
    studio: 'Sophisticated neutral theme with golden accents',
    vivid: 'Premium cursive theme with sophisticated typography'
  };

  return (
    <>
      <SEO
        title="UIKit SPA Demo - Beautiful UI Components"
        description="Professional React components with stunning themes, powered by OKLCH color science and cross-platform design"
      />
      <div className="space-y-12">
        {/* Hero Section */}
      <section className="text-center py-16 bg-gradient-to-b from-background to-muted/20 rounded-lg">
        <div className="space-y-6">
          <div className="mb-6">
            <img
              src={asset('/hero_spa.svg')}
              alt="UIKit SPA Hero Illustration"
              className="mx-auto max-w-md w-full h-auto"
            />
          </div>
          <h1 className="voila-heading text-4xl md:text-6xl mb-6 text-accent">
            Beautiful UI Components
          </h1>
          <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Professional React components with stunning themes, powered by OKLCH color science and cross-platform design
          </p>
          <div className="inline-flex items-center gap-3 text-sm text-muted-foreground bg-muted/50 backdrop-blur px-6 py-3 rounded-full border">
            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
            {themeDescriptions[theme as keyof typeof themeDescriptions]}
          </div>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
            <Button size="lg" asChild>
              <Link to="/components">Explore Components</Link>
            </Button>
            <Button variant="secondary" size="lg" asChild>
              <Link to="/themes">Browse Themes</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="space-y-6">
        <div className="text-center">
          <h2 className="text-3xl font-bold mb-4">Why Choose UIKit?</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Built for modern applications with performance, accessibility, and developer experience in mind
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                🎨
              </div>
              <CardTitle>5 Beautiful Themes</CardTitle>
              <CardDescription>From elegant to vivid, find the perfect aesthetic for your application</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• Base - Clean default styling</li>
                <li>• Elegant - Sky blue elegance</li>
                <li>• Metro - Bold teal & yellow</li>
                <li>• Studio - Sophisticated neutrals</li>
                <li>• Vivid - Premium typography</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/themes">Explore Themes</Link>
              </Button>
            </CardContent>
          </Card>
          
          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
                🧩
              </div>
              <CardTitle>Rich Component Library</CardTitle>
              <CardDescription>30+ production-ready components with consistent design language</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• Buttons, Cards, Forms</li>
                <li>• Navigation & Layout</li>
                <li>• Data Tables & Charts</li>
                <li>• Dialogs & Overlays</li>
                <li>• Fully accessible</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/components">View Components</Link>
              </Button>
            </CardContent>
          </Card>
          
          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
                📚
              </div>
              <CardTitle>Developer Experience</CardTitle>
              <CardDescription>TypeScript-first with excellent documentation and tooling</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• Full TypeScript support</li>
                <li>• CLI for quick setup</li>
                <li>• Storybook integration</li>
                <li>• Tree-shakeable imports</li>
                <li>• Comprehensive docs</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/docs">Read Documentation</Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Color Palette Preview */}
      <section className="space-y-6">
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-2">Current Theme Colors</h2>
          <p className="text-muted-foreground">OKLCH-based color system for perfect consistency</p>
        </div>
        
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-primary text-primary-foreground p-6 rounded-lg text-center shadow-lg">
            <div className="text-lg font-bold">Primary</div>
            <div className="text-sm opacity-90 mt-1">Brand color</div>
          </div>
          <div className="bg-secondary text-secondary-foreground p-6 rounded-lg text-center shadow-lg">
            <div className="text-lg font-bold">Secondary</div>
            <div className="text-sm opacity-90 mt-1">Supporting</div>
          </div>
          <div className="bg-accent text-accent-foreground p-6 rounded-lg text-center shadow-lg">
            <div className="text-lg font-bold">Accent</div>
            <div className="text-sm opacity-90 mt-1">Highlights</div>
          </div>
          <div className="bg-muted text-muted-foreground p-6 rounded-lg text-center shadow-lg border">
            <div className="text-lg font-bold">Muted</div>
            <div className="text-sm opacity-90 mt-1">Subtle</div>
          </div>
        </div>
      </section>

      {/* Quick Start */}
      <section className="bg-muted/30 rounded-lg p-8">
        <div className="text-center space-y-4">
          <h2 className="text-2xl font-bold">Ready to Get Started?</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Install UIKit in your project and start building beautiful interfaces in minutes
          </p>
          <div className="bg-background border rounded-lg p-4 max-w-md mx-auto">
            <code className="text-sm">npm install @voilajsx/uikit</code>
          </div>
          <div className="flex gap-3 justify-center">
            <Button asChild>
              <Link to="/docs">Installation Guide</Link>
            </Button>
            <Button variant="ghost" asChild>
              <Link to="/components">Browse Components</Link>
            </Button>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

const ComponentsPage: React.FC = () => {
  return (
    <>
      <SEO
        title="Components - UIKit SPA Demo"
        description="Explore our comprehensive collection of production-ready React components, designed for consistency and accessibility"
      />
      <div className="space-y-8">
      <div className="text-center space-y-4">
        <h1 className="voila-heading text-4xl">Component Library</h1>
        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
          Explore our comprehensive collection of production-ready React components, designed for consistency and accessibility
        </p>
      </div>
      
      {/* Buttons */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary/10 rounded flex items-center justify-center">
              🔘
            </div>
            Buttons
          </CardTitle>
          <CardDescription>Interactive elements with multiple variants, sizes, and states</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Variants</h4>
            <div className="flex flex-wrap gap-3">
              <Button size="lg">Primary</Button>
              <Button variant="secondary" size="lg">Secondary</Button>
              <Button variant="outline" size="lg">Outline</Button>
              <Button variant="ghost" size="lg">Ghost</Button>
              <Button variant="destructive" size="lg">Destructive</Button>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Sizes</h4>
            <div className="flex flex-wrap items-center gap-3">
              <Button size="sm">Small</Button>
              <Button>Default</Button>
              <Button size="lg">Large</Button>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">States</h4>
            <div className="flex flex-wrap gap-3">
              <Button>Normal</Button>
              <Button disabled>Disabled</Button>
              <Button className="opacity-50 cursor-not-allowed">Loading...</Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Cards */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="w-8 h-8 bg-secondary/10 rounded flex items-center justify-center">
              📋
            </div>
            Cards
          </CardTitle>
          <CardDescription>Flexible containers for displaying content and actions</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Card className="border-2">
              <CardHeader>
                <CardTitle className="text-lg">Simple Card</CardTitle>
                <CardDescription>Basic card with header and content</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Cards provide a flexible container for content with consistent spacing and styling.
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 bg-primary/5">
              <CardHeader>
                <CardTitle className="text-lg">Action Card</CardTitle>
                <CardDescription>Card with interactive elements</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-sm text-muted-foreground">
                  Enhanced with buttons and other interactive components.
                </p>
                <Button size="sm" className="w-full">Take Action</Button>
              </CardContent>
            </Card>
            
            <Card className="border-2 border-dashed">
              <CardHeader>
                <CardTitle className="text-lg">Custom Styled</CardTitle>
                <CardDescription>Customizable appearance</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Easy to customize with different borders, backgrounds, and layouts.
                </p>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* Form Elements */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="w-8 h-8 bg-accent/10 rounded flex items-center justify-center">
              📝
            </div>
            Form Elements
          </CardTitle>
          <CardDescription>Input fields and form controls with consistent styling and validation</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Text Inputs</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Standard Input</label>
                <input 
                  type="text" 
                  placeholder="Enter your text"
                  className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Email Input</label>
                <input 
                  type="email" 
                  placeholder="your@email.com"
                  className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Selection Controls</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Dropdown Select</label>
                <select className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
                  <option>Choose an option</option>
                  <option>Option 1</option>
                  <option>Option 2</option>
                  <option>Option 3</option>
                </select>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Multi-select</label>
                <select multiple size={3} className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
                  <option>Option A</option>
                  <option>Option B</option>
                  <option>Option C</option>
                </select>
              </div>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Text Areas</h4>
            <div className="space-y-2">
              <label className="text-sm font-medium">Message</label>
              <textarea 
                placeholder="Enter your message here..."
                rows={4}
                className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring resize-none"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Data Display */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="w-8 h-8 bg-chart1/10 rounded flex items-center justify-center">
              📊
            </div>
            Data Display
          </CardTitle>
          <CardDescription>Components for presenting structured information and metrics</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Chart Colors</h4>
            <div className="grid grid-cols-5 gap-3">
              <div className="text-center">
                <div className="w-full h-16 rounded-lg mb-2 bg-chart1 shadow-sm" />
                <div className="text-xs text-muted-foreground font-medium">Chart 1</div>
              </div>
              <div className="text-center">
                <div className="w-full h-16 rounded-lg mb-2 bg-chart2 shadow-sm" />
                <div className="text-xs text-muted-foreground font-medium">Chart 2</div>
              </div>
              <div className="text-center">
                <div className="w-full h-16 rounded-lg mb-2 bg-chart3 shadow-sm" />
                <div className="text-xs text-muted-foreground font-medium">Chart 3</div>
              </div>
              <div className="text-center">
                <div className="w-full h-16 rounded-lg mb-2 bg-chart4 shadow-sm" />
                <div className="text-xs text-muted-foreground font-medium">Chart 4</div>
              </div>
              <div className="text-center">
                <div className="w-full h-16 rounded-lg mb-2 bg-chart5 shadow-sm" />
                <div className="text-xs text-muted-foreground font-medium">Chart 5</div>
              </div>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="text-sm font-medium text-muted-foreground">Status Indicators</h4>
            <div className="flex flex-wrap gap-3">
              <div className="inline-flex items-center gap-2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
                <div className="w-2 h-2 bg-green-600 rounded-full"></div>
                Active
              </div>
              <div className="inline-flex items-center gap-2 bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">
                <div className="w-2 h-2 bg-yellow-600 rounded-full"></div>
                Pending
              </div>
              <div className="inline-flex items-center gap-2 bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">
                <div className="w-2 h-2 bg-red-600 rounded-full"></div>
                Inactive
              </div>
              <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                Processing
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
      </div>
    </>
  );
};

const ThemesPage: React.FC = () => {
  const { theme, setTheme, availableThemes } = useTheme();

  return (
    <>
      <SEO
        title="Themes - UIKit SPA Demo"
        description="Explore 5 professional themes built with OKLCH color science for perfect accessibility and stunning design"
      />
      <div className="space-y-6">
      <h1 className="voila-heading">Themes</h1>
      
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-primary text-primary-foreground p-4 rounded-lg text-center">
          <div className="text-sm font-medium">Primary</div>
        </div>
        <div className="bg-secondary text-secondary-foreground p-4 rounded-lg text-center">
          <div className="text-sm font-medium">Secondary</div>
        </div>
        <div className="bg-accent text-accent-foreground p-4 rounded-lg text-center">
          <div className="text-sm font-medium">Accent</div>
        </div>
        <div className="bg-muted text-muted-foreground p-4 rounded-lg text-center">
          <div className="text-sm font-medium">Muted</div>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Available Themes</CardTitle>
          <CardDescription>Switch between different theme styles</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {availableThemes.map(themeId => (
              <Card key={themeId} className={theme === themeId ? 'ring-2 ring-primary' : ''}>
                <CardHeader>
                  <CardTitle className="text-lg capitalize">{themeId}</CardTitle>
                </CardHeader>
                <CardContent>
                  <Button 
                    onClick={() => setTheme(themeId as any)}
                    variant={theme === themeId ? 'default' : 'outline'}
                    className="w-full"
                  >
                    {theme === themeId ? 'Active' : 'Select'}
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </CardContent>
      </Card>
      </div>
    </>
  );
};

const DocsPage: React.FC = () => {
  return (
    <>
      <SEO
        title="Documentation - UIKit SPA Demo"
        description="Complete documentation for UIKit components, themes, and SPA routing patterns"
      />
      <div className="space-y-6">
      <h1 className="voila-heading">Documentation</h1>
      
      <Card>
        <CardHeader>
          <CardTitle>Getting Started</CardTitle>
          <CardDescription>How to use @voilajsx/uikit in your project</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <h3 className="font-semibold mb-2">Installation</h3>
            <code className="bg-muted p-2 rounded block">npm install @voilajsx/uikit</code>
          </div>
          
          <div>
            <h3 className="font-semibold mb-2">Import Components</h3>
            <code className="bg-muted p-2 rounded block text-sm">
              {`import { Button } from '@voilajsx/uikit/button';
import { Card } from '@voilajsx/uikit/card';`}
            </code>
          </div>
          
          <div>
            <h3 className="font-semibold mb-2">Import Styles</h3>
            <code className="bg-muted p-2 rounded block">import '@voilajsx/uikit/styles';</code>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Theme Provider</CardTitle>
          <CardDescription>Wrap your app with the theme provider</CardDescription>
        </CardHeader>
        <CardContent>
          <code className="bg-muted p-4 rounded block text-sm">
            {`import { ThemeProvider } from '@voilajsx/uikit/theme-provider';

function App() {
  return (
    <ThemeProvider theme="elegant" mode="light">
      <YourApp />
    </ThemeProvider>
  );
}`}
          </code>
        </CardContent>
      </Card>
      </div>
    </>
  );
};

// Navigation configuration
const navigationItems: NavigationItem[] = [
  { key: 'home', label: 'Home', href: '/', icon: Home },
  { key: 'components', label: 'Components', href: '/components', icon: Layout },
  { key: 'themes', label: 'Themes', href: '/themes', icon: Palette },
  { key: 'docs', label: 'Docs', href: '/docs', icon: BookOpen },
];

// Theme actions component
const ThemeActions: React.FC = () => {
  const { theme, mode, setTheme, availableThemes, toggleMode } = useTheme();

  return (
    <div className="flex items-center gap-3">
      <select 
        value={theme}
        onChange={(e) => setTheme(e.target.value as any)}
        className="bg-background border border-input rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
      >
        {availableThemes.map(themeId => (
          <option key={themeId} value={themeId}>
            {themeId.charAt(0).toUpperCase() + themeId.slice(1)}
          </option>
        ))}
      </select>
      
      <Button onClick={toggleMode} variant="outline" size="sm">
        {mode === 'dark' ? '☀️' : '🌙'}
      </Button>
    </div>
  );
};

// Logo component
const Logo: React.FC = () => (
  <div className="flex items-center gap-3">
    <div className="w-8 h-8 bg-primary rounded flex items-center justify-center text-primary-foreground font-bold text-sm">
      UI
    </div>
    <div>
      <h3 className="voila-brand-logo text-xl font-bold">@voilajsx/uikit</h3>
      <p className="text-xs text-muted-foreground">SPA Template</p>
    </div>
  </div>
);

// Component to handle scroll to top on route change
const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

const SPAContent: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleNavigation = (href: string, item: NavigationItem) => {
    navigate(href);
  };

  return (
    <PageLayout scheme="default" tone="subtle" size="xl">
      <ScrollToTop />
      <PageLayout.Header
        navigation={navigationItems}
        currentPath={location.pathname}
        onNavigate={handleNavigation}
        logo={<Logo />}
        actions={<ThemeActions />}
        position="sticky"
      />

      <PageLayout.Content>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/components" element={<ComponentsPage />} />
          <Route path="/themes" element={<ThemesPage />} />
          <Route path="/docs" element={<DocsPage />} />
        </Routes>
      </PageLayout.Content>

      <PageLayout.Footer 
        copyright="@voilajsx/uikit SPA Template • React Router Navigation"
      />
    </PageLayout>
  );
};

function App() {
  return (
    <Router basename="/">
      <SPAContent />
    </Router>
  );
}

export default App;