"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import {
  Send,
  CheckCircle,
  Mail,
  Phone,
  MapPin,
  MessageCircle,
} from "lucide-react";

const FacebookIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
  </svg>
);

const TikTokIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 15.68a6.34 6.34 0 006.27 6.32 6.32 6.32 0 006.2-6.32V10.4a8.36 8.36 0 004.7 1.37V8.32a4.92 4.92 0 01-2.58-1.63z" />
  </svg>
);

const YoutubeIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
  </svg>
);

const InstagramIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
  </svg>
);

const LinkedinIcon = ({ size = 20 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
  </svg>
);
import { useTranslation } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";

export function Contact() {
  const { t, dir } = useTranslation();
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    country: "",
    message: "",
    inquiryType: "",
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);

  const validate = () => {
    const errs: Record<string, string> = {};
    if (!formData.name.trim()) errs.name = t.contact.validation.nameRequired;
    if (!formData.email.trim()) errs.email = t.contact.validation.emailRequired;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))
      errs.email = t.contact.validation.emailInvalid;
    if (!formData.message.trim()) errs.message = t.contact.validation.messageRequired;
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validate()) return;
    setSending(true);
    
    // Simulate API call
    await new Promise((r) => setTimeout(r, 1000));
    
    // Generate WhatsApp message
    const whatsappMsg = `New Inquiry from UNIPAM Website:%0A%0A` +
      `Name: ${formData.name}%0A` +
      `Phone: ${formData.phone}%0A` +
      `Email: ${formData.email}%0A` +
      `Country: ${formData.country}%0A` +
      `Type: ${formData.inquiryType}%0A` +
      `Message: ${formData.message}`;
    
    const whatsappUrl = `https://wa.me/905352534344?text=${whatsappMsg}`;
    
    setSending(false);
    setSubmitted(true);
    
    // Open WhatsApp in a new tab
    window.open(whatsappUrl, "_blank");
  };

  const updateField = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) setErrors((prev) => ({ ...prev, [field]: "" }));
  };

  const inputClass = (field: string) =>
    `w-full px-5 py-3.5 rounded-xl border ${
      errors[field] ? "border-warm-coral/50 bg-warm-coral/5" : "border-medium-gray/50 bg-white"
    } text-dark-text text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all placeholder:text-dark-text/30`;

  return (
    <section id="contact" className="section-padding bg-white relative" dir={dir}>
      <div className="max-w-7xl mx-auto">
        <SectionHeading
          tag={t.contact.sectionTag}
          title={t.contact.title}
          subtitle={t.contact.subtitle}
        />

        <div className="grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-14">
          {/* Form Column */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="lg:col-span-3"
          >
            {submitted ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="flex flex-col items-center justify-center py-20 text-center bg-gradient-to-br from-baby-blue/20 to-soft-cream/30 rounded-3xl border border-primary/10"
              >
                <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                  <CheckCircle size={40} className="text-primary" />
                </div>
                <h3 className="text-2xl font-extrabold text-dark-text mb-2">
                  {t.contact.success}
                </h3>
              </motion.div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-5">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-bold text-dark-text mb-1.5">
                      {t.contact.name} *
                    </label>
                    <input
                      type="text"
                      value={formData.name}
                      onChange={(e) => updateField("name", e.target.value)}
                      className={inputClass("name")}
                      placeholder={t.contact.namePlaceholder}
                    />
                    {errors.name && <p className="text-xs text-warm-coral mt-1">{errors.name}</p>}
                  </div>
                  <div>
                    <label className="block text-sm font-bold text-dark-text mb-1.5">
                      {t.contact.phone}
                    </label>
                    <input
                      type="tel"
                      value={formData.phone}
                      onChange={(e) => updateField("phone", e.target.value)}
                      className={inputClass("phone")}
                      placeholder={t.contact.phonePlaceholder}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-bold text-dark-text mb-1.5">
                      {t.contact.email} *
                    </label>
                    <input
                      type="email"
                      value={formData.email}
                      onChange={(e) => updateField("email", e.target.value)}
                      className={inputClass("email")}
                      placeholder={t.contact.emailPlaceholder}
                    />
                    {errors.email && <p className="text-xs text-warm-coral mt-1">{errors.email}</p>}
                  </div>
                  <div>
                    <label className="block text-sm font-bold text-dark-text mb-1.5">
                      {t.contact.country}
                    </label>
                    <input
                      type="text"
                      value={formData.country}
                      onChange={(e) => updateField("country", e.target.value)}
                      className={inputClass("country")}
                      placeholder={t.contact.countryPlaceholder}
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-bold text-dark-text mb-1.5">
                    {t.contact.inquiryType}
                  </label>
                  <select
                    value={formData.inquiryType}
                    onChange={(e) => updateField("inquiryType", e.target.value)}
                    className={`${inputClass("inquiryType")} appearance-none cursor-pointer`}
                  >
                    <option value="">—</option>
                    {t.contact.inquiryTypes.map((type) => (
                      <option key={type} value={type}>
                        {type}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-bold text-dark-text mb-1.5">
                    {t.contact.message} *
                  </label>
                  <textarea
                    rows={5}
                    value={formData.message}
                    onChange={(e) => updateField("message", e.target.value)}
                    className={`${inputClass("message")} resize-none`}
                    placeholder={t.contact.messagePlaceholder}
                  />
                  {errors.message && <p className="text-xs text-warm-coral mt-1">{errors.message}</p>}
                </div>

                <button
                  type="submit"
                  disabled={sending}
                  className="w-full btn-primary py-4 text-base flex items-center justify-center gap-2 disabled:opacity-60"
                >
                  {sending ? (
                    <>
                      <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                      {t.contact.sending}
                    </>
                  ) : (
                    <>
                      <Send size={18} />
                      {t.contact.send}
                    </>
                  )}
                </button>
              </form>
            )}
          </motion.div>

          {/* Info Column */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="lg:col-span-2 space-y-6"
          >
            {/* Contact Details Card */}
            <div className="bg-gradient-to-br from-baby-blue/20 to-soft-cream/20 rounded-3xl p-6 border border-primary/10">
              <h4 className="text-lg font-bold text-dark-text mb-5">
                {t.contact.sectionTag}
              </h4>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    <Mail size={18} className="text-primary" />
                  </div>
                  <div>
                    <p className="text-xs text-dark-text/50 font-semibold">{t.contact.emailLabel}</p>
                    <p className="text-sm font-bold text-dark-text">{t.contact.emailValue}</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    <Phone size={18} className="text-primary" />
                  </div>
                  <div>
                    <p className="text-xs text-dark-text/50 font-semibold">{t.contact.phoneLabel}</p>
                    <p className="text-sm font-bold text-dark-text">{t.contact.phoneValue}</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                    <MapPin size={18} className="text-primary" />
                  </div>
                  <div>
                    <p className="text-xs text-dark-text/50 font-semibold">{t.contact.locationLabel}</p>
                    <p className="text-sm font-bold text-dark-text">{t.contact.locationValue}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* WhatsApp CTA */}
            <a
              href="https://wa.me/905352534344"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-3 w-full py-4 rounded-2xl bg-[#25D366] text-white font-bold text-sm hover:opacity-90 transition-opacity shadow-lg shadow-[#25D366]/20"
            >
              <MessageCircle size={20} />
              {t.contact.whatsapp}
            </a>

            {/* Social Links Grid */}
            <div className="pt-4 border-t border-light-gray">
              <p className="text-sm font-bold text-dark-text/70 mb-4 text-center">
                {dir === "rtl" ? "تابعنا على" : "Follow us on"}
              </p>
              <div className="flex flex-wrap items-center justify-center gap-3">
                <a
                  href="https://www.facebook.com/ubc.unipam/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-2xl bg-[#1877F2]/10 hover:bg-[#1877F2]/20 text-[#1877F2] flex items-center justify-center transition-colors"
                  aria-label="Facebook"
                >
                  <FacebookIcon size={20} />
                </a>
                <a
                  href="https://www.instagram.com/ubc_unipam"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-2xl bg-[#E1306C]/10 hover:bg-[#E1306C]/20 text-[#E1306C] flex items-center justify-center transition-colors"
                  aria-label="Instagram"
                >
                  <InstagramIcon size={20} />
                </a>
                <a
                  href="https://www.tiktok.com/@ubc.unipam"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-2xl bg-black/5 hover:bg-black/10 text-black flex items-center justify-center transition-colors"
                  aria-label="TikTok"
                >
                  <TikTokIcon size={20} />
                </a>
                <a
                  href="https://www.youtube.com/@ubc.unipam"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 hover:bg-[#FF0000]/20 text-[#FF0000] flex items-center justify-center transition-colors"
                  aria-label="YouTube"
                >
                  <YoutubeIcon size={20} />
                </a>
                <a
                  href="https://www.linkedin.com/in/ubcunipam"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-12 h-12 rounded-2xl bg-[#0A66C2]/10 hover:bg-[#0A66C2]/20 text-[#0A66C2] flex items-center justify-center transition-colors"
                  aria-label="LinkedIn"
                >
                  <LinkedinIcon size={20} />
                </a>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}