import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/app/components/ui/card';
import { Badge } from '@/app/components/ui/badge';
import { CheckCircle2 } from 'lucide-react';

export default function DesignSummary() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div className="text-center space-y-4 py-8">
        <div className="inline-flex items-center justify-center w-20 h-20 bg-primary rounded-2xl mb-4">
          <span className="text-4xl font-bold text-primary-foreground">T</span>
        </div>
        <h1 className="text-4xl font-bold">tourn.me Design System</h1>
        <p className="text-xl text-muted-foreground">
          Complete UI/UX Design Reference for Padel Tournament Management Platform
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>🎨 Design System Overview</CardTitle>
          <CardDescription>
            A comprehensive design system built with React, Tailwind CSS, and shadcn/ui
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h3 className="font-semibold mb-3">Brand Identity</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
                <div className="w-12 h-12 bg-primary rounded"></div>
                <div>
                  <div className="font-medium">Primary Color</div>
                  <div className="text-sm text-muted-foreground">#F3B331</div>
                </div>
              </div>
              <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
                <div className="w-12 h-12 bg-secondary rounded"></div>
                <div>
                  <div className="font-medium">Secondary Color</div>
                  <div className="text-sm text-muted-foreground">#111827</div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h3 className="font-semibold mb-3">Design Philosophy</h3>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <span>Modern, minimal aesthetic inspired by Airbnb and Playtomic</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <span>Sport-focused with emphasis on clarity and readability</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <span>Responsive layouts optimized for desktop, tablet, and TV displays</span>
              </li>
              <li className="flex items-start gap-2">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <span>Dark mode support throughout the entire system</span>
              </li>
            </ul>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>📦 Components Included</CardTitle>
          <CardDescription>All components with comprehensive examples</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <h4 className="font-semibold text-sm">Base Components</h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                <li>• Typography (H1-H4, Body, Small)</li>
                <li>• Buttons (Primary, Secondary, Outline, Ghost, Link)</li>
                <li>• Form Elements (Input, Select, Switch, Checkbox)</li>
                <li>• Badges & Status Indicators</li>
                <li>• Avatars & User Elements</li>
                <li>• Cards & Containers</li>
                <li>• Icons (Lucide React)</li>
              </ul>
            </div>

            <div className="space-y-2">
              <h4 className="font-semibold text-sm">Advanced Components</h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                <li>• Tables (Players, Standings, Teams)</li>
                <li>• Tournament Brackets</li>
                <li>• Match Cards & Visualizations</li>
                <li>• Modals & Dialogs</li>
                <li>• Tooltips & Popovers</li>
                <li>• Alerts & Notifications</li>
                <li>• Navigation (Tabs, Sidebar, Header)</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>📱 Page Mockups</CardTitle>
          <CardDescription>Complete page designs for all user flows</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Badge variant="outline">Not Logged In</Badge>
            </h3>
            <div className="space-y-2">
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Landing Page</div>
                <p className="text-sm text-muted-foreground">
                  Hero section, features grid, how it works, stats, CTA, and footer
                </p>
              </div>
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Login Page</div>
                <p className="text-sm text-muted-foreground">
                  Clean authentication form with password recovery link
                </p>
              </div>
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Registration Page</div>
                <p className="text-sm text-muted-foreground">
                  Two-column layout with benefits and registration form
                </p>
              </div>
            </div>
          </div>

          <div>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Badge className="bg-primary text-primary-foreground">Admin Area</Badge>
            </h3>
            <div className="space-y-2">
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Dashboard</div>
                <p className="text-sm text-muted-foreground">
                  Sidebar layout with stats cards, active tournaments, recent activity, and upcoming matches
                </p>
              </div>
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Tournament List</div>
                <p className="text-sm text-muted-foreground">
                  Search, filters, tabs (Active/Upcoming/Completed/Draft), and card grid layout
                </p>
              </div>
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Tournament Detail</div>
                <p className="text-sm text-muted-foreground">
                  Multi-tab interface with overview, match scheduling (drag & drop), bracket, and teams table
                </p>
              </div>
            </div>
          </div>

          <div>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Badge className="bg-blue-500 text-white">Public Display</Badge>
            </h3>
            <div className="space-y-2">
              <div className="p-3 bg-muted rounded-lg">
                <div className="font-medium mb-1">Public Tournament View (TV Display)</div>
                <p className="text-sm text-muted-foreground">
                  Large format design with live matches, completed results, upcoming schedule, bracket preview, and QR code
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>🎯 Key Features</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">Status-Driven Design</div>
                  <p className="text-sm text-muted-foreground">
                    Clear visual indicators for tournaments, matches, and teams (draft, in progress, completed, etc.)
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">Tournament Brackets</div>
                  <p className="text-sm text-muted-foreground">
                    Visual bracket displays for single/double elimination formats
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">Match Management</div>
                  <p className="text-sm text-muted-foreground">
                    Drag & drop scheduling with court assignments and score tracking
                  </p>
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">Data Tables</div>
                  <p className="text-sm text-muted-foreground">
                    Comprehensive tables for players, teams, and standings with sorting
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">Dark Mode</div>
                  <p className="text-sm text-muted-foreground">
                    Complete dark mode support with theme toggle
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
                <div>
                  <div className="font-medium">TV Display Optimized</div>
                  <p className="text-sm text-muted-foreground">
                    Large, readable public view perfect for center displays
                  </p>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>🛠️ Technology Stack</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <h4 className="font-semibold text-sm">Frontend</h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                <li>• React 18</li>
                <li>• Vite (build tool)</li>
                <li>• Tailwind CSS v4</li>
                <li>• shadcn/ui components</li>
                <li>• Lucide React (icons)</li>
                <li>• Radix UI primitives</li>
              </ul>
            </div>

            <div className="space-y-2">
              <h4 className="font-semibold text-sm">Design Tokens</h4>
              <ul className="space-y-1 text-sm text-muted-foreground">
                <li>• CSS Custom Properties</li>
                <li>• Responsive spacing system</li>
                <li>• Typography scale</li>
                <li>• Color palette with semantic naming</li>
                <li>• Border radius tokens</li>
                <li>• Shadow utilities</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>📋 Usage Guide</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <h4 className="font-semibold mb-2">Exploring the Design System</h4>
            <p className="text-sm text-muted-foreground mb-3">
              Use the tabs at the top of the page to navigate through different sections:
            </p>
            <ul className="space-y-1 text-sm text-muted-foreground">
              <li>• <strong>Design System:</strong> View all components, colors, typography, and UI elements</li>
              <li>• <strong>Landing:</strong> Public-facing marketing page</li>
              <li>• <strong>Login/Register:</strong> Authentication flows</li>
              <li>• <strong>Dashboard:</strong> Admin home with sidebar navigation</li>
              <li>• <strong>Tournaments:</strong> Tournament management list view</li>
              <li>• <strong>Tournament Detail:</strong> Full tournament management interface</li>
              <li>• <strong>Public View:</strong> TV display for centers</li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-2">For Figma Design</h4>
            <p className="text-sm text-muted-foreground">
              This interactive prototype serves as a complete reference for your Figma designs. 
              All components, spacing, colors, and layouts are production-ready and can be 
              directly translated to Figma. Use the dark mode toggle to see both theme variants.
            </p>
          </div>

          <div>
            <h4 className="font-semibold mb-2">Component Reusability</h4>
            <p className="text-sm text-muted-foreground">
              Every component is built to be reusable and follows consistent patterns. 
              Status badges, cards, tables, and navigation elements maintain the same 
              visual language throughout the application.
            </p>
          </div>
        </CardContent>
      </Card>

      <Card className="bg-gradient-to-br from-primary/10 to-primary/5 border-primary/20">
        <CardContent className="pt-6">
          <div className="text-center space-y-3">
            <div className="text-2xl font-bold">✨ Ready to Build</div>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              This design system provides everything you need to create a cohesive, 
              professional tournament management platform. All components are designed 
              to work together seamlessly.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}