import { Link, useForm, usePage } from '@inertiajs/react';
import { type SharedData } from '@/types';
import { type ContactPageProps } from '@frontend/types/pages/contact';
import { marketingRoute } from '@frontend/lib/marketing-route';
import { useEffect, useState, type FormEvent } from 'react';

type ContactMainSharedData = SharedData & {
    flash?: {
        success?: { message?: string };
        error?: { message?: string };
    };
};

declare global {
    interface Window {
        onContactTurnstileSuccess?: (token: string) => void;
    }
}

export function ContactMain({ hero, formIntro, submitLabel, card, mapEmbedSrc, turnstileSiteKey }: ContactPageProps) {
    const { flash } = usePage<ContactMainSharedData>().props;
    const [widgetKey, setWidgetKey] = useState(0);
    const [turnstileDismissed, setTurnstileDismissed] = useState(false);
    const [successDismissed, setSuccessDismissed] = useState(false);
    const [errorDismissed, setErrorDismissed] = useState(false);
    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        email: '',
        subject: '',
        phone: '',
        message: '',
        turnstile_token: '',
    });

    useEffect(() => {
        window.onContactTurnstileSuccess = (token: string) => {
            setData('turnstile_token', token);
        };

        return () => {
            delete window.onContactTurnstileSuccess;
        };
    }, [setData]);

    useEffect(() => {
        if (!turnstileSiteKey) {
            return;
        }

        const scriptId = 'contact-turnstile-script';
        if (document.getElementById(scriptId)) {
            return;
        }

        const script = document.createElement('script');
        script.id = scriptId;
        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }, [turnstileSiteKey]);

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

    return (
        <>
            <section
                className="page-title-section top-position1 bg-img cover-background secondary-overlay"
                data-overlay-dark="8"
                data-background={hero.backgroundData}
            >
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h1>{hero.heading}</h1>
                            <ul>
                                <li>
                                    <Link href={marketingRoute('home')}>Home</Link>
                                </li>
                                <li>{hero.breadcrumbCurrent}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div className="container">
                    <div className="contact-us rounded">
                        <div className="row mt-n2-9">
                            <div className="col-lg-7 mt-2-9">
                                <h2 className="text-secondary mb-4 h1">{formIntro}</h2>
                                <form
                                    className="contact quform"
                                    onSubmit={onSubmit}
                                    encType="multipart/form-data"
                                >
                                    {flash?.success?.message && !successDismissed && (
                                        <div className="alert alert-success mb-4">
                                            {flash.success.message}
                                            <button
                                                type="button"
                                                className="ms-3 border-0 bg-transparent"
                                                onClick={() => setSuccessDismissed(true)}
                                            >
                                                x
                                            </button>
                                        </div>
                                    )}
                                    {flash?.error?.message && !errorDismissed && (
                                        <div className="alert alert-danger mb-4">
                                            {flash.error.message}
                                            <button
                                                type="button"
                                                className="ms-3 border-0 bg-transparent"
                                                onClick={() => setErrorDismissed(true)}
                                            >
                                                x
                                            </button>
                                        </div>
                                    )}
                                    {errors.turnstile && !turnstileDismissed && (
                                        <div className="alert alert-warning mb-4">
                                            {errors.turnstile}
                                            <button
                                                type="button"
                                                className="ms-3 border-0 bg-transparent"
                                                onClick={() => setTurnstileDismissed(true)}
                                            >
                                                x
                                            </button>
                                        </div>
                                    )}
                                    <div className="quform-elements">
                                        <div className="row">
                                            <div className="col-md-6">
                                                <div className="quform-element form-group">
                                                    <label htmlFor="name">
                                                        Your Name{' '}
                                                        <span className="quform-required">*</span>
                                                    </label>
                                                    <div className="quform-input">
                                                        <input
                                                            className="form-control"
                                                            id="name"
                                                            type="text"
                                                            name="name"
                                                            placeholder="Your name here"
                                                            value={data.name}
                                                            onChange={(event) => setData('name', event.target.value)}
                                                        />
                                                    </div>
                                                    {errors.name && <small className="text-danger">{errors.name}</small>}
                                                </div>
                                            </div>

                                            <div className="col-md-6">
                                                <div className="quform-element form-group">
                                                    <label htmlFor="email">
                                                        Your Email{' '}
                                                        <span className="quform-required">*</span>
                                                    </label>
                                                    <div className="quform-input">
                                                        <input
                                                            className="form-control"
                                                            id="email"
                                                            type="email"
                                                            name="email"
                                                            placeholder="Your email here"
                                                            value={data.email}
                                                            onChange={(event) => setData('email', event.target.value)}
                                                        />
                                                    </div>
                                                    {errors.email && <small className="text-danger">{errors.email}</small>}
                                                </div>
                                            </div>

                                            <div className="col-md-6">
                                                <div className="quform-element form-group">
                                                    <label htmlFor="subject">
                                                        Your Subject
                                                    </label>
                                                    <div className="quform-input">
                                                        <input
                                                            className="form-control"
                                                            id="subject"
                                                            type="text"
                                                            name="subject"
                                                            placeholder="Your subject here"
                                                            value={data.subject}
                                                            onChange={(event) => setData('subject', event.target.value)}
                                                        />
                                                    </div>
                                                    {errors.subject && <small className="text-danger">{errors.subject}</small>}
                                                </div>
                                            </div>

                                            <div className="col-md-6">
                                                <div className="quform-element form-group">
                                                    <label htmlFor="phone">Contact Number</label>
                                                    <div className="quform-input">
                                                        <input
                                                            className="form-control"
                                                            id="phone"
                                                            type="text"
                                                            name="phone"
                                                            placeholder="Your phone here"
                                                            value={data.phone}
                                                            onChange={(event) => setData('phone', event.target.value)}
                                                        />
                                                    </div>
                                                    {errors.phone && <small className="text-danger">{errors.phone}</small>}
                                                </div>
                                            </div>

                                            <div className="col-md-12">
                                                <div className="quform-element form-group">
                                                    <label htmlFor="message">
                                                        Message{' '}
                                                        <span className="quform-required">*</span>
                                                    </label>
                                                    <div className="quform-input">
                                                        <textarea
                                                            className="form-control"
                                                            id="message"
                                                            name="message"
                                                            rows={3}
                                                            placeholder="Tell us a few words"
                                                            value={data.message}
                                                            onChange={(event) => setData('message', event.target.value)}
                                                        ></textarea>
                                                    </div>
                                                    {errors.message && <small className="text-danger">{errors.message}</small>}
                                                </div>
                                            </div>

                                            {turnstileSiteKey && (
                                                <div className="col-md-12">
                                                    <div className="quform-element">
                                                        <div className="form-group">
                                                            <div
                                                                key={widgetKey}
                                                                className="cf-turnstile"
                                                                data-sitekey={turnstileSiteKey}
                                                                data-theme="light"
                                                                data-callback="onContactTurnstileSuccess"
                                                            ></div>
                                                        </div>
                                                        {!data.turnstile_token && (
                                                            <small className="text-muted">Verification required before sending.</small>
                                                        )}
                                                        {errors.turnstile_token && (
                                                            <small className="text-danger">{errors.turnstile_token}</small>
                                                        )}
                                                        <input type="hidden" name="turnstile_token" value={data.turnstile_token} />
                                                    </div>
                                                </div>
                                            )}

                                            <div className="col-md-12">
                                                <div className="quform-submit-inner">
                                                    <button className="butn-style01 border-0" type="submit" disabled={processing}>
                                                        <span>{processing ? 'Sending...' : submitLabel}</span>
                                                    </button>
                                                </div>
                                                <div className="quform-loading-wrap text-start">
                                                    <span className="quform-loading"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            <div className="col-lg-5 mt-2-9">
                                <div className="contact-details">
                                    <div className="row">
                                        <div className="section-title mb-1-9">
                                            <h2 className="h4 text-white">{card.title}</h2>
                                        </div>

                                        <div className="col-lg-12">
                                            <div className="contact-info">
                                                <div className="contacts-icon">
                                                    <img
                                                        src={route('marketing.asset', { path: 'img/icons/icon-12.png' }, false)}
                                                        alt=""
                                                        title=""
                                                    />
                                                </div>
                                                <div className="contacts-title">
                                                    <h3 className="text-white font-weight-600 display-28">Send E-Mail</h3>
                                                    <h3 className="text-white font-weight-400 h6">{card.email || '—'}</h3>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="col-lg-12">
                                            <div className="contact-info">
                                                <div className="contacts-icon upper">
                                                    <img
                                                        src={route('marketing.asset', { path: 'img/icons/icon-13.png' }, false)}
                                                        alt=""
                                                        title=""
                                                    />
                                                </div>
                                                <div className="contacts-title">
                                                    <h3 className="text-white font-weight-600 display-28">Call Anytime</h3>
                                                    <h3 className="text-white font-weight-400 h6">{card.phone || '—'}</h3>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="col-lg-12">
                                            <div className="contact-info upper2">
                                                <div className="contacts-icon">
                                                    <img
                                                        src={route('marketing.asset', { path: 'img/icons/icon-14.png' }, false)}
                                                        alt=""
                                                        title=""
                                                    />
                                                </div>
                                                <div className="contacts-title">
                                                    <h3 className="text-white font-weight-600 display-28">Locations</h3>
                                                    <h3 className="text-white font-weight-400 h6">{card.location || '—'}</h3>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="follow-company-icon2">
                                            {card.socials.map((s) => (
                                                <a key={s.label} href={s.href} aria-label={s.label} target="_blank" rel="noopener noreferrer">
                                                    <i className={s.iconClass}></i>
                                                </a>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="p-0 bg-linear-gradient">
                <div className="container-fuild">
                    <iframe
                        title="Ufanisi Africa HQ"
                        className="contact-map"
                        id="gmap_canvas"
                        src={mapEmbedSrc}
                        loading="lazy"
                        referrerPolicy="no-referrer-when-downgrade"
                        allowFullScreen
                    ></iframe>
                </div>
            </section>
        </>
    );
}