/**
 * UI Components Example
 * 
 * This file demonstrates how to use all the UI components in the design system.
 * Each component is shown with various props and configurations.
 */

import React from 'react';
import {
  Button,
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  CardImage,
  Container,
  Grid,
  GridItem,
  Badge,
  BadgeGroup,
  Loading,
  LoadingButton,
  LoadingSkeleton,
} from './index';

// Example Icons (using simple SVG)
const ArrowRightIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
);

const CheckIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12"/>
  </svg>
);

const StarIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  </svg>
);

// Button Examples
export const ButtonExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Buttons</h3>
    
    {/* Primary Buttons */}
    <div className="flex gap-2 flex-wrap">
      <Button variant="primary" size="sm">Small Primary</Button>
      <Button variant="primary" size="md">Medium Primary</Button>
      <Button variant="primary" size="lg">Large Primary</Button>
      <Button variant="primary" icon={<ArrowRightIcon />} iconPosition="right">With Icon</Button>
      <Button variant="primary" loading>Loading</Button>
      <Button variant="primary" disabled>Disabled</Button>
    </div>

    {/* Secondary Buttons */}
    <div className="flex gap-2 flex-wrap">
      <Button variant="secondary" size="md">Secondary</Button>
      <Button variant="secondary" icon={<CheckIcon />}>Success</Button>
    </div>

    {/* Outline Buttons */}
    <div className="flex gap-2 flex-wrap">
      <Button variant="outline" size="md">Outline</Button>
      <Button variant="outline" icon={<StarIcon />}>With Icon</Button>
    </div>

    {/* Ghost Buttons */}
    <div className="flex gap-2 flex-wrap">
      <Button variant="ghost" size="md">Ghost</Button>
      <Button variant="ghost" fullWidth>Full Width Ghost</Button>
    </div>
  </div>
);

// Card Examples
export const CardExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Cards</h3>
    
    <Grid cols={1} colsMd={2} gap="md">
      {/* Basic Card */}
      <Card variant="elevated" padding="lg">
        <CardHeader 
          title="Basic Card"
          subtitle="With header and content"
        />
        <CardBody>
          <p>This is a basic card with elevated variant. It includes a header, body content, and footer.</p>
        </CardBody>
        <CardFooter>
          <Button variant="primary" size="sm">Action</Button>
          <Button variant="ghost" size="sm">Cancel</Button>
        </CardFooter>
      </Card>

      {/* Card with Image */}
      <Card variant="flat" padding="none">
        <CardImage 
          src="https://via.placeholder.com/400x200/0056b3/ffffff?text=Card+Image"
          alt="Card image"
          height="md"
        />
        <div className="p-4">
          <CardHeader 
            title="Card with Image"
            subtitle="Image at the top"
          />
          <CardBody>
            <p>Cards can include images for visual appeal.</p>
          </CardBody>
        </div>
      </Card>

      {/* Bordered Card */}
      <Card variant="bordered" padding="md">
        <CardHeader 
          title="Bordered Card"
          icon={<StarIcon />}
          action={<Badge variant="success">New</Badge>}
        />
        <CardBody>
          <p>This card has a strong border and includes an icon in the header.</p>
        </CardBody>
        <CardFooter align="right">
          <Button variant="outline" size="sm">Learn More</Button>
        </CardFooter>
      </Card>

      {/* Hoverable Card */}
      <Card variant="elevated" padding="lg" hoverable>
        <CardHeader title="Hoverable Card" />
        <CardBody>
          <p>Hover over this card to see the effect!</p>
        </CardBody>
        <CardFooter>
          <BadgeGroup gap="sm">
            <Badge variant="primary">React</Badge>
            <Badge variant="secondary">TypeScript</Badge>
            <Badge variant="info">Tailwind</Badge>
          </BadgeGroup>
        </CardFooter>
      </Card>
    </Grid>
  </div>
);

// Container Examples
export const ContainerExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Containers</h3>
    
    <Container maxWidth="lg" padding="lg" className="bg-gray-50 rounded-lg">
      <p className="text-center">Default Container (max-width: lg, padding: lg)</p>
    </Container>

    <Container maxWidth="md" padding="md" className="bg-accent rounded-lg">
      <p className="text-center">Medium Container (max-width: md, padding: md)</p>
    </Container>

    <Container fluid className="bg-primary text-white rounded-lg py-4">
      <p className="text-center">Fluid Container (full width)</p>
    </Container>
  </div>
);

// Grid Examples
export const GridExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Grid System</h3>
    
    {/* Basic Grid */}
    <div className="space-y-2">
      <p className="text-sm text-gray-600">12-column responsive grid:</p>
      <Grid cols={2} colsMd={4} gap="sm">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
          <div key={item} className="bg-primary text-white p-4 rounded text-center">
            {item}
          </div>
        ))}
      </Grid>
    </div>

    {/* Grid with Span */}
    <div className="space-y-2">
      <p className="text-sm text-gray-600">Grid with column spans:</p>
      <Grid cols={3} gap="md">
        <GridItem colSpan={2} className="bg-secondary text-white p-4 rounded">
          Span 2 columns
        </GridItem>
        <GridItem className="bg-accent p-4 rounded">1 column</GridItem>
        <GridItem className="bg-warning p-4 rounded">1 column</GridItem>
        <GridItem colSpan={2} className="bg-success text-white p-4 rounded">
          Span 2 columns
        </GridItem>
      </Grid>
    </div>

    {/* Responsive Grid */}
    <div className="space-y-2">
      <p className="text-sm text-gray-600">Responsive (1 col mobile, 2 tablet, 3 desktop):</p>
      <Grid cols={1} colsSm={2} colsLg={3} gap="lg">
        {[1, 2, 3, 4, 5, 6].map((item) => (
          <div key={item} className="bg-gray-200 p-6 rounded text-center font-medium">
            Item {item}
          </div>
        ))}
      </Grid>
    </div>
  </div>
);

// Badge Examples
export const BadgeExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Badges</h3>
    
    <div className="space-y-3">
      {/* Badge Variants */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Color Variants:</p>
        <BadgeGroup gap="sm">
          <Badge variant="primary">Primary</Badge>
          <Badge variant="secondary">Secondary</Badge>
          <Badge variant="success">Success</Badge>
          <Badge variant="warning">Warning</Badge>
          <Badge variant="error">Error</Badge>
          <Badge variant="info">Info</Badge>
          <Badge variant="neutral">Neutral</Badge>
        </BadgeGroup>
      </div>

      {/* Badge Sizes */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Sizes:</p>
        <BadgeGroup gap="md">
          <Badge variant="primary" size="sm">Small</Badge>
          <Badge variant="primary" size="md">Medium</Badge>
          <Badge variant="primary" size="lg">Large</Badge>
        </BadgeGroup>
      </div>

      {/* Badges with Icons */}
      <div>
        <p className="text-sm text-gray-600 mb-2">With Icons:</p>
        <BadgeGroup gap="sm">
          <Badge variant="success" icon={<CheckIcon />}>Success</Badge>
          <Badge variant="primary" icon={<StarIcon />} iconPosition="right">Star</Badge>
          <Badge variant="warning" icon={<ArrowRightIcon />}>Next</Badge>
        </BadgeGroup>
      </div>

      {/* Rounded Badges */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Rounded:</p>
        <BadgeGroup gap="sm">
          <Badge variant="primary" rounded={true}>Rounded</Badge>
          <Badge variant="secondary" rounded={false}>Squared</Badge>
        </BadgeGroup>
      </div>
    </div>
  </div>
);

// Loading Examples
export const LoadingExamples = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold mb-2">Loading Components</h3>
    
    <div className="space-y-4">
      {/* Spinner Sizes */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Spinner Sizes:</p>
        <div className="flex gap-4 items-center flex-wrap">
          <Loading size="sm" />
          <Loading size="md" />
          <Loading size="lg" />
          <Loading size="xl" />
        </div>
      </div>

      {/* Spinner Variants */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Spinner Variants:</p>
        <div className="flex gap-4 items-center flex-wrap">
          <Loading size="md" variant="primary" />
          <Loading size="md" variant="secondary" />
          <Loading size="md" variant="neutral" />
          <Loading size="md" variant="contrast" />
        </div>
      </div>

      {/* Loading with Text */}
      <div>
        <p className="text-sm text-gray-600 mb-2">With Text:</p>
        <Loading size="md" text="Loading data..." />
      </div>

      {/* Loading Button */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Loading Button:</p>
        <LoadingButton size="md" text="Processing..." />
      </div>

      {/* Loading Skeleton */}
      <div>
        <p className="text-sm text-gray-600 mb-2">Skeleton Loaders:</p>
        <div className="space-y-2">
          <LoadingSkeleton width="100%" height="1rem" />
          <LoadingSkeleton width="80%" height="1rem" />
          <LoadingSkeleton width="60%" height="1rem" rounded />
          <LoadingSkeleton width="100%" height="4rem" rounded />
        </div>
      </div>
    </div>
  </div>
);

// Combined Example - Full Page Layout
export const FullPageExample = () => (
  <Container maxWidth="6xl" padding="lg">
    <div className="space-y-8">
      {/* Header Section */}
      <div className="text-center space-y-2">
        <h1 className="text-4xl font-bold text-gray-900">UI Components Showcase</h1>
        <p className="text-lg text-gray-600">
          A comprehensive design system for your Next.js application
        </p>
      </div>

      {/* Hero Card */}
      <Card variant="elevated" padding="xl">
        <CardImage 
          src="https://via.placeholder.com/1200x400/0056b3/ffffff?text=Hero+Image"
          alt="Hero"
          height="lg"
        />
        <CardHeader 
          title="Welcome to the Design System"
          subtitle="Built with accessibility and responsiveness in mind"
          icon={<StarIcon />}
        />
        <CardBody>
          <p>
            This design system provides a complete set of reusable components 
            that follow modern design principles and accessibility standards.
          </p>
        </CardBody>
        <CardFooter align="center">
          <Button variant="primary" size="lg" icon={<ArrowRightIcon />} iconPosition="right">
            Get Started
          </Button>
          <Button variant="outline" size="lg">Learn More</Button>
        </CardFooter>
      </Card>

      {/* Feature Grid */}
      <div>
        <h2 className="text-2xl font-bold mb-4 text-center">Features</h2>
        <Grid cols={1} colsMd={2} colsLg={3} gap="lg">
          <Card variant="bordered" padding="md">
            <CardHeader title="Responsive" icon={<StarIcon />} />
            <CardBody>
              <p>Works perfectly on all devices from mobile to desktop.</p>
            </CardBody>
            <CardFooter>
              <Badge variant="success">Ready</Badge>
            </CardFooter>
          </Card>

          <Card variant="bordered" padding="md">
            <CardHeader title="Accessible" icon={<CheckIcon />} />
            <CardBody>
              <p>Follows WCAG guidelines with proper ARIA attributes.</p>
            </CardBody>
            <CardFooter>
              <Badge variant="info">WCAG 2.1</Badge>
            </CardFooter>
          </Card>

          <Card variant="bordered" padding="md">
            <CardHeader title="TypeScript" icon={<ArrowRightIcon />} />
            <CardBody>
              <p>Fully typed with TypeScript for better developer experience.</p>
            </CardBody>
            <CardFooter>
              <Badge variant="primary">TypeScript</Badge>
            </CardFooter>
          </Card>
        </Grid>
      </div>

      {/* Action Section */}
      <div className="text-center space-y-3">
        <p className="text-gray-700">Ready to start building?</p>
        <div className="flex gap-2 justify-center flex-wrap">
          <Button variant="primary" size="lg">Start Building</Button>
          <Button variant="secondary" size="lg">View Documentation</Button>
          <Button variant="ghost" size="lg" icon={<StarIcon />}>Star on GitHub</Button>
        </div>
        <BadgeGroup gap="sm" className="justify-center">
          <Badge variant="primary">React</Badge>
          <Badge variant="secondary">Next.js</Badge>
          <Badge variant="info">TypeScript</Badge>
          <Badge variant="success">Tailwind CSS</Badge>
        </BadgeGroup>
      </div>
    </div>
  </Container>
);

// Main Export - All Components
export const AllComponentsExample = () => {
  return (
    <div className="space-y-12 py-8">
      <ButtonExamples />
      <CardExamples />
      <ContainerExamples />
      <GridExamples />
      <BadgeExamples />
      <LoadingExamples />
      <FullPageExample />
    </div>
  );
};

export default AllComponentsExample;