'use client';

import React, {useState} from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";
import HCaptcha from "@hcaptcha/react-hcaptcha";

const ContactFormSection = () => {
    const colors = useThemeColors();

    const [form, setForm] = useState({
        name: "",
        email: "",
        company: "",
        phone: "",
        website: "",
        message: "",
    });

    const [captchaToken, setCaptchaToken] = useState("");
    const [submitted, setSubmitted] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const isDev = process.env.NODE_ENV === "development";
    const hCaptchaSiteKey = isDev
        ? "10000000-ffff-ffff-ffff-000000000001" // hCaptcha test sitekey
        : "ES_ff59a664dc764f92870bf2c7b4eab7c5";

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        setForm({...form, [e.target.name]: e.target.value});
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setError("");

        if (!captchaToken) {
            setError("Bitte löse das CAPTCHA, um fortzufahren.");
            setLoading(false);
            return;
        }

        try {
            const res = await fetch("/api/contact", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({...form, captcha: captchaToken}),
            });

            if (res.ok) {
                setSubmitted(true);
                setForm({name: "", email: "", company: "", phone: "", website: "", message: ""});
            } else {
                const resJson = await res.json();
                setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
            }
        } catch (err) {
            setError("Serverfehler. Bitte versuche es später erneut.");
        }

        setLoading(false);
    };

    return (
        <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
            <motion.h2
                className="text-2xl sm:text-3xl font-bold mb-2"
                style={{color: colors.primaryText}}
                initial={{opacity: 0, y: 20}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.5}}
            >
                Schreib uns eine Nachricht
            </motion.h2>

            <motion.p
                className="text-sm mb-8 max-w-xl"
                style={{color: colors.secondaryText}}
                initial={{opacity: 0, y: 10}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.5, delay: 0.2}}
            >
                Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
            </motion.p>

            {submitted ? (
                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
                    gesendet!</div>
            ) : (
                <form className="space-y-6" onSubmit={handleSubmit}>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {[
                            {
                                label: "Dein Name *",
                                name: "name",
                                type: "text",
                                required: true,
                                placeholder: "Max Mustermann"
                            },
                            {
                                label: "Deine E-Mail *",
                                name: "email",
                                type: "email",
                                required: true,
                                placeholder: "max@example.com"
                            },
                            {
                                label: "Firmenname (optional)",
                                name: "company",
                                type: "text",
                                required: false,
                                placeholder: "Mustermann GmbH"
                            },
                            {
                                label: "Telefonnummer (optional)",
                                name: "phone",
                                type: "tel",
                                required: false,
                                placeholder: "+49 123 456789"
                            },
                            {
                                label: "Webseite (optional)",
                                name: "website",
                                type: "url",
                                required: false,
                                placeholder: "https://..."
                            },
                        ].map((field, index) => (
                            <motion.div
                                key={field.name}
                                initial={{opacity: 0, y: 10}}
                                whileInView={{opacity: 1, y: 0}}
                                viewport={{once: true}}
                                transition={{duration: 0.5, delay: index * 0.1}}
                            >
                                <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                                    {field.label}
                                </label>
                                <input
                                    type={field.type}
                                    name={field.name}
                                    value={form[field.name as keyof typeof form]}
                                    onChange={handleChange}
                                    required={field.required}
                                    placeholder={field.placeholder}
                                    className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                                    style={{
                                        backgroundColor: colors.inputFieldBg,
                                        border: `1px solid ${colors.inputBorder}`,
                                        color: colors.primaryText,
                                    }}
                                />
                            </motion.div>
                        ))}
                    </div>

                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.6}}
                    >
                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                            Deine Nachricht *
                        </label>
                        <textarea
                            name="message"
                            rows={4}
                            required
                            value={form.message}
                            onChange={handleChange}
                            placeholder="Worum geht es?"
                            className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
                            style={{
                                backgroundColor: colors.inputFieldBg,
                                border: `1px solid ${colors.inputBorder}`,
                                color: colors.primaryText,
                            }}
                        />
                    </motion.div>

                    <motion.div
                        className="pt-2"
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.7}}
                    >
                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>
                    </motion.div>

                    {error && (
                        <div className="text-red-600 font-medium pt-2">
                            ❌ {error}
                        </div>
                    )}

                    <motion.div
                        className="pt-4 flex justify-end"
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.8}}
                    >
                        <button
                            type="submit"
                            disabled={loading}
                            className="px-6 py-3 bg-blue-600 text-white text-sm sm:text-base font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-all disabled:opacity-50"
                        >
                            {loading ? "Sende..." : "📩 Nachricht senden"}
                        </button>
                    </motion.div>
                </form>
            )}
        </div>
    );
};

export default ContactFormSection;
