'use client';

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

const stats = [
  { label: 'رحلة منجزة', value: '48', icon: 'ri-route-fill', color: 'text-emerald-600', bg: 'bg-emerald-50' },
  { label: 'يوم متبقي', value: '22', icon: 'ri-calendar-check-fill', color: 'text-violet-600', bg: 'bg-violet-50' },
  { label: 'ر.س موفّرة', value: '120', icon: 'ri-leaf-fill', color: 'text-amber-600', bg: 'bg-amber-50' },
];

const menuGroups = [
  {
    title: 'الاشتراك',
    items: [
      { icon: 'ri-bus-2-line', label: 'اشتراكاتي', sub: 'باص 14 — حي النزهة', href: '/mobile/trips', color: 'text-emerald-600', bg: 'bg-emerald-50' },
      { icon: 'ri-route-line', label: 'سجل الرحلات', sub: '48 رحلة منجزة', href: '/mobile/trips', color: 'text-sky-600', bg: 'bg-sky-50' },
    ],
  },
  {
    title: 'الحساب',
    items: [
      { icon: 'ri-settings-4-line', label: 'الإعدادات', sub: 'الإشعارات والخصوصية', href: '/mobile/settings', color: 'text-slate-600', bg: 'bg-slate-100' },
      { icon: 'ri-customer-service-2-line', label: 'تواصل معنا', sub: 'الدعم الفني', href: '/mobile/contact', color: 'text-violet-600', bg: 'bg-violet-50' },
      { icon: 'ri-feedback-line', label: 'الشكاوى والمقترحات', sub: 'شاركنا رأيك', href: '/mobile/complaints', color: 'text-amber-600', bg: 'bg-amber-50' },
    ],
  },
];

export default function ProfilePage() {
  const [showEditModal, setShowEditModal] = useState(false);
  const [editName, setEditName] = useState('نورة المطيري');
  const [editPhone, setEditPhone] = useState('0551234567');
  const [editEmail, setEditEmail] = useState('noura@email.com');
  const [editArea, setEditArea] = useState('حي النزهة، الرياض');
  const [saved, setSaved] = useState(false);

  function handleSave() {
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      setShowEditModal(false);
    }, 1200);
  }

  return (
    <div className="min-h-screen pb-32" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto', background: '#F0F4F8' }}>
      <div className="h-11" style={{ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)' }}></div>

      {/* Header */}
      <div className="relative" style={{ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)' }}>
        <div className="absolute top-0 left-0 w-40 h-40 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(-30%,-30%)' }}></div>
        <div className="absolute bottom-0 right-0 w-28 h-28 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(20%,40%)' }}></div>

        <div className="relative flex items-center justify-between px-5 pt-4 pb-2">
          <h1 className="text-white text-lg font-bold">الملف الشخصي</h1>
          <button
            onClick={() => setShowEditModal(true)}
            className="w-9 h-9 rounded-xl flex items-center justify-center cursor-pointer border border-white/30"
            style={{ background: 'rgba(255,255,255,0.15)' }}
          >
            <i className="ri-edit-2-line text-white text-base"></i>
          </button>
        </div>

        {/* Avatar & Name */}
        <div className="flex flex-col items-center pb-12 pt-3 px-5">
          <div className="relative mb-3">
            <div className="w-24 h-24 rounded-3xl overflow-hidden border-4 border-white shadow-xl">
              <img
                src="https://readdy.ai/api/search-image?query=professional%20saudi%20arabian%20young%20woman%20portrait%20with%20hijab%20smiling%20confident%20modern%20style%20clean%20white%20background%20natural%20lighting%20professional%20photography%20high%20quality%20realistic%20close%20up%20face&width=160&height=160&seq=profile_avatar_01&orientation=squarish"
                alt="نورة المطيري"
                className="w-full h-full object-cover object-top"
              />
            </div>
            <button className="absolute -bottom-1 -left-1 w-7 h-7 bg-white rounded-full flex items-center justify-center shadow-md cursor-pointer border border-slate-100">
              <i className="ri-camera-line text-emerald-600 text-sm"></i>
            </button>
          </div>
          <h2 className="text-white text-lg font-bold">{editName}</h2>
          <p className="text-emerald-100 text-xs mt-0.5">{editPhone}</p>
          <div className="flex items-center gap-2 mt-2">
            <span className="px-3 py-1 bg-white/20 text-white rounded-full text-xs font-semibold border border-white/30">
              مشتركة منذ 2024
            </span>
            <span className="px-3 py-1 bg-emerald-400/30 text-white rounded-full text-xs font-semibold border border-white/20">
              ✓ موثّقة
            </span>
          </div>
        </div>

        <div className="absolute bottom-0 left-0 right-0 h-8 rounded-t-[28px]" style={{ background: '#F0F4F8' }}></div>
      </div>

      {/* Stats */}
      <div className="px-4 -mt-1">
        <div className="grid grid-cols-3 gap-3 mb-4">
          {stats.map((s, i) => (
            <div key={i} className="bg-white rounded-2xl p-3 shadow-sm flex flex-col items-center gap-1.5">
              <div className={`w-9 h-9 ${s.bg} rounded-xl flex items-center justify-center`}>
                <i className={`${s.icon} ${s.color} text-lg`}></i>
              </div>
              <p className="text-base font-bold text-slate-900">{s.value}</p>
              <p className="text-[10px] text-slate-400 text-center leading-tight">{s.label}</p>
            </div>
          ))}
        </div>

        {/* Subscription Card */}
        <div className="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-4">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-emerald-50 rounded-xl flex items-center justify-center">
                <i className="ri-shield-check-fill text-emerald-600 text-base"></i>
              </div>
              <span className="text-sm font-bold text-slate-800">الاشتراك الحالي</span>
            </div>
            <span className="flex items-center gap-1 px-2.5 py-1 bg-emerald-50 text-emerald-600 rounded-full text-[10px] font-bold border border-emerald-100">
              <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse inline-block"></span>
              نشط
            </span>
          </div>
          <div className="flex items-center gap-3 p-3 rounded-xl" style={{ background: '#F0F4F8' }}>
            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#d1fae5,#a7f3d0)' }}>
              <i className="ri-bus-2-fill text-emerald-600 text-xl"></i>
            </div>
            <div className="flex-1">
              <p className="text-sm font-bold text-slate-900">باص 14</p>
              <p className="text-xs text-slate-500">حي النزهة ← الجامعة</p>
            </div>
            <div className="text-left">
              <p className="text-xs font-bold text-slate-700">7:30 ص</p>
              <p className="text-[10px] text-slate-400">يومياً</p>
            </div>
          </div>
          <div className="mt-3">
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-xs text-slate-500">مدة الاشتراك</span>
              <span className="text-xs font-bold text-slate-700">22 يوم متبقي</span>
            </div>
            <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
              <div className="h-full rounded-full" style={{ width: '73%', background: 'linear-gradient(90deg,#059669,#10b981)' }}></div>
            </div>
            <p className="text-[10px] text-slate-400 mt-1">ينتهي في 15 فبراير 2025</p>
          </div>
        </div>

        {/* Menu Groups */}
        {menuGroups.map((group, gi) => (
          <div key={gi} className="mb-4">
            <p className="text-xs font-bold text-slate-400 mb-2 px-1">{group.title}</p>
            <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
              {group.items.map((item, ii) => (
                <div key={ii}>
                  <Link href={item.href} className="flex items-center justify-between h-[60px] px-4 cursor-pointer hover:bg-slate-50 transition-colors">
                    <div className="flex items-center gap-3">
                      <div className={`w-9 h-9 ${item.bg} rounded-xl flex items-center justify-center`}>
                        <i className={`${item.icon} ${item.color} text-lg`}></i>
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-slate-800">{item.label}</p>
                        <p className="text-[11px] text-slate-400">{item.sub}</p>
                      </div>
                    </div>
                    <div className="w-5 h-5 flex items-center justify-center">
                      <i className="ri-arrow-left-s-line text-slate-300 text-lg"></i>
                    </div>
                  </Link>
                  {ii < group.items.length - 1 && <div className="h-px bg-slate-100 mx-4"></div>}
                </div>
              ))}
            </div>
          </div>
        ))}

        {/* Logout */}
        <button className="w-full h-12 bg-red-50 border border-red-100 rounded-2xl text-red-500 font-bold text-sm flex items-center justify-center gap-2 cursor-pointer hover:bg-red-100 transition-colors whitespace-nowrap active:scale-95 mb-2">
          <i className="ri-logout-box-r-line text-base"></i>
          تسجيل الخروج
        </button>
      </div>

      {/* Edit Modal */}
      {showEditModal && (
        <div className="fixed inset-0 bg-black/50 flex items-end z-50" onClick={() => setShowEditModal(false)}>
          <div
            className="bg-white rounded-t-3xl w-full p-5"
            style={{ maxWidth: '390px', margin: '0 auto' }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="w-10 h-1 bg-slate-200 rounded-full mx-auto mb-4"></div>
            <div className="flex items-center justify-between mb-5">
              <h3 className="text-base font-bold text-slate-900">تعديل الملف الشخصي</h3>
              <button onClick={() => setShowEditModal(false)} className="w-8 h-8 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
                <i className="ri-close-line text-slate-500 text-lg"></i>
              </button>
            </div>

            <div className="space-y-3">
              <div>
                <label className="text-xs font-semibold text-slate-500 mb-1.5 block">الاسم الكامل</label>
                <div className="flex items-center gap-2 px-3 h-11 bg-slate-50 rounded-xl border border-slate-200">
                  <i className="ri-user-3-line text-slate-400 text-base"></i>
                  <input
                    className="flex-1 bg-transparent text-sm text-slate-800 outline-none text-right"
                    value={editName}
                    onChange={e => setEditName(e.target.value)}
                    placeholder="الاسم الكامل"
                  />
                </div>
              </div>
              <div>
                <label className="text-xs font-semibold text-slate-500 mb-1.5 block">رقم الجوال</label>
                <div className="flex items-center gap-2 px-3 h-11 bg-slate-50 rounded-xl border border-slate-200">
                  <i className="ri-smartphone-line text-slate-400 text-base"></i>
                  <input
                    className="flex-1 bg-transparent text-sm text-slate-800 outline-none text-right"
                    value={editPhone}
                    onChange={e => setEditPhone(e.target.value)}
                    placeholder="رقم الجوال"
                  />
                </div>
              </div>
              <div>
                <label className="text-xs font-semibold text-slate-500 mb-1.5 block">البريد الإلكتروني</label>
                <div className="flex items-center gap-2 px-3 h-11 bg-slate-50 rounded-xl border border-slate-200">
                  <i className="ri-mail-line text-slate-400 text-base"></i>
                  <input
                    className="flex-1 bg-transparent text-sm text-slate-800 outline-none text-right"
                    value={editEmail}
                    onChange={e => setEditEmail(e.target.value)}
                    placeholder="البريد الإلكتروني"
                  />
                </div>
              </div>
              <div>
                <label className="text-xs font-semibold text-slate-500 mb-1.5 block">الموقع</label>
                <div className="flex items-center gap-2 px-3 h-11 bg-slate-50 rounded-xl border border-slate-200">
                  <i className="ri-map-pin-2-line text-slate-400 text-base"></i>
                  <input
                    className="flex-1 bg-transparent text-sm text-slate-800 outline-none text-right"
                    value={editArea}
                    onChange={e => setEditArea(e.target.value)}
                    placeholder="الحي والمدينة"
                  />
                </div>
              </div>
            </div>

            <button
              onClick={handleSave}
              className="w-full h-12 text-white rounded-2xl text-sm font-bold whitespace-nowrap cursor-pointer transition-all active:scale-95 mt-5 flex items-center justify-center gap-2"
              style={{ background: 'linear-gradient(135deg, #059669, #047857)' }}
            >
              {saved ? (
                <>
                  <i className="ri-checkbox-circle-fill text-base"></i>
                  تم الحفظ!
                </>
              ) : (
                <>
                  <i className="ri-save-line text-base"></i>
                  حفظ التغييرات
                </>
              )}
            </button>
          </div>
        </div>
      )}

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