"use client";

import Image from "next/image";
import { FormEvent, useState } from "react";
import {
    sendContactEmail,
    isValidEmail,
    type ContactFormData,
} from "@/lib/emailjs";

export default function Contact() {
    const [formData, setFormData] = useState<ContactFormData>({
        firstName: "",
        lastName: "",
        email: "",
        subject: "General Inquiry",
        message: "",
    });
    const [loading, setLoading] = useState(false);
    const [status, setStatus] = useState<{
        type: "success" | "error";
        message: string;
    } | null>(null);

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

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

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

        setLoading(true);
        try {
            await sendContactEmail(formData);
            setStatus({
                type: "success",
                message: "Thank you! Your message has been sent successfully.",
            });
            setFormData({
                firstName: "",
                lastName: "",
                email: "",
                subject: "General Inquiry",
                message: "",
            });
        } catch {
            setStatus({
                type: "error",
                message: "Something went wrong. Please try again later.",
            });
        } finally {
            setLoading(false);
        }
    };

    return (
        <section
            className="py-24 section-dark-surface relative overflow-hidden"
            id="contact"
        >
            {/* Subtle glow */}
            <div className="glow-orb w-64 h-64 bottom-0 right-0 opacity-20" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative">
                <div className="card-glass-dark rounded-3xl overflow-hidden flex flex-col lg:flex-row">
                    <div className="lg:w-2/5 bg-primary/10 p-12 flex flex-col justify-between">
                        <div>
                            <h2 className="text-3xl font-bold text-text-light mb-6">
                                Get in touch
                            </h2>
                            <p className="text-text-light-muted mb-10">
                                Ready to start your next project? Fill out the form or contact
                                us directly.
                            </p>
                            <div className="space-y-6">
                                <div className="flex items-start gap-4">
                                    <div className="size-10 rounded-full bg-gradient-to-r from-primary to-primary-light flex items-center justify-center text-white shrink-0">
                                        <span className="material-symbols-outlined text-xl">
                                            location_on
                                        </span>
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-text-light">Office</h4>
                                        <p className="text-sm text-text-light-muted">
                                            Office no 381, Lower Ground Floor
                                            <br />
                                            D-Block, Crown Tower, Street 91, G-11/3
                                            <br />
                                            Islamabad, Pakistan
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-4">
                                    <div className="size-10 rounded-full bg-gradient-to-r from-primary to-primary-light flex items-center justify-center text-white shrink-0">
                                        <span className="material-symbols-outlined text-xl">
                                            mail
                                        </span>
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-text-light">Email</h4>
                                        <p className="text-sm text-text-light-muted">
                                            imran.aasii@gmail.com
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-start gap-4">
                                    <div className="size-10 rounded-full bg-gradient-to-r from-primary to-primary-light flex items-center justify-center text-white shrink-0">
                                        <span className="material-symbols-outlined text-xl">
                                            call
                                        </span>
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-text-light">Phone</h4>
                                        <p className="text-sm text-text-light-muted">
                                            +92 312-5259099
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="mt-12">
                            <div className="h-40 w-full rounded-xl bg-dark-card relative overflow-hidden opacity-80">
                                <Image
                                    src="/images/portfolio/data-analytics.png"
                                    alt="Aasi Tech Contact Illustration"
                                    fill
                                    sizes="(max-width: 1024px) 100vw, 40vw"
                                    className="object-cover"
                                    loading="lazy"
                                />
                            </div>
                        </div>
                    </div>
                    <div className="lg:w-3/5 p-12">
                        <form className="space-y-6" onSubmit={handleSubmit}>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div className="space-y-2">
                                    <label
                                        className="text-sm font-semibold text-text-light"
                                        htmlFor="home-first-name"
                                    >
                                        First Name
                                    </label>
                                    <input
                                        className="w-full px-4 py-3 rounded-lg border border-border-dark bg-dark-card/50 text-text-light placeholder-text-light-muted/50 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
                                        id="home-first-name"
                                        name="firstName"
                                        placeholder="John"
                                        type="text"
                                        value={formData.firstName}
                                        onChange={handleChange}
                                        disabled={loading}
                                    />
                                </div>
                                <div className="space-y-2">
                                    <label
                                        className="text-sm font-semibold text-text-light"
                                        htmlFor="home-last-name"
                                    >
                                        Last Name
                                    </label>
                                    <input
                                        className="w-full px-4 py-3 rounded-lg border border-border-dark bg-dark-card/50 text-text-light placeholder-text-light-muted/50 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
                                        id="home-last-name"
                                        name="lastName"
                                        placeholder="Doe"
                                        type="text"
                                        value={formData.lastName}
                                        onChange={handleChange}
                                        disabled={loading}
                                    />
                                </div>
                            </div>
                            <div className="space-y-2">
                                <label
                                    className="text-sm font-semibold text-text-light"
                                    htmlFor="home-email"
                                >
                                    Email Address
                                </label>
                                <input
                                    className="w-full px-4 py-3 rounded-lg border border-border-dark bg-dark-card/50 text-text-light placeholder-text-light-muted/50 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
                                    id="home-email"
                                    name="email"
                                    placeholder="john@example.com"
                                    type="email"
                                    value={formData.email}
                                    onChange={handleChange}
                                    disabled={loading}
                                />
                            </div>
                            <div className="space-y-2">
                                <label
                                    className="text-sm font-semibold text-text-light"
                                    htmlFor="home-subject"
                                >
                                    Subject
                                </label>
                                <select
                                    className="w-full px-4 py-3 rounded-lg border border-border-dark bg-dark-card/50 text-text-light focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
                                    id="home-subject"
                                    name="subject"
                                    value={formData.subject}
                                    onChange={handleChange}
                                    disabled={loading}
                                >
                                    <option>General Inquiry</option>
                                    <option>Start a Project</option>
                                </select>
                            </div>
                            <div className="space-y-2">
                                <label
                                    className="text-sm font-semibold text-text-light"
                                    htmlFor="home-message"
                                >
                                    Message
                                </label>
                                <textarea
                                    className="w-full px-4 py-3 rounded-lg border border-border-dark bg-dark-card/50 text-text-light placeholder-text-light-muted/50 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
                                    id="home-message"
                                    name="message"
                                    placeholder="How can we help you?"
                                    rows={4}
                                    value={formData.message}
                                    onChange={handleChange}
                                    disabled={loading}
                                />
                            </div>

                            {/* Status Message */}
                            {status && (
                                <div
                                    className={`flex items-center gap-2 px-4 py-3 rounded-lg text-sm font-medium transition-all animate-in fade-in duration-300 ${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 py-3.5 bg-gradient-to-r from-primary to-primary-light text-white font-bold rounded-lg hover:shadow-lg hover:shadow-green-500/30 transition-all duration-300 relative isolate overflow-hidden group disabled:opacity-60 disabled:cursor-not-allowed"
                                type="submit"
                                disabled={loading}
                            >
                                <span className="relative z-10 w-full h-full flex items-center justify-center gap-2">
                                    {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>
                                            Sending...
                                        </>
                                    ) : (
                                        "Send Message"
                                    )}
                                </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>
                    </div>
                </div>
            </div>
        </section>
    );
}
