import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { Badge } from '@voilajsx/uikit/badge';
import { 
  FileText, 
  Folder, 
  Layout, 
  Palette, 
  Code2, 
  Layers,
  Zap,
  Shield,
  Smartphone
} from 'lucide-react';

export const AboutPage: React.FC = () => {
  return (
    <div className="space-y-8">
      <div className="text-center space-y-4">
        <h1 className="voila-heading text-4xl">About UIKit Multi-Page</h1>
        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
          Learn about the architecture, design principles, and implementation details behind this multi-page template
        </p>
      </div>

      {/* Architecture Overview */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Layers className="h-5 w-5" />
            Architecture Overview
          </CardTitle>
          <CardDescription>
            This multi-page template demonstrates advanced UIKit usage with proper code organization
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <h4 className="font-semibold flex items-center gap-2">
                <Folder className="h-4 w-4" />
                File Structure
              </h4>
              <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
                <div>src/</div>
                <div className="ml-2">├── pages/</div>
                <div className="ml-4">│   ├── Home.tsx</div>
                <div className="ml-4">│   ├── Components.tsx</div>
                <div className="ml-4">│   ├── Themes.tsx</div>
                <div className="ml-4">│   ├── About.tsx</div>
                <div className="ml-4">│   └── Contact.tsx</div>
                <div className="ml-2">├── layouts/</div>
                <div className="ml-4">│   └── MainLayout.tsx</div>
                <div className="ml-2">├── components/</div>
                <div className="ml-4">│   └── Navigation.tsx</div>
                <div className="ml-2">├── App.tsx</div>
                <div className="ml-2">└── main.tsx</div>
              </div>
            </div>

            <div className="space-y-4">
              <h4 className="font-semibold flex items-center gap-2">
                <Code2 className="h-4 w-4" />
                Key Technologies
              </h4>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span>React Router v6</span>
                  <Badge variant="secondary">Routing</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>UIKit PageLayout</span>
                  <Badge variant="secondary">Layout</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>React Suspense</span>
                  <Badge variant="secondary">Code Splitting</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>TypeScript</span>
                  <Badge variant="secondary">Type Safety</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>Vite</span>
                  <Badge variant="secondary">Build Tool</Badge>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Design Principles */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Palette className="h-5 w-5" />
            Design Principles
          </CardTitle>
          <CardDescription>
            Core principles that guide the UIKit design system and this template
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="space-y-3">
              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                <Shield className="h-5 w-5 text-primary" />
              </div>
              <h4 className="font-semibold">Accessibility First</h4>
              <p className="text-sm text-muted-foreground">
                Built with WCAG guidelines in mind, ensuring components work for everyone
              </p>
            </div>

            <div className="space-y-3">
              <div className="w-10 h-10 bg-secondary/10 rounded-lg flex items-center justify-center">
                <Zap className="h-5 w-5 text-secondary" />
              </div>
              <h4 className="font-semibold">Performance Focused</h4>
              <p className="text-sm text-muted-foreground">
                Optimized for fast loading with code splitting and tree shaking
              </p>
            </div>

            <div className="space-y-3">
              <div className="w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center">
                <Smartphone className="h-5 w-5 text-accent" />
              </div>
              <h4 className="font-semibold">Mobile Responsive</h4>
              <p className="text-sm text-muted-foreground">
                Designed to work beautifully across all device sizes and orientations
              </p>
            </div>

            <div className="space-y-3">
              <div className="w-10 h-10 bg-chart1/10 rounded-lg flex items-center justify-center">
                <Code2 className="h-5 w-5 text-chart1" />
              </div>
              <h4 className="font-semibold">Developer Experience</h4>
              <p className="text-sm text-muted-foreground">
                TypeScript-first with excellent IntelliSense and clear component APIs
              </p>
            </div>

            <div className="space-y-3">
              <div className="w-10 h-10 bg-chart2/10 rounded-lg flex items-center justify-center">
                <Layout className="h-5 w-5 text-chart2" />
              </div>
              <h4 className="font-semibold">Consistent Design</h4>
              <p className="text-sm text-muted-foreground">
                Unified design language with consistent spacing, colors, and typography
              </p>
            </div>

            <div className="space-y-3">
              <div className="w-10 h-10 bg-chart3/10 rounded-lg flex items-center justify-center">
                <Layers className="h-5 w-5 text-chart3" />
              </div>
              <h4 className="font-semibold">Modular Architecture</h4>
              <p className="text-sm text-muted-foreground">
                Composable components that can be easily combined and customized
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Implementation Details */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Routing Strategy
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <h4 className="font-semibold text-sm">Code Splitting</h4>
              <p className="text-sm text-muted-foreground">
                Each page component is loaded lazily using React.lazy() and Suspense, 
                reducing initial bundle size and improving load times.
              </p>
            </div>
            
            <div className="space-y-3">
              <h4 className="font-semibold text-sm">Navigation State</h4>
              <p className="text-sm text-muted-foreground">
                The PageLayout component automatically manages active navigation states 
                based on the current route, providing visual feedback to users.
              </p>
            </div>

            <div className="space-y-3">
              <h4 className="font-semibold text-sm">Route Organization</h4>
              <p className="text-sm text-muted-foreground">
                Routes are organized in App.tsx with clear path definitions, 
                making it easy to add new pages and maintain the routing structure.
              </p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Layers className="h-5 w-5" />
              Component Strategy
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <h4 className="font-semibold text-sm">UIKit Integration</h4>
              <p className="text-sm text-muted-foreground">
                Leverages UIKit's PageLayout, navigation components, and theme system 
                for consistent design and behavior across all pages.
              </p>
            </div>
            
            <div className="space-y-3">
              <h4 className="font-semibold text-sm">Layout Consistency</h4>
              <p className="text-sm text-muted-foreground">
                All pages share the same header, navigation, and footer through 
                the PageLayout wrapper, ensuring consistent user experience.
              </p>
            </div>

            <div className="space-y-3">
              <h4 className="font-semibold text-sm">Theme Integration</h4>
              <p className="text-sm text-muted-foreground">
                Theme switching works seamlessly across all pages without page 
                refreshes, demonstrating UIKit's powerful theming capabilities.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Getting Started */}
      <Card>
        <CardHeader>
          <CardTitle>Getting Started</CardTitle>
          <CardDescription>
            How to extend and customize this multi-page template for your needs
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <h4 className="font-semibold">Adding New Pages</h4>
              <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
                <li>Create a new component in <code className="bg-muted px-1 rounded">pages/</code></li>
                <li>Add the route to <code className="bg-muted px-1 rounded">App.tsx</code></li>
                <li>Update navigation in the PageLayout header</li>
                <li>Export the component with lazy loading if needed</li>
              </ol>
            </div>
            
            <div className="space-y-4">
              <h4 className="font-semibold">Customizing Layout</h4>
              <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
                <li>Modify the PageLayout props in App.tsx</li>
                <li>Create custom layout components in <code className="bg-muted px-1 rounded">layouts/</code></li>
                <li>Override navigation items and actions</li>
                <li>Customize footer content and styling</li>
              </ol>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default AboutPage;