"use client";

import { FormEvent, useState } from "react";
import {
    sendNewsletterSubscription,
    isValidEmail,
    type NewsletterFormData,
} from "@/lib/emailjs";

export default function NewsletterHero() {
    const [formData, setFormData] = useState<NewsletterFormData>({
        name: "",
        email: "",
    });
    const [loading, setLoading] = useState(false);
    const [status, setStatus] = useState<{
        type: "success" | "error";
        message: string;
    } | null>(null);

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        setStatus(null);

        if (!formData.email.trim() || !isValidEmail(formData.email)) {
            setStatus({
                type: "error",
                message: "Please enter a valid email address.",
            });
            return;
        }

        setLoading(true);
        try {
            await sendNewsletterSubscription(formData);
            setStatus({
                type: "success",
                message: "Successfully subscribed to the newsletter.",
            });
            setFormData({ name: "", email: "" });
        } catch {
            setStatus({
                type: "error",
                message: "Something went wrong. Please try again later.",
            });
        } finally {
            setLoading(false);
        }
    };

    return (
        <main className="section-dark relative flex items-center justify-center py-16 lg:py-24 px-4 sm:px-6 lg:px-8 overflow-hidden min-h-[90vh]">
            <div className="glow-orb w-[800px] h-[800px] top-0 left-0 -translate-x-1/3 -translate-y-1/3 opacity-30" />

            {/* Abstract Background Pattern */}
            <div className="absolute inset-0 z-0 pointer-events-none opacity-40">
                <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-white/5 to-transparent rounded-bl-full" />
                <div className="absolute bottom-0 left-0 w-1/4 h-1/4 bg-gradient-to-tr from-white/5 to-transparent rounded-tr-full" />
            </div>

            <div className="relative z-10 w-full max-w-[1200px] mx-auto gsap-stagger">
                <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                    {/* Left Column: Content */}
                    <div className="flex flex-col gap-6 lg:pr-8">
                        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 w-fit">
                            <span className="relative flex h-2 w-2">
                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
                                <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
                            </span>
                            <span className="text-xs font-semibold text-primary uppercase tracking-wider">
                                Now Trending
                            </span>
                        </div>
                        <h1 className="text-4xl sm:text-5xl lg:text-7xl font-black text-light-surface leading-[1.1] tracking-tight">
                            Stay Ahead of the{" "}
                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-light relative inline-block drop-shadow-sm">
                                Tech Curve
                                <svg
                                    className="absolute w-full h-3 -bottom-1 left-0 text-primary opacity-30"
                                    fill="none"
                                    viewBox="0 0 200 9"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M2.00025 6.99999C25.3336 2.66666 87.0003 -3.50002 198.001 2.49999"
                                        stroke="currentColor"
                                        strokeWidth="3"
                                    />
                                </svg>
                            </span>
                        </h1>
                        <p className="text-lg text-text-light-muted leading-relaxed max-w-lg">
                            Join the Aasi Tech insider list for exclusive tech trends,
                            in-depth case studies, and agency updates delivered straight to
                            your inbox.
                        </p>

                        {/* Checklist */}
                        <div className="space-y-5 pt-4">
                            <div className="flex items-start gap-4">
                                <span className="bg-primary/20 text-primary p-1.5 rounded-full shrink-0 flex items-center justify-center border border-primary/30">
                                    <span className="material-symbols-outlined text-[18px]">
                                        check
                                    </span>
                                </span>
                                <div>
                                    <h3 className="font-bold text-light-surface text-lg">
                                        Weekly Tech Trends Analysis
                                    </h3>
                                    <p className="text-sm text-text-light-muted">
                                        Curated insights on AI, Cloud, and Security.
                                    </p>
                                </div>
                            </div>
                            <div className="flex items-start gap-4">
                                <span className="bg-primary/20 text-primary p-1.5 rounded-full shrink-0 flex items-center justify-center border border-primary/30">
                                    <span className="material-symbols-outlined text-[18px]">
                                        check
                                    </span>
                                </span>
                                <div>
                                    <h3 className="font-bold text-light-surface text-lg">
                                        Exclusive Case Studies
                                    </h3>
                                    <p className="text-sm text-text-light-muted">
                                        Real-world examples of digital transformation.
                                    </p>
                                </div>
                            </div>
                            <div className="flex items-start gap-4">
                                <span className="bg-primary/20 text-primary p-1.5 rounded-full shrink-0 flex items-center justify-center border border-primary/30">
                                    <span className="material-symbols-outlined text-[18px]">
                                        check
                                    </span>
                                </span>
                                <div>
                                    <h3 className="font-bold text-light-surface text-lg">
                                        Agency Updates &amp; Insights
                                    </h3>
                                    <p className="text-sm text-text-light-muted">
                                        Be the first to know about our new services.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Right Column: Subscription Card */}
                    <div className="w-full max-w-md mx-auto lg:ml-auto">
                        <div className="card-glass-dark rounded-3xl p-8 shadow-glow-green relative overflow-hidden group/card bg-[#0F172A]/80 backdrop-blur-xl border border-primary/20">
                            {/* Decorative top accent */}
                            <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-primary to-primary-light" />

                            <div className="text-center mb-6 pt-2">
                                <h2 className="text-2xl font-bold text-light-surface mb-2">
                                    Subscribe to Newsletter
                                </h2>
                                <p className="text-text-light-muted text-sm">
                                    Get the latest industry news directly to your inbox.
                                </p>
                            </div>

                            <form className="space-y-5" onSubmit={handleSubmit}>
                                <div>
                                    <label
                                        className="block text-sm font-medium text-text-light-muted mb-1.5 pl-1"
                                        htmlFor="newsletter-name"
                                    >
                                        Full Name
                                    </label>
                                    <div className="relative">
                                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                            <span className="material-symbols-outlined text-primary-light text-xl">
                                                person
                                            </span>
                                        </div>
                                        <input
                                            className="input-focus-glow block w-full pl-11 pr-4 py-3.5 border-white/10 rounded-xl text-light-surface bg-white/5 placeholder:text-gray-500 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all outline-none"
                                            id="newsletter-name"
                                            placeholder="John Doe"
                                            type="text"
                                            value={formData.name}
                                            onChange={(e) =>
                                                setFormData((prev) => ({
                                                    ...prev,
                                                    name: e.target.value,
                                                }))
                                            }
                                            disabled={loading}
                                        />
                                    </div>
                                </div>
                                <div>
                                    <label
                                        className="block text-sm font-medium text-text-light-muted mb-1.5 pl-1"
                                        htmlFor="newsletter-email"
                                    >
                                        Email Address
                                    </label>
                                    <div className="relative">
                                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                            <span className="material-symbols-outlined text-primary-light text-xl">
                                                mail
                                            </span>
                                        </div>
                                        <input
                                            className="input-focus-glow block w-full pl-11 pr-4 py-3.5 border-white/10 rounded-xl text-light-surface bg-white/5 placeholder:text-gray-500 focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all outline-none"
                                            id="newsletter-email"
                                            placeholder="john@example.com"
                                            type="email"
                                            value={formData.email}
                                            onChange={(e) =>
                                                setFormData((prev) => ({
                                                    ...prev,
                                                    email: e.target.value,
                                                }))
                                            }
                                            disabled={loading}
                                        />
                                    </div>
                                </div>

                                {/* Status Message */}
                                {status && (
                                    <div
                                        className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all ${status.type === "success"
                                                ? "bg-green-500/10 text-green-400 border border-green-500/20"
                                                : "bg-red-500/10 text-red-400 border border-red-500/20"
                                            }`}
                                    >
                                        <span className="material-symbols-outlined text-lg">
                                            {status.type === "success"
                                                ? "check_circle"
                                                : "error"}
                                        </span>
                                        {status.message}
                                    </div>
                                )}

                                <button
                                    className="w-full flex items-center justify-center gap-2 btn-primary btn-submit-pulse py-4 mt-6 isolate relative overflow-hidden group disabled:opacity-60 disabled:cursor-not-allowed"
                                    type="submit"
                                    disabled={loading}
                                >
                                    <span className="relative z-10 font-bold text-base flex items-center gap-2 w-full h-full justify-center">
                                        {loading ? (
                                            <>
                                                <svg
                                                    className="animate-spin h-5 w-5"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                >
                                                    <circle
                                                        className="opacity-25"
                                                        cx="12"
                                                        cy="12"
                                                        r="10"
                                                        stroke="currentColor"
                                                        strokeWidth="4"
                                                    />
                                                    <path
                                                        className="opacity-75"
                                                        fill="currentColor"
                                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                                                    />
                                                </svg>
                                                Subscribing...
                                            </>
                                        ) : (
                                            <>
                                                Subscribe Now
                                                <span className="material-symbols-outlined text-lg">
                                                    arrow_forward
                                                </span>
                                            </>
                                        )}
                                    </span>
                                    <div className="absolute inset-0 bg-gradient-to-r from-primary-light to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                                </button>
                            </form>

                            {/* Trust Badge */}
                            <div className="mt-6 flex items-center justify-center gap-2 text-xs text-text-light-muted bg-white/5 py-3 rounded-xl border border-white/5">
                                <span className="material-symbols-outlined text-primary text-base">
                                    lock
                                </span>
                                <span>No-Spam Guarantee. Unsubscribe anytime.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}
