"use client";

import { useState } from "react";
import { Phone, Mail, MessageCircle, CheckCircle } from "lucide-react";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import Container from "@/components/shared/Container";
import AnimateOnScroll from "@/components/shared/AnimateOnScroll";
import { Button } from "@/components/ui/button";
import { content } from "@/lib/content";

const contactContent = content.ar.contact;

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    academy: "",
    phone: "",
    email: "",
    players: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    // Simulate submission (replace with actual endpoint later)
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setSubmitted(true);
    setSubmitting(false);
  };

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

  return (
    <>
      <Navbar />
      <main className="min-h-screen">
        {/* Hero */}
        <section className="pt-24 pb-12 bg-gradient-to-b from-sky-50/50 to-white">
          <Container className="text-center">
            <AnimateOnScroll>
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-navy-800">
                {contactContent.title}
              </h1>
              <p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
                {contactContent.subtitle}
              </p>
            </AnimateOnScroll>
          </Container>
        </section>

        {/* Split Layout */}
        <section className="py-16">
          <Container>
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-16">
              {/* Form (Right side in RTL) */}
              <AnimateOnScroll className="lg:col-span-3">
                <form
                  onSubmit={handleSubmit}
                  className="space-y-5 rounded-2xl border border-slate-200 bg-white p-6 lg:p-8 shadow-sm"
                >
                  {/* Name */}
                  <div>
                    <label
                      htmlFor="name"
                      className="block text-sm font-medium text-navy-800 mb-1.5"
                    >
                      {contactContent.form.name}
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                      className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all"
                    />
                  </div>

                  {/* Academy */}
                  <div>
                    <label
                      htmlFor="academy"
                      className="block text-sm font-medium text-navy-800 mb-1.5"
                    >
                      {contactContent.form.academy}
                    </label>
                    <input
                      type="text"
                      id="academy"
                      name="academy"
                      value={formData.academy}
                      onChange={handleChange}
                      required
                      className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all"
                    />
                  </div>

                  {/* Phone & Email row */}
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label
                        htmlFor="phone"
                        className="block text-sm font-medium text-navy-800 mb-1.5"
                      >
                        {contactContent.form.phone}
                      </label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        dir="ltr"
                        className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all"
                      />
                    </div>
                    <div>
                      <label
                        htmlFor="email"
                        className="block text-sm font-medium text-navy-800 mb-1.5"
                      >
                        {contactContent.form.email}
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        dir="ltr"
                        className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all"
                      />
                    </div>
                  </div>

                  {/* Player Count */}
                  <div>
                    <label
                      htmlFor="players"
                      className="block text-sm font-medium text-navy-800 mb-1.5"
                    >
                      {contactContent.form.players}
                    </label>
                    <select
                      id="players"
                      name="players"
                      value={formData.players}
                      onChange={handleChange}
                      required
                      className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all bg-white"
                    >
                      <option value="" disabled>
                        اختر...
                      </option>
                      {contactContent.form.playersOptions.map((option) => (
                        <option key={option} value={option}>
                          {option}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Message */}
                  <div>
                    <label
                      htmlFor="message"
                      className="block text-sm font-medium text-navy-800 mb-1.5"
                    >
                      {contactContent.form.message}
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      rows={4}
                      className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-sm text-navy-800 placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 outline-none transition-all resize-none"
                    />
                  </div>

                  {/* Submit */}
                  <Button
                    disabled={submitting}
                    className="w-full h-11 bg-sky-500 text-white font-semibold hover:bg-sky-600 text-sm disabled:opacity-60"
                  >
                    {submitting ? "جارٍ الإرسال..." : contactContent.form.submit}
                  </Button>

                  {submitted && (
                    <div className="flex items-center gap-3 rounded-lg bg-emerald-50 border border-emerald-200 p-4">
                      <CheckCircle className="h-5 w-5 text-emerald-600 shrink-0" />
                      <p className="text-sm text-emerald-800">
                        تم إرسال طلبك بنجاح! سنتواصل معك خلال ٢٤ ساعة.
                      </p>
                    </div>
                  )}
                </form>
              </AnimateOnScroll>

              {/* Contact Info (Left side in RTL) */}
              <AnimateOnScroll delay={0.2} className="lg:col-span-2">
                <div className="space-y-8 lg:pt-8">
                  <div>
                    <h2 className="text-xl font-bold text-navy-800 mb-6">
                      أو تواصل معنا مباشرة
                    </h2>
                  </div>

                  {/* Phone */}
                  <div className="flex items-start gap-4">
                    <div className="flex items-center justify-center w-11 h-11 rounded-lg bg-sky-50 shrink-0">
                      <Phone className="h-5 w-5 text-sky-600" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-navy-800 mb-1">
                        اتصل بنا
                      </p>
                      <a
                        href={`tel:${contactContent.info.phone.replace(/\s/g, "")}`}
                        dir="ltr"
                        className="text-sm text-slate-600 hover:text-sky-600 transition-colors"
                      >
                        {contactContent.info.phone}
                      </a>
                    </div>
                  </div>

                  {/* WhatsApp */}
                  <div className="flex items-start gap-4">
                    <div className="flex items-center justify-center w-11 h-11 rounded-lg bg-emerald-50 shrink-0">
                      <MessageCircle className="h-5 w-5 text-emerald-600" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-navy-800 mb-1">
                        واتساب
                      </p>
                      <a
                        href={`https://wa.me/${contactContent.info.phone.replace(/[\s+]/g, "")}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm text-slate-600 hover:text-emerald-600 transition-colors"
                      >
                        {contactContent.info.whatsapp}
                      </a>
                    </div>
                  </div>

                  {/* Email */}
                  <div className="flex items-start gap-4">
                    <div className="flex items-center justify-center w-11 h-11 rounded-lg bg-amber-50 shrink-0">
                      <Mail className="h-5 w-5 text-amber-600" />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-navy-800 mb-1">
                        البريد الإلكتروني
                      </p>
                      <a
                        href={`mailto:${contactContent.info.email}`}
                        dir="ltr"
                        className="text-sm text-slate-600 hover:text-amber-600 transition-colors"
                      >
                        {contactContent.info.email}
                      </a>
                    </div>
                  </div>

                  {/* Extra CTA */}
                  <div className="rounded-xl bg-slate-50 border border-slate-200 p-5 mt-8">
                    <p className="text-sm text-slate-600 leading-relaxed">
                      العرض التجريبي يستغرق ٣٠ دقيقة فقط. هنوريك كل المميزات
                      وهنجاوب على كل أسئلتك.
                    </p>
                  </div>
                </div>
              </AnimateOnScroll>
            </div>
          </Container>
        </section>
      </main>
      <Footer />
    </>
  );
}
