'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { getUser, logout as authLogout, setUser } from '@/lib/auth';
import { api, apiPaths } from '@/lib/api';
import type { ApiUser } from '@/lib/auth';
import { useAuthGuard } from '@/lib/useAuthGuard';
import { useI18n } from '@/lib/i18n/context';

export default function ProfilePage() {
  const { checked, authenticated } = useAuthGuard('/login', { requireApproval: false });
  const router = useRouter();
  const { t, isRtl } = useI18n();
  const [user, setUserState] = useState<ApiUser | null>(null);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState(false);

  const chevron = isRtl ? 'ri-arrow-left-s-line' : 'ri-arrow-right-s-line';

  const fetchProfile = useCallback(async () => {
    setLoadError(false);
    setLoading(true);
    try {
      const res = await api.get<ApiUser>(apiPaths.user.profile);
      if (res.key === 'success' && res.data) {
        const u = res.data as ApiUser;
        setUserState(u);
        setUser(u);
      } else {
        setLoadError(true);
        setUserState(getUser());
      }
    } catch {
      setLoadError(true);
      setUserState(getUser());
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!authenticated) return;
    setUserState(getUser());
    void fetchProfile();
  }, [authenticated, fetchProfile]);

  const handleLogout = async () => {
    await authLogout();
    router.push('/login');
  };

  if (!checked) return null;

  const menuRowClass =
    'bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-5 hover:border-sky-200/80 transition-colors flex items-center justify-between min-h-[56px] group';

  return (
    <div dir={isRtl ? 'rtl' : 'ltr'} className="flex flex-col flex-1">
      <main className="max-w-4xl mx-auto px-4 sm:px-6 py-6 sm:py-8 flex-1 w-full">
        <h1 className="sr-only">{t('profilePage.title')}</h1>

        {loading && !user ? (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-10 flex flex-col items-center justify-center gap-4 min-h-[240px]">
            <div
              className="w-12 h-12 border-4 border-[#1e3a5f] border-t-transparent rounded-full animate-spin"
              aria-hidden
            />
            <p className="text-gray-600 text-sm">{t('profilePage.loading')}</p>
          </div>
        ) : loadError && !user ? (
          <div className="bg-white rounded-xl shadow-sm border border-red-100 p-8 text-center">
            <i className="ri-error-warning-line text-4xl text-red-500 mb-3 block" aria-hidden />
            <p className="text-gray-800 font-medium mb-4">{t('profilePage.loadError')}</p>
            <button
              type="button"
              onClick={() => void fetchProfile()}
              className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1e3a5f] text-white rounded-xl hover:bg-[#1a3254] font-semibold text-sm"
            >
              <i className="ri-refresh-line text-lg" />
              {t('profilePage.retry')}
            </button>
          </div>
        ) : (
          <>
            {user?.is_approved === false && (
              <div
                className="mb-5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 flex gap-3 items-start"
                role="status"
              >
                <i className="ri-time-line text-xl flex-shrink-0 mt-0.5" aria-hidden />
                <span>{t('profilePage.approvalPending')}</span>
              </div>
            )}

            {/* بطاقة الرأس — مثل اللقطة */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-4 sm:mb-5">
              <div className="p-5 sm:p-6">
                <div className="flex flex-row items-start gap-4 sm:gap-6">
                  <div className="flex-shrink-0">
                    <img
                      src={
                        user?.image ||
                        'https://readdy.ai/api/search-image?query=professional%20middle%20eastern%20businessman%20portrait%20clean%20white%20background%20modern%20studio%20photography%20high%20quality%20professional%20headshot%20confident%20smile%20business%20attire&width=120&height=120&seq=profile1&orientation=squarish'
                      }
                      alt={t('profilePage.avatarAlt')}
                      className="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-2 border-gray-100 shadow-sm"
                    />
                  </div>

                  <div className="flex-1 min-w-0 text-start">
                    <h2 className="text-lg sm:text-xl font-bold text-gray-900 truncate mb-3">
                      {user?.name || t('profilePage.defaultName')}
                    </h2>

                    <ul className="space-y-2.5 text-gray-700 text-sm sm:text-base">
                      {(user?.full_phone || user?.phone) && (
                        <li className="flex items-center gap-2 justify-start">
                          <i className="ri-phone-line w-5 h-5 flex-shrink-0 text-gray-500" aria-hidden />
                          <span dir="ltr" className="truncate">
                            {user?.full_phone || user?.phone}
                          </span>
                        </li>
                      )}
                      {user?.email && (
                        <li className="flex items-center gap-2 justify-start">
                          <i className="ri-mail-line w-5 h-5 flex-shrink-0 text-gray-500" aria-hidden />
                          <span className="truncate">{user.email}</span>
                        </li>
                      )}
                      {(user?.city?.name || user?.country?.name) && (
                        <li className="flex items-center gap-2 justify-start">
                          <i className="ri-map-pin-line w-5 h-5 flex-shrink-0 text-gray-500" aria-hidden />
                          <span>
                            {[user?.city?.name, user?.country?.name].filter(Boolean).join(' — ')}
                          </span>
                        </li>
                      )}
                    </ul>

                    {loadError && user && (
                      <p className="mt-3 text-xs text-amber-800 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2">
                        {t('profilePage.loadError')}
                        <button
                          type="button"
                          onClick={() => void fetchProfile()}
                          className="ms-2 underline font-semibold hover:text-amber-950"
                        >
                          {t('profilePage.retry')}
                        </button>
                      </p>
                    )}
                  </div>
                </div>

                <Link
                  href="/profile/edit"
                  className="mt-6 w-full min-h-[48px] bg-[#1e3a5f] text-white py-3.5 rounded-xl hover:bg-[#1a3254] transition-colors font-semibold flex items-center justify-center gap-2 shadow-sm"
                >
                  <i className="ri-edit-line text-lg" aria-hidden />
                  <span>{t('profilePage.editProfile')}</span>
                </Link>
              </div>
            </div>

            <nav className="space-y-3" aria-label={t('profilePage.title')}>
              <Link href="/profile/wallet" className={menuRowClass}>
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-sky-100 flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200/80 transition-colors">
                    <i className="ri-wallet-3-line text-xl sm:text-2xl text-sky-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-gray-900 truncate">{t('profilePage.wallet')}</span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </Link>

              <Link href="/orders" className={menuRowClass}>
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-emerald-100 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-200/80 transition-colors">
                    <i className="ri-store-2-line text-xl sm:text-2xl text-emerald-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-gray-900 truncate">{t('profilePage.myOrders')}</span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </Link>

              <Link href="/profile/delivery-settings" className={menuRowClass}>
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-violet-100 flex items-center justify-center flex-shrink-0 group-hover:bg-violet-200/80 transition-colors">
                    <i className="ri-truck-line text-xl sm:text-2xl text-violet-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-gray-900 truncate">
                    {t('profilePage.deliverySettings')}
                  </span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </Link>

              <Link href="/support-tickets" className={menuRowClass}>
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-orange-100 flex items-center justify-center flex-shrink-0 group-hover:bg-orange-200/80 transition-colors">
                    <i className="ri-customer-service-2-line text-xl sm:text-2xl text-orange-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-gray-900 truncate">{t('profilePage.supportTickets')}</span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </Link>

              <Link href="/profile/settings" className={menuRowClass}>
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-200/80 transition-colors">
                    <i className="ri-settings-3-line text-xl sm:text-2xl text-amber-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-gray-900 truncate">{t('profilePage.settings')}</span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </Link>

              <button
                type="button"
                onClick={() => void handleLogout()}
                className={`${menuRowClass} w-full hover:border-red-200 hover:bg-red-50/40`}
              >
                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
                  <div className="w-11 h-11 sm:w-12 sm:h-12 rounded-xl bg-red-100 flex items-center justify-center flex-shrink-0 group-hover:bg-red-200/80 transition-colors">
                    <i className="ri-logout-box-r-line text-xl sm:text-2xl text-red-600" aria-hidden />
                  </div>
                  <span className="font-semibold text-red-600">{t('profilePage.logout')}</span>
                </div>
                <i className={`${chevron} text-xl text-gray-400 flex-shrink-0`} aria-hidden />
              </button>
            </nav>
          </>
        )}
      </main>
    </div>
  );
}