"use client";

import { useState } from "react";
import { Send } from "lucide-react";
import { supabase } from "@/lib/supabase";

export function NewsletterSection() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!email) return;
    setStatus("loading");

    const { error } = await supabase
      .from("newsletter_subscribers")
      .insert({ email, gdpr_consent: true });

    if (error) {
      setStatus(error.code === "23505" ? "success" : "error");
    } else {
      setStatus("success");
      setEmail("");
    }
  }

  return (
    <section className="py-20 bg-brand-cream">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 className="font-serif text-3xl md:text-4xl text-brand-black mb-3">
          Restez inspirée
        </h2>
        <p className="text-brand-charcoal/70 max-w-md mx-auto mb-8">
          Inscrivez-vous pour recevoir nos nouveautés et offres exclusives en
          avant-première.
        </p>
        <form
          onSubmit={handleSubmit}
          className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
        >
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Votre adresse email"
            aria-label="Votre adresse e-mail"
            autoComplete="email"
            required
            className="flex-1 px-4 py-3 bg-white border border-brand-sand rounded text-sm focus:outline-hidden focus:ring-2 focus:ring-brand-gold/30 focus:border-brand-gold"
          />
          <button
            type="submit"
            disabled={status === "loading"}
            className="px-6 py-3 gold-gradient text-white font-medium text-sm rounded flex items-center justify-center gap-2 hover:opacity-90 transition-opacity disabled:opacity-50"
          >
            <Send size={14} />
            S&apos;inscrire
          </button>
        </form>
        {status === "success" && (
          <p className="text-sm text-green-700 mt-3">
            Merci ! Vous êtes désormais inscrite.
          </p>
        )}
        {status === "error" && (
          <p className="text-sm text-red-600 mt-3">
            Une erreur est survenue. Veuillez réessayer.
          </p>
        )}
        <p className="text-xs text-brand-charcoal/50 mt-4">
          En vous inscrivant, vous acceptez de recevoir nos communications. Désinscription possible à tout moment.
        </p>
      </div>
    </section>
  );
}