"use client";

import { useState, type FormEvent } from "react";
import { useLucideIcons } from "@/hooks/useLucideIcons";

interface ContactFormState {
  name: string;
  phone: string;
  email: string;
  service: string;
  people: string;
  date: string;
  message: string;
}

const INITIAL_STATE: ContactFormState = {
  name: "",
  phone: "",
  email: "",
  service: "",
  people: "",
  date: "",
  message: "",
};

const SERVICE_OPTIONS = [
  { value: "", label: "اختر الخدمة" },
  { value: "events", label: "فعالية" },
  { value: "religious", label: "رحلة دينية" },
  { value: "umrah", label: "عمرة" },
  { value: "tourism", label: "سياحة" },
  { value: "general", label: "استفسار عام" },
];

export function ContactForm() {
  useLucideIcons();
  const [data, setData] = useState<ContactFormState>(INITIAL_STATE);
  const [submitted, setSubmitted] = useState(false);

  const handleChange = (field: keyof ContactFormState) => (
    event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
  ) => {
    setData((prev) => ({ ...prev, [field]: event.target.value }));
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true);
  };

  const submitStyle = submitted ? { background: "var(--green-600)" } : undefined;

  return (
    <div className="form-card">
      <div className="head">
        <span className="eyebrow">
          <span className="pip" />
          نموذج التواصل
        </span>
        <h2>أخبرنا عن طلبك</h2>
        <p>سنرد عليك في أقرب وقت — عادةً خلال ساعات العمل.</p>
      </div>
      <form onSubmit={handleSubmit}>
        <div className="field-row">
          <label className="field">
            <span>
              <span className="req">*</span>الاسم
            </span>
            <input type="text" name="name" placeholder="اكتب اسمك الكامل" required value={data.name} onChange={handleChange("name")} />
          </label>
          <label className="field">
            <span>
              <span className="req">*</span>رقم الجوال
            </span>
            <input type="tel" name="phone" placeholder="+966 5x xxx xxxx" required value={data.phone} onChange={handleChange("phone")} />
          </label>
        </div>
        <div className="field-row">
          <label className="field">
            <span>البريد الإلكتروني</span>
            <input type="email" name="email" placeholder="you@example.com" value={data.email} onChange={handleChange("email")} />
          </label>
          <label className="field">
            <span>
              <span className="req">*</span>نوع الخدمة
            </span>
            <select name="service" id="f-service" required value={data.service} onChange={handleChange("service")}>
              {SERVICE_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>
        </div>
        <div className="field-row">
          <label className="field">
            <span>عدد الأشخاص</span>
            <input type="number" name="people" id="f-people" min={1} placeholder="مثلاً: ٤" value={data.people} onChange={handleChange("people")} />
          </label>
          <label className="field">
            <span>التاريخ المتوقّع</span>
            <input type="text" name="date" id="f-date" placeholder="مثلاً: شهر سبتمبر، أو ٢٠ — ٢٥ أغسطس" value={data.date} onChange={handleChange("date")} />
          </label>
        </div>
        <label className="field">
          <span>الرسالة</span>
          <textarea name="message" placeholder="اكتب لنا تفاصيل طلبك أو سؤالك..." value={data.message} onChange={handleChange("message")} />
        </label>
        <div className="field-actions">
          <button type="submit" className="submit" style={submitStyle}>
            {submitted ? "تم الإرسال ✓" : <>إرسال الطلب <i data-lucide="arrow-left" /></>}
          </button>
          <a href="https://wa.me/" className="wa-alt" rel="noopener noreferrer" target="_blank">
            <i data-lucide="message-circle" />
            تواصل عبر واتساب
          </a>
        </div>
      </form>
    </div>
  );
}