import React from 'react';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { useTheme } from '@voilajsx/uikit/theme-provider';
import { Palette, Sun, Moon, Sparkles } from 'lucide-react';
import { SEO } from '../components';

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

  const themeDetails = {
    base: {
      description: 'Clean default configuration showcasing the base system with Inter typography',
      features: ['Inter font family', 'Neutral color palette', 'Clean and minimal design', 'Perfect for business apps'],
      color: 'from-gray-400 to-gray-600'
    },
    elegant: {
      description: 'Fresh sky blue theme with clean design and modern aesthetics',
      features: ['Sky blue primary colors', 'Elegant typography', 'Fresh and modern', 'Great for creative projects'],
      color: 'from-sky-400 to-blue-600'
    },
    metro: {
      description: 'Dark teal theme with bright yellow accents for bold interfaces',
      features: ['Dark teal foundation', 'Bright yellow accents', 'High contrast design', 'Perfect for tech platforms'],
      color: 'from-teal-500 to-yellow-500'
    },
    studio: {
      description: 'Sophisticated neutral theme with golden accents for premium feel',
      features: ['Warm neutral tones', 'Golden accent colors', 'Professional appearance', 'Ideal for portfolios'],
      color: 'from-amber-400 to-orange-600'
    },
    vivid: {
      description: 'Premium cursive theme with sophisticated typography for luxury brands',
      features: ['Cursive typography', 'Rich color palette', 'Luxury brand feeling', 'High-end aesthetics'],
      color: 'from-purple-500 to-pink-600'
    }
  };

  return (
    <>
      <SEO
        title="Themes - UIKit Multi-Page Demo"
        description="Interactive theme switching with OKLCH color science and comprehensive design tokens"
      />
      <div className="space-y-8">
      <div className="text-center space-y-4">
        <h1 className="voila-heading text-4xl">Theme System</h1>
        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
          Interactive theme switching with OKLCH color science and comprehensive design tokens
        </p>
      </div>


        {/* Available Themes */}
       <div className="space-y-6">
        <h2 className="text-2xl font-bold text-center">Available Themes</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
          {availableThemes.map(themeId => {
            const details = themeDetails[themeId as keyof typeof themeDetails];
            const isActive = theme === themeId;
            
            return (
              <Card 
                key={themeId} 
                className={`border-2 transition-all duration-200 hover:shadow-lg ${
                  isActive ? 'ring-2 ring-primary border-primary/50 shadow-lg' : 'hover:border-primary/30'
                }`}
              >
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg capitalize flex items-center gap-2">
                      {isActive && <Sparkles className="h-4 w-4 text-primary" />}
                      {themeId}
                    </CardTitle>
                    {isActive && <div className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded-full">Active</div>}
                  </div>
                  <CardDescription className="text-sm">
                    {details?.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Theme preview gradient */}
                  <div className={` rounded-lg bg-gradient-to-r ${details?.color} opacity-80`} />
                  
                  {/* Features */}
                  <ul className="text-sm space-y-1 text-muted-foreground">
                    {details?.features.map((feature, index) => (
                      <li key={index}>• {feature}</li>
                    ))}
                  </ul>
                  
                  <Button 
                    onClick={() => setTheme(themeId as any)}
                    variant={isActive ? 'default' : 'outline'}
                    className="w-full"
                    disabled={isActive}
                  >
                    {isActive ? 'Currently Active' : 'Apply Theme'}
                  </Button>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>


      {/* Current Theme Preview */}
      <Card className="border-2 border-primary/20">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Palette className="h-5 w-5" />
            Current Theme: {theme.charAt(0).toUpperCase() + theme.slice(1)}
          </CardTitle>
          <CardDescription>
            {themeDetails[theme as keyof typeof themeDetails]?.description}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <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 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-4 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-4 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-4 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>

          <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
            <div className="flex items-center gap-3">
              {mode === 'dark' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
              <span className="font-medium">
                {mode === 'dark' ? 'Dark Mode' : 'Light Mode'}
              </span>
            </div>
            <Button onClick={toggleMode} variant="outline" size="sm">
              {mode === 'dark' ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
              Switch to {mode === 'dark' ? 'Light' : 'Dark'}
            </Button>
          </div>
        </CardContent>
      </Card>

    

      {/* Color Science Information */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-red-400 via-yellow-400 to-blue-400 rounded-full" />
            OKLCH Color Science
          </CardTitle>
          <CardDescription>
            UIKit uses the OKLCH color space for perceptually uniform colors and better accessibility
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="font-semibold mb-2">Perceptual Uniformity</div>
              <div className="text-muted-foreground">
                Colors with the same lightness appear equally bright to the human eye
              </div>
            </div>
            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="font-semibold mb-2">Better Accessibility</div>
              <div className="text-muted-foreground">
                Improved contrast ratios and color differentiation for accessibility
              </div>
            </div>
            <div className="p-4 bg-muted/50 rounded-lg">
              <div className="font-semibold mb-2">Future-Proof</div>
              <div className="text-muted-foreground">
                Native browser support in modern browsers with graceful fallbacks
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <h4 className="font-semibold">Chart Color Palette</h4>
            <div className="grid grid-cols-5 gap-3">
              {[1, 2, 3, 4, 5].map(i => (
                <div key={i} className="text-center">
                  <div className={`w-full h-16 rounded-lg mb-2 bg-chart${i} shadow-sm`} />
                  <div className="text-xs text-muted-foreground font-medium">chart{i}</div>
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
      </div>
    </>
  );
};

export default ThemesPage;