"use client";

import Image from "next/image";
import { useState } from "react";
import HeaderWrapper from "@/components/landing/HeaderWrapper";
import Footer from "@/components/landing/Footer";
import { useTranslations } from "next-intl";
import { useSubmitContactForm } from "@/api/public/contact";
import { normalizeEmail } from "@/lib/email";
import { trackLinkedInConversion } from "@/lib/linkedin-insight";
import { trackGAEvent } from "@/lib/google-analytics";
import { getUtmParams } from "@/lib/utm";
import { Loader2 } from "lucide-react";

export default function ContactPage() {
  const t = useTranslations("contact");
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    description: "",
  });
  const [submitStatus, setSubmitStatus] = useState<{
    type: "success" | "error" | null;
    message: string;
    leadNumber?: string;
  }>({ type: null, message: "" });

  const maxDescriptionLength = 500;

  const { mutate: submitContact, isPending } = useSubmitContactForm({
    mutation: {
      onSuccess: (data) => {
        setSubmitStatus({
          type: "success",
          message: t("successMessage"),
          leadNumber: data.data.lead_number,
        });
        setFormData({ name: "", email: "", subject: "", description: "" });
        // Conversion tracking: contact is a marketing page (no health data).
        trackLinkedInConversion();
        trackGAEvent("generate_lead", { form: "contact", ...getUtmParams() });
      },
      onError: () => {
        setSubmitStatus({
          type: "error",
          message: t("errorMessage"),
        });
      },
    },
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    if (name === "description" && value.length > maxDescriptionLength) return;
    setFormData((prev) => ({ ...prev, [name]: value }));
    // Clear status message when user starts typing
    if (submitStatus.type) {
      setSubmitStatus({ type: null, message: "" });
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Basic validation
    if (!formData.name.trim() || !formData.email.trim() || !formData.subject.trim() || !formData.description.trim()) {
      setSubmitStatus({
        type: "error",
        message: t("requiredFields"),
      });
      return;
    }

    submitContact({
      data: {
        name: formData.name,
        email: normalizeEmail(formData.email),
        subject: formData.subject,
        message: formData.description,
        source: "website",
      },
    });
  };

  return (
    <div className="min-h-screen flex flex-col">
      <HeaderWrapper />

      {/* Page Title Section */}
      <section className="pt-24 pb-12 bg-gradient-to-b from-[#E8F4F8] to-[#F5FAFB]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl sm:text-5xl font-semibold text-center text-gray-900">
            {t("title")}
          </h1>
        </div>
      </section>

      {/* Main Content */}
      <section className="flex-1 py-12 bg-[#F5FAFB]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
            {/* Left Side - Image */}
            <div className="relative">
              <Image
                src="https://images.unsplash.com/photo-1560264280-88b68371db39?w=600&h=550&fit=crop&q=80"
                alt="Customer support representative"
                width={600}
                height={550}
                className="w-full max-w-md mx-auto rounded-lg"
              />
            </div>

            {/* Right Side - Contact Form */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
              {/* Status Messages */}
              {submitStatus.type === "success" && (
                <div role="status" className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700">
                  <p className="font-medium">{submitStatus.message}</p>
                  {submitStatus.leadNumber && (
                    <p className="text-sm mt-1">
                      {t("referenceNumber")}: {submitStatus.leadNumber}
                    </p>
                  )}
                </div>
              )}
              {submitStatus.type === "error" && (
                <div role="alert" className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700">
                  {submitStatus.message}
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-5">
                {/* Name Field */}
                <div>
                  <label htmlFor="contact-name" className="block text-sm font-medium text-gray-700 mb-2">
                    {t("name")}
                  </label>
                  <input
                    id="contact-name"
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    placeholder={t("namePlaceholder")}
                    disabled={isPending}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition text-sm disabled:bg-gray-50 disabled:cursor-not-allowed"
                  />
                </div>

                {/* Email Field */}
                <div>
                  <label htmlFor="contact-email" className="block text-sm font-medium text-gray-700 mb-2">
                    {t("email")}
                  </label>
                  <input
                    id="contact-email"
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    placeholder={t("emailPlaceholder")}
                    disabled={isPending}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition text-sm disabled:bg-gray-50 disabled:cursor-not-allowed"
                  />
                </div>

                {/* Subject Field */}
                <div>
                  <label htmlFor="contact-subject" className="block text-sm font-medium text-gray-700 mb-2">
                    {t("subject")}
                  </label>
                  <input
                    id="contact-subject"
                    type="text"
                    name="subject"
                    value={formData.subject}
                    onChange={handleChange}
                    placeholder={t("subjectPlaceholder")}
                    disabled={isPending}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition text-sm disabled:bg-gray-50 disabled:cursor-not-allowed"
                  />
                </div>

                {/* Description Field */}
                <div>
                  <label htmlFor="contact-description" className="block text-sm font-medium text-gray-700 mb-2">
                    {t("description")}
                  </label>
                  <textarea
                    id="contact-description"
                    name="description"
                    value={formData.description}
                    onChange={handleChange}
                    placeholder={t("descriptionPlaceholder")}
                    rows={4}
                    disabled={isPending}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition text-sm resize-none disabled:bg-gray-50 disabled:cursor-not-allowed"
                  />
                  <div className="text-right text-xs text-gray-400 mt-1">
                    {formData.description.length}/{maxDescriptionLength}
                  </div>
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  disabled={isPending}
                  className="w-full py-3.5 bg-[#3B9EC9] hover:bg-[#2D8AB5] text-white font-medium rounded-full transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  {isPending ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      {t("submitting")}
                    </>
                  ) : (
                    t("submit")
                  )}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}