import { TurnstileField } from '@frontend/components/forms/TurnstileField';
import { PageBreadcrumb } from '@frontend/components/layout/PageBreadcrumb';
import { useStayQuote } from '@frontend/hooks/use-stay-quote';
import { useForm, usePage } from '@inertiajs/react';
import { type FormEvent, useState } from 'react';

export type BookableRoom = {
    slug: string;
    name: string;
    occupancy: number | null;
};

export type BookingInitial = {
    room: string;
    check_in: string;
    check_out: string;
    adults: string;
    children: string;
    extra_beds: string;
};

type BookMainProps = {
    rooms: BookableRoom[];
    initial: BookingInitial;
};

type FlashProps = {
    flash?: {
        success?: { message?: string };
        error?: { message?: string };
    };
};

const guestOptions = ['0', '1', '2', '3', '4'];

export function BookMain({ rooms, initial }: BookMainProps) {
    const { flash } = usePage<FlashProps>().props;
    const [widgetKey, setWidgetKey] = useState(0);
    const { data, setData, post, processing, errors, reset } = useForm({
        room: initial.room,
        check_in: initial.check_in,
        check_out: initial.check_out,
        adults: initial.adults || '1',
        children: initial.children || '0',
        extra_beds: initial.extra_beds || '0',
        name: '',
        email: '',
        phone: '',
        message: '',
        turnstile_token: '',
    });
    const { quote, quoteError, checking } = useStayQuote(data.room, data.check_in, data.check_out);

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

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

            <section className="booking-section-3 pt-100 md-pt-80 pb-100 md-pb-80">
                <form className="booking-form" id="booking-forms" onSubmit={onSubmit}>
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-8 col-md-12">
                                <div className="booking-content">
                                    <div className="section-title mb-30">
                                        <h2 className="line-anime">Customer Details</h2>
                                    </div>
                                    {flash?.success?.message && (
                                        <p className="mb-20">{flash.success.message}</p>
                                    )}
                                    <div className="row">
                                        <div className="col-md-6 col-12">
                                            <div className="form-group">
                                                <div className="field-inner">
                                                    <label htmlFor="name">Name</label>
                                                    <input id="name" className="form-control" name="name" type="text" placeholder="Ex. Name" autoComplete="name" required value={data.name} onChange={(event) => setData('name', event.target.value)} />
                                                    {errors.name && <span className="error">{errors.name}</span>}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6 col-12">
                                            <div className="form-group">
                                                <div className="field-inner">
                                                    <label htmlFor="email">Email</label>
                                                    <input className="form-control" id="email" name="email" type="email" placeholder="Ex. info@example.com" autoComplete="email" required value={data.email} onChange={(event) => setData('email', event.target.value)} />
                                                    {errors.email && <span className="error">{errors.email}</span>}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6 col-12">
                                            <div className="form-group">
                                                <div className="field-inner">
                                                    <label htmlFor="phone">Phone Number</label>
                                                    <input className="form-control" id="phone" name="phone" type="text" placeholder="Ex. +255 737 562 788" autoComplete="tel" 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-md-6 col-12">
                                            <div className="form-group">
                                                <div className="field-inner">
                                                    <label htmlFor="selectroom">Select Room</label>
                                                    <select className="form-select" id="selectroom" aria-label="Select Room" required value={data.room} onChange={(event) => setData('room', event.target.value)}>
                                                        <option value="">Select Room</option>
                                                        {rooms.map((room) => (
                                                            <option key={room.slug} value={room.slug}>
                                                                {room.name}
                                                            </option>
                                                        ))}
                                                    </select>
                                                    {errors.room && <span className="error">{errors.room}</span>}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-12">
                                            <div className="form-group mb-0">
                                                <div className="field-inner">
                                                    <label htmlFor="message">Message</label>
                                                    <textarea id="message" className="form-control" name="message" placeholder="Ex. type message" autoComplete="off" value={data.message} onChange={(event) => setData('message', event.target.value)}></textarea>
                                                    {errors.message && <span className="error">{errors.message}</span>}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-4 col-md-12">
                                <div className="widget-sidebar sticky">
                                    <div className="widget widget-booking-selection">
                                        <div className="widget-title">
                                            <h3 className="line-anime">Booking Now</h3>
                                            <p>{quoteSummary(quote, quoteError, checking)}</p>
                                        </div>
                                        <div className="widget-content">
                                            <div className="widget-booking-list mb-30">
                                                <div className="widget-booking-item">
                                                    <label htmlFor="checkindate">Check In</label>
                                                    <input className="form-control" id="checkindate" name="check_in" type="date" autoComplete="off" required value={data.check_in} onChange={(event) => setData('check_in', event.target.value)} />
                                                    {errors.check_in && <span className="error">{errors.check_in}</span>}
                                                </div>
                                                <div className="widget-booking-item">
                                                    <label htmlFor="checkoutdate">Check Out</label>
                                                    <input className="form-control" id="checkoutdate" name="check_out" type="date" autoComplete="off" required value={data.check_out} onChange={(event) => setData('check_out', event.target.value)} />
                                                    {errors.check_out && <span className="error">{errors.check_out}</span>}
                                                </div>
                                                <div className="widget-booking-item">
                                                    <label htmlFor="selectadults">Adults</label>
                                                    <select className="form-select" id="selectadults" aria-label="Select Adults" value={data.adults} onChange={(event) => setData('adults', event.target.value)}>
                                                        {guestOptions.filter((value) => value !== '0').map((value) => (
                                                            <option key={value} value={value}>{value.padStart(2, '0')}</option>
                                                        ))}
                                                    </select>
                                                    {errors.adults && <span className="error">{errors.adults}</span>}
                                                </div>
                                                <div className="widget-booking-item">
                                                    <label htmlFor="selectchildren">Children</label>
                                                    <select className="form-select" id="selectchildren" aria-label="Select Children" value={data.children} onChange={(event) => setData('children', event.target.value)}>
                                                        {guestOptions.map((value) => (
                                                            <option key={value} value={value}>{value.padStart(2, '0')}</option>
                                                        ))}
                                                    </select>
                                                </div>
                                                <div className="widget-booking-item">
                                                    <label htmlFor="selectextrabed">Extra Bed</label>
                                                    <select className="form-select" id="selectextrabed" aria-label="Select Extra Bed" value={data.extra_beds} onChange={(event) => setData('extra_beds', event.target.value)}>
                                                        {guestOptions.map((value) => (
                                                            <option key={value} value={value}>{value.padStart(2, '0')}</option>
                                                        ))}
                                                    </select>
                                                </div>
                                            </div>
                                            <TurnstileField error={errors.turnstile_token} resetKey={widgetKey} onToken={(token) => setData('turnstile_token', token)} />
                                            <div className="widget-extra-services-button">
                                                <button type="submit" className="theme-button style-1 w-100" data-text="Book Now" disabled={processing || quote?.available === false}>
                                                    Book Now
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </>
    );
}

function quoteSummary(quote: ReturnType<typeof useStayQuote>['quote'], quoteError: string, checking: boolean): string {
    if (checking) {
        return 'Checking availability…';
    }

    if (quoteError !== '') {
        return quoteError;
    }

    if (quote === null) {
        return 'Choose a room and dates to see the stay total. A room number is assigned when you book.';
    }

    const usd = quote.totalUsd ? ` · ${quote.totalUsd}` : '';

    return `${quote.nights} night${quote.nights === 1 ? '' : 's'} · ${quote.total}${usd}. A free room number is assigned when you book.`;
}