"use client";

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

export default function ContactSplitLayout() {
    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="bg-light-bg py-12 px-4 md:px-8 lg:px-16">
            <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
                {/* Left Column: Contact Info */}
                <div className="flex flex-col gap-10 py-4">
                    <div className="gsap-fade-up">
                        <h2 className="text-3xl font-bold text-text-main mb-6">
                            Get in Touch
                        </h2>
                        <p className="text-text-muted mb-8 text-lg leading-relaxed">
                            We are here to answer any questions you may have about our
                            services. Reach out to us and we&apos;ll respond as soon as we
                            can.
                        </p>
                    </div>
                    <div className="flex flex-col gap-8 gsap-stagger">
                        {/* Address */}
                        <div className="flex gap-5 group">
                            <div className="shrink-0 flex items-center justify-center w-14 h-14 rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-white">
                                <span className="material-symbols-outlined text-[28px]">
                                    location_on
                                </span>
                            </div>
                            <div className="flex flex-col justify-center">
                                <h3 className="text-text-main text-lg font-bold">Visit Us</h3>
                                <p className="text-text-muted">
                                    Office no 381, Lower Ground Floor
                                    <br />
                                    D-Block, Crown Tower, Street 91, G-11/3
                                    <br />
                                    Islamabad, Pakistan
                                </p>
                            </div>
                        </div>

                        {/* Phone */}
                        <div className="flex gap-5 group">
                            <div className="shrink-0 flex items-center justify-center w-14 h-14 rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-white">
                                <span className="material-symbols-outlined text-[28px]">
                                    call
                                </span>
                            </div>
                            <div className="flex flex-col justify-center">
                                <h3 className="text-text-main text-lg font-bold">Call Us</h3>
                                <p className="text-text-muted">+92 3125259099</p>
                                {/* <p className="text-text-muted text-sm mt-1">
                                    Mon-Fri from 8am to 5pm.
                                </p> */}
                            </div>
                        </div>

                        {/* Email */}
                        <div className="flex gap-5 group">
                            <div className="shrink-0 flex items-center justify-center w-14 h-14 rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-white">
                                <span className="material-symbols-outlined text-[28px]">
                                    mail
                                </span>
                            </div>
                            <div className="flex flex-col justify-center">
                                <h3 className="text-text-main text-lg font-bold">Email Us</h3>
                                <p className="text-text-muted">imran.aasii@gmail.com</p>
                                <p className="text-text-muted text-sm mt-1">
                                    Our friendly team is here to help.
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* Social Media Follow */}
                    <div className="mt-4 pt-8 border-t border-border-light gsap-fade-up">
                        <h4 className="text-text-main font-bold mb-4">Follow Us</h4>
                        <div className="flex gap-4">
                            <Link
                                href="#"
                                className="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-border-light text-text-muted hover:text-primary hover:border-primary transition-all shadow-sm"
                            >
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
                                </svg>
                            </Link>
                            <Link
                                href="#"
                                className="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-border-light text-text-muted hover:text-primary hover:border-primary transition-all shadow-sm"
                            >
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                                    <rect height="12" width="4" x="2" y="9" />
                                    <circle cx="4" cy="4" r="2" />
                                </svg>
                            </Link>
                            <Link
                                href="#"
                                className="w-10 h-10 flex items-center justify-center rounded-full bg-white border border-border-light text-text-muted hover:text-primary hover:border-primary transition-all shadow-sm"
                            >
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                                </svg>
                            </Link>
                        </div>
                    </div>
                </div>

                {/* Right Column: Contact Form */}
                <div className="card-modern p-8 md:p-10 rounded-2xl bg-white gsap-fade-up">
                    <h3 className="text-2xl font-bold text-text-main mb-6">
                        Send us a Message
                    </h3>
                    <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div className="flex flex-col gap-2">
                                <label
                                    className="text-sm font-semibold text-text-main"
                                    htmlFor="contact-firstName"
                                >
                                    First Name
                                </label>
                                <input
                                    className="w-full px-4 py-3 rounded-lg border border-border-light bg-white text-text-main placeholder-gray-400 input-focus-glow transition-colors"
                                    id="contact-firstName"
                                    name="firstName"
                                    placeholder="Jane"
                                    type="text"
                                    value={formData.firstName}
                                    onChange={handleChange}
                                    disabled={loading}
                                />
                            </div>
                            <div className="flex flex-col gap-2">
                                <label
                                    className="text-sm font-semibold text-text-main"
                                    htmlFor="contact-lastName"
                                >
                                    Last Name
                                </label>
                                <input
                                    className="w-full px-4 py-3 rounded-lg border border-border-light bg-white text-text-main placeholder-gray-400 input-focus-glow transition-colors"
                                    id="contact-lastName"
                                    name="lastName"
                                    placeholder="Doe"
                                    type="text"
                                    value={formData.lastName}
                                    onChange={handleChange}
                                    disabled={loading}
                                />
                            </div>
                        </div>

                        <div className="flex flex-col gap-2">
                            <label
                                className="text-sm font-semibold text-text-main"
                                htmlFor="contact-email"
                            >
                                Email Address
                            </label>
                            <input
                                className="w-full px-4 py-3 rounded-lg border border-border-light bg-white text-text-main placeholder-gray-400 input-focus-glow transition-colors"
                                id="contact-email"
                                name="email"
                                placeholder="jane@example.com"
                                type="email"
                                value={formData.email}
                                onChange={handleChange}
                                disabled={loading}
                            />
                        </div>

                        <div className="flex flex-col gap-2">
                            <label
                                className="text-sm font-semibold text-text-main"
                                htmlFor="contact-subject"
                            >
                                Subject
                            </label>
                            <select
                                className="w-full px-4 py-3 rounded-lg border border-border-light bg-white text-text-main input-focus-glow transition-colors"
                                id="contact-subject"
                                name="subject"
                                value={formData.subject}
                                onChange={handleChange}
                                disabled={loading}
                            >
                                <option>General Inquiry</option>
                                <option>Project Proposal</option>
                                <option>Other</option>
                            </select>
                        </div>

                        <div className="flex flex-col gap-2">
                            <label
                                className="text-sm font-semibold text-text-main"
                                htmlFor="contact-message"
                            >
                                Message
                            </label>
                            <textarea
                                className="w-full px-4 py-3 rounded-lg border border-border-light bg-white text-text-main placeholder-gray-400 input-focus-glow transition-colors resize-none"
                                id="contact-message"
                                name="message"
                                placeholder="How can we help you?"
                                rows={5}
                                value={formData.message}
                                onChange={handleChange}
                                disabled={loading}
                            />
                        </div>

                        <div className="flex items-center gap-3 mt-2">
                            <input
                                className="w-4 h-4 text-primary bg-light-bg border-border-light rounded focus:ring-primary focus:ring-2"
                                id="privacy"
                                type="checkbox"
                            />
                            <label className="text-sm text-text-muted" htmlFor="privacy">
                                I agree to the{" "}
                                <Link
                                    href="/privacy-policy"
                                    className="underline text-text-main hover:text-primary transition-colors"
                                >
                                    Privacy Policy
                                </Link>
                                .
                            </label>
                        </div>

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

                        <button
                            className="mt-4 w-full btn-primary btn-submit-pulse flex items-center justify-center gap-2 isolate relative overflow-hidden group disabled:opacity-60 disabled:cursor-not-allowed"
                            type="submit"
                            disabled={loading}
                        >
                            <span className="relative z-10 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>
                                        Sending...
                                    </>
                                ) : (
                                    <>
                                        Send Message
                                        <span className="material-symbols-outlined text-[18px] font-bold">
                                            send
                                        </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>
                </div>
            </div>
        </section>
    );
}
