"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { sendContactMessage } from "@/lib/api";
import { Phone, MessageSquare, MapPin } from "lucide-react";
import Image from "next/image";

export function ContactForm() {
  const t = useTranslations();
  const pathname = usePathname();
  const locale = (pathname.split("/")[1] || "uz") as "uz" | "ru";

  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    message: "",
    productSlug: "",
  });

  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<{
    type: "success" | "error";
    text: string;
  } | null>(null);

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage(null);

    try {
      const result = await sendContactMessage({
        ...formData,
        lang: locale,
      });

      if (result.success) {
        setMessage({ type: "success", text: t("contact.success") });
        setFormData({ name: "", phone: "", message: "", productSlug: "" });
      } else {
        setMessage({ type: "error", text: t("contact.error") });
      }
    } catch {
      setMessage({ type: "error", text: t("contact.error") });
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="contact" className="py-20 relative">
      <div className="absolute -z-40 top-0 left-0 h-full w-full">
        <Image
          src="/images/hero4.jpg"
          alt="hero image"
          fill
          className="object-cover"
        />
      </div>
      <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
        >
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            {t("contact.title")}
          </h2>
          <div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="space-y-4 flex flex-col items-start justify-center max-h-[350px] h-full bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-4"
          >
            <div>
              <h3 className="text-2xl font-bold text-gray-900 mb-2">
                Get In Touch
              </h3>
              <p className="text-gray-600 mb-8">
                Reach out to us for inquiries, support, or partnership
                opportunities.
              </p>
            </div>

            {/* Contact Methods */}
            {[
              {
                icon: Phone,
                title: "Phone",
                value: "+998 (99) 123-45-67",
              },
              {
                icon: MessageSquare,
                title: "Telegram",
                value: "@firma_support",
              },
              {
                icon: MapPin,
                title: "Address",
                value: "Tashkent, Uzbekistan",
              },
            ].map((item, idx) => {
              const Icon = item.icon;
              return (
                <motion.div
                  key={idx}
                  whileHover={{ x: 5 }}
                  className="flex gap-4"
                >
                  <Icon className="text-blue-600 shrink-0" size={24} />
                  <div>
                    <h4 className="font-semibold text-gray-900">
                      {item.title}
                    </h4>
                    <p className="text-gray-600">{item.value}</p>
                  </div>
                </motion.div>
              );
            })}
          </motion.div>

          {/* Form */}
          <motion.form
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            onSubmit={handleSubmit}
            className="bg-white rounded-lg shadow-lg p-8"
          >
            {/* Name */}
            <div className="mb-6">
              <label className="block text-gray-700 font-medium mb-2">
                {t("contact.name")}
              </label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                placeholder={t("contact.namePlaceholder")}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            {/* Phone */}
            <div className="mb-6">
              <label className="block text-gray-700 font-medium mb-2">
                {t("contact.phone")} *
              </label>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleChange}
                placeholder={t("contact.phonePlaceholder")}
                required
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            {/* Message */}
            <div className="mb-6">
              <label className="block text-gray-700 font-medium mb-2">
                {t("contact.message")}
              </label>
              <textarea
                name="message"
                value={formData.message}
                onChange={handleChange}
                placeholder={t("contact.messagePlaceholder")}
                rows={4}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
              />
            </div>

            {/* Product Select */}
            <div className="mb-6">
              <label className="block text-gray-700 font-medium mb-2">
                {t("contact.product")}
              </label>
              <select
                name="productSlug"
                value={formData.productSlug}
                onChange={handleChange}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="">Select a product...</option>
                <option value="schotchik-pump">Schotchik Pump</option>
                <option value="agregat-pump">Agregat Pump</option>
                <option value="ccl-20-24-pump">CCL 20/24 Pump</option>
              </select>
            </div>

            {/* Message Alert */}
            {message && (
              <motion.div
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                className={`mb-6 p-4 rounded-lg ${
                  message.type === "success"
                    ? "bg-green-50 text-green-700 border border-green-200"
                    : "bg-red-50 text-red-700 border border-red-200"
                }`}
              >
                {message.text}
              </motion.div>
            )}

            {/* Submit Button */}
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              type="submit"
              disabled={loading}
              className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? "Sending..." : t("contact.send")}
            </motion.button>
          </motion.form>
        </div>
      </div>
    </section>
  );
}