"use client"

import React, { useEffect, useState } from "react"
import { useLanguage } from "@/lib/language-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card } from "@/components/ui/card"
import { Send, CheckCircle2, AlertCircle } from "lucide-react"

declare global {
    interface Window {
        grecaptcha?: {
            ready: (cb: () => void) => void
            execute: (siteKey: string, options: { action: string }) => Promise<string>
        }
    }
}

export default function ContactForm() {
    const { t, language } = useLanguage()
    const siteKey =
        process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ||
        "6LfqD1osAAAAANd6P-3qin0cRdFQSGX92F02A3dE"
    const recaptchaAction = "contact_form"
    const defaultService = t.contactPage.form.serviceOptions.airport
    const [recaptchaReady, setRecaptchaReady] = useState(false)

    const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        phone: "",
        service: defaultService,
        message: "",
        consent: false
    })

    useEffect(() => {
        if (!siteKey) return
        const scriptId = "recaptcha-v3"
        const onReady = () => {
            window.grecaptcha?.ready(() => setRecaptchaReady(true))
        }

        if (document.getElementById(scriptId)) {
            onReady()
        } else {
            const script = document.createElement("script")
            script.id = scriptId
            script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`
            script.async = true
            script.defer = true
            script.onload = onReady
            script.onerror = () => setRecaptchaReady(false)
            document.head.appendChild(script)
        }

        // Show captcha badge when on contact page
        document.body.classList.add("show-captcha")

        return () => {
            // Hide captcha badge when leaving contact page
            document.body.classList.remove("show-captcha")
        }
    }, [siteKey])

    useEffect(() => {
        setFormData(prev => (
            prev.service === defaultService
                ? prev
                : { ...prev, service: defaultService }
        ))
    }, [defaultService])

    const waitForRecaptcha = (timeoutMs = 4000) =>
        new Promise<void>((resolve, reject) => {
            const started = Date.now()
            const tick = () => {
                if (window.grecaptcha) {
                    window.grecaptcha.ready(() => resolve())
                    return
                }
                if (Date.now() - started >= timeoutMs) {
                    reject(new Error("reCAPTCHA not ready"))
                    return
                }
                setTimeout(tick, 150)
            }
            tick()
        })

    const getRecaptchaToken = async () => {
        if (!window.grecaptcha) {
            throw new Error("reCAPTCHA not ready")
        }
        return new Promise<string>((resolve, reject) => {
            window.grecaptcha?.ready(() => {
                window.grecaptcha
                    ?.execute(siteKey, { action: recaptchaAction })
                    .then(resolve)
                    .catch(reject)
            })
        })
    }

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        const { name, value, type } = e.target as any
        setFormData(prev => ({
            ...prev,
            [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value
        }))
    }

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()

        if (!recaptchaReady) {
            try {
                await waitForRecaptcha()
                setRecaptchaReady(true)
            } catch {
                alert(t.contactPage.form.recaptchaNotReady)
                return
            }
        }

        if (!formData.consent) {
            alert(t.contactPage.form.consentRequired)
            return
        }

        setStatus("loading")

        try {
            // In a static export environment, this would hit a PHP script on the server
            // or an external API. Here we assume an API route for local testing.
            const recaptchaToken = await getRecaptchaToken()
            const response = await fetch("/contact.php", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    ...formData,
                    recaptchaToken,
                    recaptchaAction,
                    language,
                })
            })

            if (response.ok) {
                setStatus("success")
                setFormData({ name: "", email: "", phone: "", service: defaultService, message: "", consent: false })
            } else {
                setStatus("error")
            }
        } catch (err) {
            setStatus("error")
        }
    }

    if (status === "success") {
        return (
            <Card className="p-12 text-center rounded-[3rem] border-none shadow-2xl bg-white">
                <div className="bg-green-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-8">
                    <CheckCircle2 className="w-10 h-10 text-green-500" />
                </div>
                <h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">{t.contactPage.form.successTitle}</h3>
                <p className="text-slate-600 font-medium max-w-md mx-auto">
                    {t.contactPage.form.success}
                </p>
                <Button
                    onClick={() => setStatus("idle")}
                    variant="outline"
                    className="mt-8 rounded-full px-8"
                >
                    {t.contactPage.form.successAction}
                </Button>
            </Card>
        )
    }

    return (
        <Card className="rounded-[3rem] overflow-hidden border-none shadow-2xl bg-white">
            <form onSubmit={handleSubmit} className="p-8 md:p-12 space-y-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {/* Name */}
                    <div className="space-y-2">
                        <label htmlFor="name" className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.name}
                        </label>
                        <Input
                            id="name"
                            required
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            placeholder={t.contactPage.form.placeholders.name}
                            className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
                        />
                    </div>

                    {/* Email */}
                    <div className="space-y-2">
                        <label htmlFor="email" className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.email}
                        </label>
                        <Input
                            id="email"
                            required
                            type="email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            placeholder={t.contactPage.form.placeholders.email}
                            className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
                        />
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {/* Phone */}
                    <div className="space-y-2">
                        <label htmlFor="phone" className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.phone}
                        </label>
                        <Input
                            id="phone"
                            name="phone"
                            value={formData.phone}
                            onChange={handleChange}
                            placeholder={t.contactPage.form.placeholders.phone}
                            className="rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all"
                        />
                    </div>

                    {/* Service Type */}
                    <div className="space-y-2">
                        <label htmlFor="service" className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.service}
                        </label>
                        <select
                            id="service"
                            name="service"
                            value={formData.service}
                            onChange={handleChange}
                            className="w-full rounded-2xl h-14 bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all px-4 text-sm font-medium"
                        >
                            <option value={t.contactPage.form.serviceOptions.airport}>{t.contactPage.form.serviceOptions.airport}</option>
                            <option value={t.contactPage.form.serviceOptions.private}>{t.contactPage.form.serviceOptions.private}</option>
                            <option value={t.contactPage.form.serviceOptions.other}>{t.contactPage.form.serviceOptions.other}</option>
                        </select>
                    </div>
                </div>

                {/* Message */}
                <div className="space-y-2">
                    <label htmlFor="message" className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                        {t.contactPage.form.message}
                    </label>
                    <Textarea
                        id="message"
                        required
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        placeholder={t.contactPage.form.placeholders.message}
                        rows={5}
                        className="rounded-[2rem] bg-slate-50 border-slate-100 focus:border-primary focus:ring-primary transition-all p-6 min-h-[150px]"
                    />
                </div>

                {/* Consent */}
                <div className="flex items-start gap-3">
                    <input
                        id="consent"
                        required
                        type="checkbox"
                        name="consent"
                        checked={formData.consent}
                        onChange={handleChange}
                        className="mt-1 w-5 h-5 rounded-lg border-slate-200 text-primary focus:ring-primary cursor-pointer"
                    />
                    <label htmlFor="consent" className="text-sm text-slate-500 leading-relaxed font-medium cursor-pointer">
                        {t.contactPage.form.consent}
                    </label>
                </div>

                {/* reCaptcha */}
                <div className="pt-4 flex justify-center md:justify-start">
                    <span className="text-xs text-slate-400">
                        {t.contactPage.form.recaptchaNotice}
                    </span>
                </div>

                {status === "error" && (
                    <div className="bg-red-50 text-red-600 p-4 rounded-2xl flex items-center gap-3 text-sm font-bold">
                        <AlertCircle className="w-5 h-5" />
                        {t.contactPage.form.error}
                    </div>
                )}

                <Button
                    disabled={status === "loading"}
                    type="submit"
                    size="lg"
                    className="w-full md:w-fit rounded-full px-12 h-16 bg-primary hover:bg-primary/90 text-sm font-bold uppercase tracking-widest transition-all shadow-xl disabled:opacity-50"
                >
                    {status === "loading" ? (
                        <span className="flex items-center gap-2">
                            <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                            {t.contactPage.form.submitting}
                        </span>
                    ) : (
                        <span className="flex items-center gap-2">
                            <Send className="w-4 h-4" />
                            {t.contactPage.form.button}
                        </span>
                    )}
                </Button>
            </form>
        </Card>
    )
}