import React from 'react';
import { PageLayout } from '@voilajsx/uikit/page';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { Badge } from '@voilajsx/uikit/badge';
import {
  Layers,
  Zap,
  Route,
  FolderOpen,
  Code2,
  Globe,
  Lightbulb,
  ArrowRight
} from 'lucide-react';
import { Header, Footer, SEO } from '../../../shared/components';

export const AboutPage: React.FC = () => {
  return (
    <PageLayout>
      <SEO
        title="About FBCA - Feature-Based Component Architecture | UIKit Demo"
        description="Learn about Feature-Based Component Architecture (FBCA) with convention-based routing, auto-discovery, and modern React patterns. Complete guide to FBCA implementation."
        keywords="fbca, feature-based architecture, react architecture, component organization, routing conventions, auto-discovery, react patterns"
        ogTitle="About FBCA - Feature-Based Component Architecture"
        ogDescription="Complete guide to Feature-Based Component Architecture with auto-discovery routing and modern React patterns"
      />
      <Header />

      <PageLayout.Content>
        <div className="space-y-8">
          <div className="text-center space-y-4">
            <h1 className="voila-heading text-4xl md:text-5xl text-gradient-primary">
              About FBCA Architecture
            </h1>
            <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto text-xl">
              Feature-Based Component Architecture with Page Router - A modern approach to building scalable React applications
            </p>
          </div>

          {/* What is FBCA */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Lightbulb className="h-5 w-5" />
                What is FBCA?
              </CardTitle>
              <CardDescription>
                Feature-Based Component Architecture organizes your application by features, not technical layers
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-4">
                  <h4 className="font-semibold text-lg">Traditional Structure</h4>
                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
                    <div className="text-red-600">❌ src/</div>
                    <div className="ml-2">├── components/</div>
                    <div className="ml-2">├── pages/</div>
                    <div className="ml-2">├── hooks/</div>
                    <div className="ml-2">├── utils/</div>
                    <div className="ml-2">└── services/</div>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Files scattered across technical layers, hard to find related code
                  </p>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold text-lg">FBCA Structure</h4>
                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
                    <div className="text-green-600">✅ src/</div>
                    <div className="ml-2">├── features/</div>
                    <div className="ml-4">│   ├── auth/pages/</div>
                    <div className="ml-4">│   ├── gallery/pages/</div>
                    <div className="ml-4">│   └── main/pages/</div>
                    <div className="ml-2">├── shared/components/</div>
                    <div className="ml-2">└── lib/page-router.tsx</div>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Everything related to a feature lives together, easy to find and maintain
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* FBCA Routing System */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Route className="h-5 w-5" />
                FBCA Routing System
              </CardTitle>
              <CardDescription>
                Convention-based routing with support for nested routes and dynamic parameters
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {/* Basic Routing Rules */}
                <div className="space-y-4">
                  <h4 className="font-semibold flex items-center gap-2">
                    <FolderOpen className="h-4 w-4" />
                    Basic File-Based Routing
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-3">
                      <Badge variant="outline" className="mb-2">Main Feature Priority</Badge>
                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
                        <div>features/main/pages/index.tsx</div>
                        <div className="text-primary">→ /</div>
                      </div>
                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
                        <div>features/main/pages/About.tsx</div>
                        <div className="text-primary">→ /about</div>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <Badge variant="outline" className="mb-2">Feature Routes</Badge>
                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
                        <div>features/auth/pages/index.tsx</div>
                        <div className="text-primary">→ /auth</div>
                      </div>
                      <div className="bg-muted/50 p-3 rounded text-sm font-mono space-y-1">
                        <div>features/gallery/pages/index.tsx</div>
                        <div className="text-primary">→ /gallery</div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Advanced Routing */}
                <div className="space-y-4">
                  <h4 className="font-semibold flex items-center gap-2">
                    <Layers className="h-4 w-4" />
                    Advanced Routing Patterns
                  </h4>

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Nested Routes */}
                    <div className="space-y-3">
                      <Badge variant="secondary" className="mb-2">Nested Routes</Badge>
                      <div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border border-blue-200 dark:border-blue-800 p-4 rounded-lg">
                        <div className="font-mono text-sm space-y-2">
                          <div className="font-semibold text-blue-800 dark:text-blue-200">File Structure:</div>
                          <div className="ml-2">features/gallery/pages/new/</div>
                          <div className="ml-4 text-blue-600 dark:text-blue-300">└── cat.tsx</div>
                          <div className="mt-3 pt-2 border-t border-blue-200 dark:border-blue-700">
                            <span className="text-blue-800 dark:text-blue-200 font-semibold">Route:</span>
                            <div className="text-blue-600 dark:text-blue-300 font-bold">/gallery/new/cat</div>
                          </div>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground">
                        Create nested directories for deeply nested routes
                      </p>
                    </div>

                    {/* Dynamic Routes */}
                    <div className="space-y-3">
                      <Badge variant="secondary" className="mb-2">Dynamic Parameters</Badge>
                      <div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border border-green-200 dark:border-green-800 p-4 rounded-lg">
                        <div className="font-mono text-sm space-y-2">
                          <div className="font-semibold text-green-800 dark:text-green-200">File Structure:</div>
                          <div className="ml-2">features/gallery/pages/</div>
                          <div className="ml-4 text-green-600 dark:text-green-300">└── [animal].tsx</div>
                          <div className="mt-3 pt-2 border-t border-green-200 dark:border-green-700">
                            <span className="text-green-800 dark:text-green-200 font-semibold">Route:</span>
                            <div className="text-green-600 dark:text-green-300 font-bold">/gallery/:animal</div>
                          </div>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground">
                        Square brackets create URL parameters
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Page Router Magic */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Zap className="h-5 w-5" />
                Page Router Magic
              </CardTitle>
              <CardDescription>
                Zero-configuration routing that automatically discovers your pages
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div className="bg-gradient-to-r from-primary/10 to-accent/10 p-6 rounded-lg border border-primary/20">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
                      <Globe className="h-6 w-6 text-primary" />
                    </div>
                    <div className="space-y-2">
                      <h4 className="font-semibold text-lg">Auto-Discovery</h4>
                      <p className="text-muted-foreground">
                        The PageRouter scans <code className="bg-muted px-1 rounded">features/*/pages/*.tsx</code> using Vite glob imports and automatically generates routes. No manual configuration needed!
                      </p>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-3">
                    <h4 className="font-semibold">How It Works</h4>
                    <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
                      <li>PageRouter scans all feature folders at build time</li>
                      <li>Generates route map based on file paths</li>
                      <li>Main feature gets priority routes (/, /about)</li>
                      <li>Other features get namespaced routes (/auth, /gallery)</li>
                      <li>Components are lazy-loaded automatically</li>
                    </ol>
                  </div>

                  <div className="space-y-3">
                    <h4 className="font-semibold">Benefits</h4>
                    <ul className="text-sm space-y-2 text-muted-foreground">
                      <li className="flex items-center gap-2">
                        <ArrowRight className="h-3 w-3 text-primary" />
                        No route configuration needed
                      </li>
                      <li className="flex items-center gap-2">
                        <ArrowRight className="h-3 w-3 text-primary" />
                        Add feature folder → route appears automatically
                      </li>
                      <li className="flex items-center gap-2">
                        <ArrowRight className="h-3 w-3 text-primary" />
                        No route conflicts or overlaps
                      </li>
                      <li className="flex items-center gap-2">
                        <ArrowRight className="h-3 w-3 text-primary" />
                        Clear ownership per feature
                      </li>
                      <li className="flex items-center gap-2">
                        <ArrowRight className="h-3 w-3 text-primary" />
                        Automatic code splitting
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Key Technologies */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Code2 className="h-5 w-5" />
                Technology Stack
              </CardTitle>
              <CardDescription>
                Modern tools that power this FBCA implementation
              </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="flex items-center justify-between">
                    <span className="font-medium">React 19</span>
                    <Badge variant="secondary">Frontend</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Latest React with Suspense for code splitting
                  </p>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">Vite Glob Imports</span>
                    <Badge variant="secondary">Build</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Dynamic page discovery at build time
                  </p>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">UIKit Components</span>
                    <Badge variant="secondary">UI</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Professional components with theme support
                  </p>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">TypeScript</span>
                    <Badge variant="secondary">Language</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Full type safety across the application
                  </p>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">Tailwind CSS</span>
                    <Badge variant="secondary">Styling</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Utility-first CSS with UIKit integration
                  </p>
                </div>

                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">React Router</span>
                    <Badge variant="secondary">Routing</Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Client-side routing with lazy loading
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Getting Started */}
          <Card className="bg-gradient-to-r from-primary/5 via-accent/5 to-primary/5 border-primary/20">
            <CardHeader>
              <CardTitle>Try FBCA Yourself</CardTitle>
              <CardDescription>
                Experience the power of Feature-Based Component Architecture
              </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">Create a New Feature</h4>
                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm space-y-1">
                    <div>mkdir src/features/blog</div>
                    <div>mkdir src/features/blog/pages</div>
                    <div>touch src/features/blog/pages/index.tsx</div>
                    <div className="text-green-600"># Route automatically available at /blog</div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="font-semibold">Add Feature Components</h4>
                  <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm space-y-1">
                    <div>mkdir src/features/blog/components</div>
                    <div>mkdir src/features/blog/hooks</div>
                    <div>touch src/features/blog/hooks/usePosts.ts</div>
                    <div className="text-green-600"># Self-contained feature</div>
                  </div>
                </div>
              </div>

              <div className="text-center pt-4">
                <Badge variant="outline" className="text-sm">
                  No configuration needed • Routes auto-discovered • Zero conflicts
                </Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </PageLayout.Content>

      <Footer />
    </PageLayout>
  );
};

export default AboutPage;