'use client';

import { useState } from 'react';
import Link from 'next/link';
import BottomNav from '@/components/mobile/BottomNav';

export default function ContactPage() {
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!subject.trim() || !message.trim()) return;
    setIsSubmitting(true);
    const formData = new URLSearchParams();
    formData.append('subject', subject);
    formData.append('message', message);
    try {
      const response = await fetch('https://readdy.ai/api/form/d6okcl539lnhn4hh1bs0', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: formData.toString(),
      });
      if (response.ok) {
        setShowSuccess(true);
        setSubject('');
        setMessage('');
        setTimeout(() => setShowSuccess(false), 3000);
      }
    } catch (error) {
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto', background: '#F7F8FA' }}>
      <div className="h-11 bg-white"></div>

      <header className="h-14 bg-white border-b border-slate-100 flex items-center justify-center px-4 sticky top-0 z-10">
        <Link href="/mobile/profile" className="absolute right-4 w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
          <i className="ri-arrow-right-s-line text-slate-700 text-xl"></i>
        </Link>
        <h1 className="text-lg font-bold text-slate-900">تواصل معنا</h1>
      </header>

      <div className="p-4 pb-32 space-y-3">

        <div className="rounded-2xl p-4 border border-emerald-100 relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #f0fdf4, #dcfce7)' }}>
          <div className="absolute top-0 left-0 w-24 h-24 rounded-full opacity-20" style={{ background: 'radial-gradient(circle, #059669, transparent)', transform: 'translate(-30%, -30%)' }}></div>
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
              <i className="ri-customer-service-2-line text-emerald-600 text-xl"></i>
            </div>
            <div>
              <h2 className="text-sm font-bold text-slate-900">هل تحتاجين مساعدة سريعة؟</h2>
              <p className="text-xs text-slate-500 mt-0.5">فريقنا متاح 24/7 لمساعدتك</p>
            </div>
          </div>
          <a
            href="https://wa.me/966500000000"
            target="_blank"
            rel="noopener noreferrer"
            className="w-full h-11 rounded-xl text-white font-bold text-sm flex items-center justify-center gap-2 cursor-pointer transition-all active:scale-95 whitespace-nowrap shadow-md"
            style={{ background: 'linear-gradient(135deg, #25D366, #1da851)' }}
          >
            <i className="ri-whatsapp-line text-xl"></i>
            تواصل عبر واتساب
          </a>
        </div>

        <div className="grid grid-cols-3 gap-2">
          {[
            { icon: 'ri-phone-line', label: 'اتصل بنا', color: 'text-sky-600', bg: 'bg-sky-50' },
            { icon: 'ri-mail-send-line', label: 'البريد', color: 'text-violet-600', bg: 'bg-violet-50' },
            { icon: 'ri-twitter-x-line', label: 'تويتر', color: 'text-slate-700', bg: 'bg-slate-100' },
          ].map((item, i) => (
            <button key={i} className={`${item.bg} rounded-2xl p-3 flex flex-col items-center gap-2 cursor-pointer active:scale-95 transition-all`}>
              <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
                <i className={`${item.icon} ${item.color} text-xl`}></i>
              </div>
              <span className="text-xs font-semibold text-slate-700">{item.label}</span>
            </button>
          ))}
        </div>

        <form id="contact-form" data-readdy-form onSubmit={handleSubmit} className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-4">
            <div className="w-8 h-8 bg-emerald-50 rounded-xl flex items-center justify-center">
              <i className="ri-send-plane-2-line text-emerald-600 text-base"></i>
            </div>
            <h3 className="text-sm font-bold text-slate-900">أرسلي رسالة</h3>
          </div>

          <div className="mb-3">
            <label className="block text-xs font-bold text-slate-500 mb-1.5">عنوان الرسالة</label>
            <input
              type="text"
              name="subject"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              placeholder="أدخلي عنوان الرسالة"
              className="w-full h-[52px] px-4 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent"
              required
            />
          </div>

          <div className="mb-4">
            <label className="block text-xs font-bold text-slate-500 mb-1.5">نص الرسالة</label>
            <textarea
              name="message"
              value={message}
              onChange={(e) => { if (e.target.value.length <= 500) setMessage(e.target.value); }}
              placeholder="اكتبي رسالتك هنا..."
              className="w-full h-[120px] px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent resize-none"
              required
              maxLength={500}
            ></textarea>
            <div className="flex justify-between mt-1">
              <span className="text-[10px] text-slate-400">{message.length}/500</span>
            </div>
          </div>

          <button
            type="submit"
            disabled={isSubmitting || !subject.trim() || !message.trim()}
            className="w-full h-[52px] text-white rounded-xl font-bold text-sm flex items-center justify-center gap-2 cursor-pointer transition-all disabled:opacity-40 disabled:cursor-not-allowed active:scale-95 whitespace-nowrap shadow-md"
            style={{ background: 'linear-gradient(135deg, #059669, #047857)' }}
          >
            {isSubmitting ? (
              <><i className="ri-loader-4-line text-xl animate-spin"></i> جاري الإرسال...</>
            ) : (
              <><i className="ri-send-plane-fill text-lg"></i> إرسال الرسالة</>
            )}
          </button>
        </form>
      </div>

      {showSuccess && (
        <div className="fixed top-20 left-1/2 -translate-x-1/2 text-white px-5 py-3 rounded-2xl shadow-2xl z-50 flex items-center gap-2" style={{ background: 'linear-gradient(135deg, #059669, #047857)' }}>
          <i className="ri-checkbox-circle-fill text-xl"></i>
          <span className="font-bold text-sm whitespace-nowrap">تم إرسال رسالتك بنجاح!</span>
        </div>
      )}

      <BottomNav activeTab="more" />
    </div>
  );
}