import React from 'react';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { Badge } from '@voilajsx/uikit/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@voilajsx/uikit/tabs';
import { SEO } from '../components';

export const ComponentsPage: React.FC = () => {
  return (
    <>
      <SEO
        title="Components - UIKit Multi-Page Demo"
        description="Comprehensive showcase of UIKit's production-ready React components with examples and variations"
      />
      <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">
          Comprehensive showcase of UIKit's production-ready React components with examples and variations
        </p>
      </div>

      <Tabs defaultValue="buttons" className="space-y-6">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="buttons">Buttons</TabsTrigger>
          <TabsTrigger value="cards">Cards</TabsTrigger>
          <TabsTrigger value="forms">Forms</TabsTrigger>
          <TabsTrigger value="display">Display</TabsTrigger>
        </TabsList>

        <TabsContent value="buttons" className="space-y-6">
          <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>
                Button Variants
              </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">Primary Actions</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">Size Variations</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 & Loading</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>

          <Card>
            <CardHeader>
              <CardTitle>Badges & Labels</CardTitle>
              <CardDescription>Small status indicators and labels</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-wrap gap-3">
                <Badge>Default</Badge>
                <Badge variant="secondary">Secondary</Badge>
                <Badge variant="destructive">Error</Badge>
                <Badge variant="outline">Outline</Badge>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="cards" className="space-y-6">
          <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>
                Card Layouts
              </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>
        </TabsContent>

        <TabsContent value="forms" className="space-y-6">
          <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 Controls
              </CardTitle>
              <CardDescription>Input fields and form controls with consistent styling</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>
        </TabsContent>

        <TabsContent value="display" className="space-y-6">
          <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</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">
                  {[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>
              
              <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>

          <Card>
            <CardHeader>
              <CardTitle>Typography Scale</CardTitle>
              <CardDescription>Text hierarchy and styling examples</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <h1 className="text-3xl font-bold">Heading 1 - Main Title</h1>
                <h2 className="text-2xl font-bold">Heading 2 - Section Title</h2>
                <h3 className="text-xl font-bold">Heading 3 - Subsection</h3>
                <h4 className="text-lg font-semibold">Heading 4 - Component Title</h4>
                <p className="text-base">Body text - Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                <p className="text-sm text-muted-foreground">Small text for captions, metadata, and secondary information.</p>
                <code className="text-sm bg-muted px-2 py-1 rounded font-mono">Code snippet example</code>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
      </div>
    </>
  );
};

export default ComponentsPage;