import { TurnstileField } from '@frontend/components/forms/TurnstileField';
import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { useForm, usePage } from '@inertiajs/react';
import { type FormEvent, useState } from 'react';

export type PublicMenuItem = {
    name: string;
    description: string;
    price: string;
    image: string;
};

export type PublicMenuCategory = {
    name: string;
    subtitle: string;
    servingTime: string;
    items: PublicMenuItem[];
};

type RestaurantMainProps = {
    categories: PublicMenuCategory[];
};

function MenuColumn({ items, side }: { items: PublicMenuItem[]; side: 'left' | 'right' }) {
    return (
        <div className={`menu-wapper menu-wapper-${side}`}>
            {items.map((item) => (
                <div className="menu-item" key={item.name}>
                    <div className="menu-image">
                        <figure className="image-anime">
                            <img src={item.image} alt={item.name} />
                        </figure>
                    </div>
                    <div className="menu-content">
                        <div className="menu-content-top">
                            <h3 className="menu-title">{item.name}</h3>
                            <div className="menu-price">{item.price}</div>
                        </div>
                        {item.description && (
                            <div className="menu-content-bottom">
                                <p>{item.description}</p>
                            </div>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );
}

export function RestaurantMain({ categories }: RestaurantMainProps) {
    const { flash } = usePage<{ flash?: { success?: { message?: string } } }>().props;
    const [widgetKey, setWidgetKey] = useState(0);
    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        phone: '',
        email: '',
        date: '',
        time: '',
        guests: '2',
        message: '',
        turnstile_token: '',
    });

    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        post(route('restaurant.store'), {
            preserveScroll: true,
            onSuccess: () => {
                reset();
                setWidgetKey((value) => value + 1);
            },
        });
    };

    return (
        <>
            <PageBreadcrumb page="dining" />

            <div className="container pt-80 md-pt-60 text-center">
                <a className="theme-button style-1" href={route('restaurant.menu')}>
                    Download menu
                </a>
            </div>

            {categories.map((category, index) => {
                const midpoint = Math.ceil(category.items.length / 2);
                const left = category.items.slice(0, midpoint);
                const right = category.items.slice(midpoint);

                return (
                    <section
                        className={`restaurant-section pt-100 md-pt-80 pb-100 md-pb-80${index % 2 === 1 ? ' extra-color' : ''}`}
                        key={category.name}
                    >
                        <div className="container">
                            <div className="row">
                                <div className="col-lg-12">
                                    <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                        {category.subtitle && <span className="sub-title">{category.subtitle}</span>}
                                        <h2>{category.name}</h2>
                                    </div>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".2s">
                                    <MenuColumn items={left} side="left" />
                                </div>
                                <div className="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay=".3s">
                                    <MenuColumn items={right} side="right" />
                                </div>
                            </div>
                            {category.servingTime && (
                                <div className="row">
                                    <div className="col-lg-12">
                                        <div className="restaurant-time-content wow fadeInUp" data-wow-delay=".4s">
                                            <p>Time: {category.servingTime}</p>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    </section>
                );
            })}

            <section className="restaurant-booking-section pt-100 md-pt-80 pb-100 md-pb-80" data-img-src="/assets/images/restaurant/restaurant-bg.jpg">
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-lg-8 col-md-12">
                            <div className="restaurant-booking-wapper" data-img-src="/assets/images/shape/bg-shape-1.png">
                                <div className="section-title section-title-white text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Book Table</span>
                                    <h2>Book Your Private Table</h2>
                                </div>
                                <div className="default-form restaurant-booking-form wow fadeInUp" data-wow-delay=".3s">
                                    {flash?.success?.message && <p className="text-center">{flash.success.message}</p>}
                                    <form onSubmit={onSubmit}>
                                        <div className="row">
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-name">Name</label>
                                                        <input id="table-name" className="form-control" type="text" placeholder="Ex. name" autoComplete="name" value={data.name} onChange={(event) => setData('name', event.target.value)} />
                                                        {errors.name && <span className="error">{errors.name}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-phone">Phone Number*</label>
                                                        <input id="table-phone" className="form-control" type="text" autoComplete="tel" placeholder="Ex. +255 737 562 788" required value={data.phone} onChange={(event) => setData('phone', event.target.value)} />
                                                        {errors.phone && <span className="error">{errors.phone}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-email">Email</label>
                                                        <input id="table-email" className="form-control" type="email" placeholder="Ex. info@example.com" autoComplete="email" value={data.email} onChange={(event) => setData('email', event.target.value)} />
                                                        {errors.email && <span className="error">{errors.email}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-date">Date</label>
                                                        <input className="form-control" id="table-date" type="date" autoComplete="off" required value={data.date} onChange={(event) => setData('date', event.target.value)} />
                                                        {errors.date && <span className="error">{errors.date}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-time">Time</label>
                                                        <input className="form-control" id="table-time" type="time" autoComplete="off" required value={data.time} onChange={(event) => setData('time', event.target.value)} />
                                                        {errors.time && <span className="error">{errors.time}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6 col-md-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-guests">Person</label>
                                                        <select className="form-select" id="table-guests" aria-label="Select Person" value={data.guests} onChange={(event) => setData('guests', event.target.value)}>
                                                            {['1', '2', '3', '4', '5', '6', '7', '8'].map((value) => (
                                                                <option key={value} value={value}>{value.padStart(2, '0')}</option>
                                                            ))}
                                                        </select>
                                                        {errors.guests && <span className="error">{errors.guests}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-12">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="table-message">Message*</label>
                                                        <textarea id="table-message" className="form-control" autoComplete="off" placeholder="Ex. type messege" required value={data.message} onChange={(event) => setData('message', event.target.value)}></textarea>
                                                        {errors.message && <span className="error">{errors.message}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-12">
                                                <TurnstileField error={errors.turnstile_token} resetKey={widgetKey} onToken={(token) => setData('turnstile_token', token)} />
                                            </div>
                                            <div className="col-lg-12">
                                                <div className="appointment-button-wapper text-center mt-10">
                                                    <button type="submit" className="theme-button style-1" data-text="Book Table" disabled={processing}>
                                                        Book Table
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}