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

interface OpeningHour {
    type: 'opening_hour';
    data: {
        name: string;
        time: string;
    };
}

interface Promotion {
    id: number;
    sort_order: number;
    title: string;
    description: string;
    additional_info: string | null;
    created_at: string;
    updated_at: string;
}

interface HomepageData {
    status: string;
    data: {
        photo: string | null;
        photo_mobile: string | null;
        title: string | null;
        body: string | null;
        delivery: string | null;
        address: string | null;
        opening_hours: OpeningHour[];
        widget_link: string | null;
    };
}

export default function Home() {
    const [data, setData] = useState<HomepageData['data'] | null>(null);
    const [promotions, setPromotions] = useState<Promotion[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        Promise.all([
            fetch('/api/homepage').then(res => res.json()),
            fetch('/api/promotions').then(res => res.json())
        ])
            .then(([homepageResponse, promotionsResponse]) => {
                setData(homepageResponse.data);
                setPromotions(promotionsResponse.data);
                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                setLoading(false);
            });
    }, []);

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

    return (
        <AppLayout>
            <Head title={data?.title || 'GhostPizza - Pizzeria w Twoim mieście'}>
                <meta name="description" content="Najlepsza pizza w mieście. Zamów online lub odwiedź naszą pizzerię." />
                <meta name="keywords" content="pizza, pizzeria, dostawa pizzy, zamów pizzę online, GhostPizza" />
                <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={data?.title || 'GhostPizza - Pizzeria w Twoim mieście'} />
                <meta property="og:description" content="Najlepsza pizza w mieście. Zamów online lub odwiedź naszą pizzerię." />
                <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={data?.title || 'GhostPizza - Pizzeria w Twoim mieście'} />
                <meta name="twitter:description" content="Najlepsza pizza w mieście. Zamów online lub odwiedź naszą pizzerię." />
            </Head>
            
            <div className={styles.container}>
            <Header />
            <main className={styles.main}>
            <div className={styles.left}>
                {data?.body && (
                    <div className={classNames(styles.text)}>
                        <div  
                            dangerouslySetInnerHTML={{ __html: data.body }} 
                        />
                    </div>
                )}
                <div className={classNames(styles.text, styles.promo)}>
                    {promotions.map((promotion) => (
                        <div key={promotion.id}>
                            <strong>{promotion.title}</strong> {promotion.description} {promotion.additional_info}
                        </div>
                    ))}
                </div>
                {data?.delivery && (
                    <div className={classNames(styles.text, styles.special)}>
                        <div  
                            dangerouslySetInnerHTML={{ __html: data.delivery }} 
                        />
                    </div>
                )}

                <ActionButtons variant="default" />
            </div>
            <div className={styles.right}>
                {data?.address && (
                    <div className={classNames(styles.big)} dangerouslySetInnerHTML={{ __html: data.address }} />
                )}

                <div className={styles.big}>Godziny otwarcia:</div>
                <div className={styles.hours}>  
                    {data?.opening_hours.map((hour, index) => (
                        <div key={index}><div>{hour.data.name}</div> <div className={styles.bold}>{hour.data.time}</div></div>
                    ))}
                </div>

                <div className={styles.mapouter}>
                    <div className={styles['gmap_canvas']}>
                        {data?.widget_link ? (
                            <iframe
                                title="Mapa"
                                src={data.widget_link}
                                width="600" 
                                height="500"
                                frameBorder="0" 
                                scrolling="no"
                                id="gmap_canvas"
                                loading="lazy"
                                referrerPolicy="no-referrer-when-downgrade"
                            />
                        ) : null}
                    </div>
                </div>
            </div>
            </main>
            <Footer />
        </div>
        </AppLayout>
    );
}
