import React from 'react';
import { PageLayout } from '@voilajsx/uikit/page';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent } from '@voilajsx/uikit/card';
import { RefreshCw, Images } from 'lucide-react';
import { Header, Footer, SEO } from '../../../shared/components';
import { useGallery } from '../hooks/useGallery';

const GalleryPage: React.FC = () => {
  const { images, loading, error, refreshImages } = useGallery(6);

  return (
    <PageLayout>
      <SEO
        title="Gallery - Random Images | UIKit FBCA Demo"
        description="Explore beautiful random images powered by Picsum Photos API. Demonstrates external API integration with custom React hooks in Feature-Based Component Architecture."
        keywords="react gallery, picsum photos, external api, react hooks, image gallery, fbca, feature architecture"
        ogTitle="Gallery - Random Images | FBCA Demo"
        ogDescription="Beautiful random image gallery showcasing external API integration with React hooks"
      />
      <Header />

      <PageLayout.Content>
        <div className="space-y-8">
          {/* Hero Section */}
          <section className="text-center py-12">
            <div className="space-y-4">
              <div className="flex items-center justify-center gap-3 mb-4">
                <Images className="w-8 h-8 text-primary" />
                <h1 className="text-4xl md:text-5xl font-bold text-gradient-primary">
                  Random Gallery
                </h1>
              </div>
              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                Beautiful random images powered by Picsum Photos. Each refresh brings new stunning photography.
              </p>
              <div className="pt-4">
                <Button
                  onClick={refreshImages}
                  disabled={loading}
                  className="gap-2"
                  size="lg"
                >
                  <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
                  {loading ? 'Loading...' : 'Refresh Gallery'}
                </Button>
              </div>
              {error && (
                <div className="text-sm text-amber-600 bg-amber-50 p-3 rounded-lg max-w-md mx-auto">
                  ⚠️ {error}
                </div>
              )}
            </div>
          </section>

          {/* Gallery Grid */}
          <section className="space-y-6">
            {loading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[...Array(6)].map((_, i) => (
                  <Card key={i} className="animate-pulse">
                    <CardContent className="p-0">
                      <div className="h-64 bg-muted rounded-lg"></div>
                      <div className="p-4">
                        <div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
                        <div className="h-3 bg-muted rounded w-1/2"></div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {images.map((image, index) => (
                  <Card key={image.id} className="group hover:shadow-xl transition-all duration-300 overflow-hidden">
                    <CardContent className="p-0">
                      <div className="relative overflow-hidden">
                        <img
                          src={image.url}
                          alt={`Gallery image ${index + 1}`}
                          className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
                          loading="lazy"
                        />
                      </div>
                      <div className="p-4">
                        <div className="flex items-center justify-between">
                          <div>
                            <div className="text-sm font-medium">Image #{index + 1}</div>
                            <div className="text-xs text-muted-foreground">
                              {image.width} × {image.height}px
                            </div>
                          </div>
                          <div className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
                            Random
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}
          </section>

          {/* Stats Section */}
          <section className="py-8">
            <Card className="bg-muted/20">
              <CardContent className="p-6 text-center">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div>
                    <div className="text-2xl font-bold text-primary">{images.length}</div>
                    <div className="text-sm text-muted-foreground">Images Loaded</div>
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-primary">
                      {images.reduce((total, img) => total + img.width * img.height, 0).toLocaleString()}
                    </div>
                    <div className="text-sm text-muted-foreground">Total Pixels</div>
                  </div>
                  <div>
                    <div className="text-2xl font-bold text-primary">Picsum API</div>
                    <div className="text-sm text-muted-foreground">Data Source</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </section>
        </div>
      </PageLayout.Content>

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

export default GalleryPage;