"use client"

import React, { useState, useRef } 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 { cn } from "@/lib/utils"
import ReCAPTCHA from "react-google-recaptcha"
import { Send, CheckCircle2, AlertCircle } from "lucide-react"

export default function ContactForm() {
    const { t } = useLanguage()
    const recaptchaRef = useRef<ReCAPTCHA>(null)

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

    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()

        const recaptchaValue = recaptchaRef.current?.getValue()
        if (!recaptchaValue) {
            alert("Please complete the reCaptcha")
            return
        }

        if (!formData.consent) {
            alert("Please accept the privacy policy")
            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 response = await fetch("/api/contact", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ ...formData, recaptcha: recaptchaValue })
            })

            if (response.ok) {
                setStatus("success")
                setFormData({ name: "", email: "", phone: "", service: "REPTÉRI TRANSZFER", message: "", consent: false })
                recaptchaRef.current?.reset()
            } 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">Köszönjük!</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"
                >
                    Új üzenet küldése
                </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 className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.name}
                        </label>
                        <Input
                            required
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            placeholder="Pl. Kovács János"
                            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 className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.email}
                        </label>
                        <Input
                            required
                            type="email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            placeholder="janos@pelda.hu"
                            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 className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.phone}
                        </label>
                        <Input
                            name="phone"
                            value={formData.phone}
                            onChange={handleChange}
                            placeholder="+36 30 123 4567"
                            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 className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                            {t.contactPage.form.service}
                        </label>
                        <select
                            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="REPTÉRI TRANSZFER">{t.contactPage.form.serviceOptions.airport}</option>
                            <option value="PRIVÁT TRANSZFER">{t.contactPage.form.serviceOptions.private}</option>
                            <option value="EGYÉB SZEMÉLYSZÁLLÍTÁS">{t.contactPage.form.serviceOptions.other}</option>
                        </select>
                    </div>
                </div>

                {/* Message */}
                <div className="space-y-2">
                    <label className="text-xs font-bold uppercase tracking-widest text-slate-400 ml-1">
                        {t.contactPage.form.message}
                    </label>
                    <Textarea
                        required
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        placeholder="Miben segíthetünk Önnek?"
                        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
                        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"
                    />
                    <p className="text-sm text-slate-500 leading-relaxed font-medium">
                        {t.contactPage.form.consent}
                    </p>
                </div>

                {/* reCaptcha */}
                <div className="pt-4 flex justify-center md:justify-start">
                    <ReCAPTCHA
                        ref={recaptchaRef}
                        sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" // Place-holder test key
                    />
                </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" />
                            Küldés...
                        </span>
                    ) : (
                        <span className="flex items-center gap-2">
                            <Send className="w-4 h-4" />
                            {t.contactPage.form.button}
                        </span>
                    )}
                </Button>
            </form>
        </Card>
    )
}