import { useEffect, useState } from 'react';
import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import styles from './Gallery.module.css';
import { ActionButtons } from '@/components/ActionButtons/ActionButtons';
import Header from '@/components/Header/Header';
import Footer from '@/components/Footer/Footer';

interface Photo {
    id: number;
    sort_order: number;
    name: string;
    description: string | null;
    photo: string;
    created_at: string;
    updated_at: string;
}

interface PhotosResponse {
    status: string;
    data: Photo[];
}

export default function Gallery() {
    const [photos, setPhotos] = useState<Photo[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/photos')
            .then(res => res.json())
            .then((response: PhotosResponse) => {
                if (response.status === 'success') {
                    setPhotos(response.data);
                }
                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching photos:', error);
                setLoading(false);
            });
    }, []);

    if (loading) {
        return (
            <></>
        );
    }

    return (
        <AppLayout>
            <Head title="Galeria - GhostPizza">
                <meta name="description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
                <meta name="keywords" content="galeria pizzy, zdjęcia pizzy, GhostPizza galeria, pizza foto" />
                <meta name="robots" content="index, follow" />
                <meta name="author" content="GhostPizza" />
                <link rel="canonical" href={window.location.href} />
                
                {/* Open Graph */}
                <meta property="og:title" content="Galeria - GhostPizza" />
                <meta property="og:description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
                <meta property="og:type" content="website" />
                <meta property="og:url" content={window.location.href} />
                <meta property="og:site_name" content="GhostPizza" />
                <meta property="og:locale" content="pl_PL" />
                
                {/* Twitter Card */}
                <meta name="twitter:card" content="summary_large_image" />
                <meta name="twitter:title" content="Galeria - GhostPizza" />
                <meta name="twitter:description" content="Zobacz zdjęcia naszej przepysznej pizzy. Galeria Ghost Pizza." />
            </Head>
            <div className={styles.bg}>
                <Header isSmall={true} />
                <main className={styles.main}>
                <h2>Poniżej znajdziesz kilka zdjęć naszej przepysznej pizzy.</h2>
                    <div className={styles.container}>
                        {photos.map((photo, index) => (
                            <img
                                key={index}
                                src={photo.photo}
                                alt={photo.description ? photo.description : ""}
                                className={styles.image}
                            />
                        ))}
                    </div>
                </main>
                <ActionButtons variant="floating" />
                <Footer />
            </div>
        </AppLayout>
    );
}