"use client";

import { useTheme } from "next-themes";
import { useState, useEffect } from "react";
import { Mail, CheckCircle2, Loader2, Send } from "lucide-react";

export default function Newsletter() {
    const [email, setEmail] = useState("");
    const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
    const { resolvedTheme } = useTheme();
    const [mounted, setMounted] = useState(false);

    useEffect(() => setMounted(true), []);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setStatus("loading");

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

            if (res.ok) {
                setStatus("success");
                setEmail("");
            } else {
                setStatus("error");
            }
        } catch {
            setStatus("error");
        }
    };

    if (!mounted) return null;

    return (
        <section style={{
            padding: "5rem 0",
            background: resolvedTheme === "dark" ? "rgba(37,99,235,0.05)" : "#f8fafc",
            borderTop: "1px solid var(--border)",
            borderBottom: "1px solid var(--border)"
        }}>
            <div className="container" style={{ maxWidth: "50rem", textAlign: "center" }}>
                <div style={{
                    width: 54, height: 54,
                    background: "rgba(37,99,235,0.1)",
                    color: "var(--primary)",
                    borderRadius: 14,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    margin: "0 auto 1.5rem"
                }}>
                    <Mail size={24} />
                </div>

                <h2 style={{ fontSize: "2rem", fontWeight: 900, marginBottom: "1rem" }}>Restez informé</h2>
                <p style={{ color: "var(--muted-foreground)", fontSize: "1.1rem", marginBottom: "2.5rem" }}>
                    Inscrivez-vous à la newsletter pour recevoir les dernières actualités sur l'IoT et les projets de Meta Lab Africa.
                </p>

                {status === "success" ? (
                    <div style={{
                        padding: "2rem",
                        background: "rgba(34,197,94,0.1)",
                        borderRadius: "1.5rem",
                        color: "#16a34a",
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        gap: "0.5rem"
                    }}>
                        <CheckCircle2 size={32} />
                        <p style={{ fontWeight: 800 }}>Inscription réussie ! Merci de votre intérêt.</p>
                    </div>
                ) : (
                    <form onSubmit={handleSubmit} style={{
                        display: "flex",
                        gap: "0.75rem",
                        flexWrap: "wrap",
                        justifyContent: "center"
                    }}>
                        <input
                            type="email"
                            required
                            placeholder="votre@email.com"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            style={{
                                flex: "1",
                                minWidth: "280px",
                                padding: "1rem 1.5rem",
                                borderRadius: "1rem",
                                border: "1.5px solid var(--border)",
                                background: "var(--background)",
                                outline: "none",
                                fontSize: "1rem",
                                fontWeight: 500
                            }}
                        />
                        <button
                            type="submit"
                            disabled={status === "loading"}
                            className="btn btn-primary"
                            style={{
                                padding: "0 2rem",
                                height: "3.5rem"
                            }}
                        >
                            {status === "loading" ? <Loader2 className="animate-spin" /> : <><Send size={18} /> S'abonner</>}
                        </button>
                    </form>
                )}
                <p style={{ fontSize: "0.8rem", color: "var(--muted-foreground)", marginTop: "1.5rem" }}>
                    Pas de spam. Vous pouvez vous désinscrire à tout moment.
                </p>
            </div>
        </section>
    );
}