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

export type RoomReviewItem = {
    name: string;
    message: string;
    date: string;
};

function Photo({ src, alt }: { src: string; alt: string }) {
    return (
        <div className="photo-gallery">
            <div className="photo-gallery-image">
                <figure className="image-anime">
                    <img src={src} alt={alt} />
                </figure>
            </div>
            <div className="photo-gallery-icon">
                <a className="photo-popup" href={src} aria-label="photo gallery"><i className="fa-solid fa-plus"></i></a>
            </div>
        </div>
    );
}

export function RoomGalleryAndReviews({ room, reviews }: { room: PublicRoom; reviews: RoomReviewItem[] }) {
    const { flash } = usePage<{ flash?: { success?: { message?: string } } }>().props;
    const reviewNotice = flash?.success?.message?.toLowerCase().includes('review') ? flash.success.message : null;
    const [widgetKey, setWidgetKey] = useState(0);
    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        email: '',
        message: '',
        turnstile_token: '',
    });
    const [lead, ...rest] = room.gallery;

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

    return (
        <>
            {lead && (
                <section className="room-single-gallery pt-100 md-pt-80 pb-70 md-pb-50">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Gallery</span>
                                    <h2>Room Gallery</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className={rest.length > 0 ? 'col-lg-6 col-md-6 col-sm-12' : 'col-lg-12'}>
                                <Photo src={lead} alt={room.name} />
                            </div>
                            {rest.length > 0 && (
                                <div className="col-lg-6 col-md-6 col-sm-12">
                                    <div className="row">
                                        {rest.map((src) => (
                                            <div className="col-lg-6 col-md-6 col-sm-6" key={src}>
                                                <Photo src={src} alt={room.name} />
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </section>
            )}

            <section className="room-single-review pt-100 md-pt-80 pb-100 md-pb-80">
                <div className="container">
                    <div className="row justify-content-between">
                        <div className="col-lg-4">
                            <div className="room-single-review-left-content sticky">
                                <div className="section-title mb-40 wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Review &amp; Rating</span>
                                    <h2>Guest reviews</h2>
                                    <p>{reviews.length === 0 ? 'Be the first to review this room.' : `${reviews.length} published review${reviews.length === 1 ? '' : 's'}.`}</p>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-7">
                            {reviews.length > 0 && (
                                <div className="comment-wapper wow fadeInUp" data-wow-delay=".3s">
                                    <h3 className="comments-title line-anime">Client&apos;s Review</h3>
                                    <ul className="comment-list">
                                        {reviews.map((review) => (
                                            <li key={`${review.name}-${review.date}`}>
                                                <div className="comment-list-item">
                                                    <div className="comment-content">
                                                        <div className="comment-meta">
                                                            <div className="comment-author">by <span className="comment-author-name">{review.name}</span></div>
                                                            <div className="comment-date">
                                                                <i className="fa-solid fa-clock"></i>
                                                                {review.date}
                                                            </div>
                                                        </div>
                                                        <p className="desc">{review.message}</p>
                                                    </div>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            )}
                            <div className="comment-respond wow fadeInUp" data-wow-delay=".4s">
                                <h3 className="comments-respond-title line-anime">Leave a Comment</h3>
                                {reviewNotice && <p>{reviewNotice}</p>}
                                <div className="default-form comment-respond-form">
                                    <form onSubmit={onSubmit}>
                                        <div className="row">
                                            <div className="col-lg-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="review-name">Name</label>
                                                        <input id="review-name" className="form-control" type="text" placeholder="Ex. Name" autoComplete="name" value={data.name} onChange={(event) => setData('name', event.target.value)} required />
                                                        {errors.name && <span className="error">{errors.name}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-lg-6">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="review-email">Email</label>
                                                        <input id="review-email" className="form-control" type="email" placeholder="Ex. info@example.com" autoComplete="email" value={data.email} onChange={(event) => setData('email', event.target.value)} required />
                                                        {errors.email && <span className="error">{errors.email}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-12">
                                                <div className="form-group">
                                                    <div className="field-inner">
                                                        <label htmlFor="review-message">Message</label>
                                                        <textarea id="review-message" className="form-control" placeholder="Ex. type messege" value={data.message} onChange={(event) => setData('message', event.target.value)} required></textarea>
                                                        {errors.message && <span className="error">{errors.message}</span>}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-12">
                                                <TurnstileField error={errors.turnstile_token} resetKey={widgetKey} onToken={(token) => setData('turnstile_token', token)} />
                                            </div>
                                            <div className="col-12">
                                                <div className="availability-btn-wapper">
                                                    <button type="submit" className="theme-button style-1" data-text="Write Review Here" disabled={processing}>
                                                        Write Review Here
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}