'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { api, apiPaths } from '@/lib/api';
import { getUser, setUser } from '@/lib/auth';
import type { ApiUser } from '@/lib/auth';
import { useAuthGuard } from '@/lib/useAuthGuard';
import {
  normalizeSaudiIban,
  validateBankFields,
  type BankFieldErrors,
  type BankFieldKey,
} from '@/lib/validateBankFields';

export default function EditProfilePage() {
  const { checked, authenticated } = useAuthGuard();
  const router = useRouter();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [cityId, setCityId] = useState<number | ''>('');
  const [bankName, setBankName] = useState('');
  const [bankAccountName, setBankAccountName] = useState('');
  const [bankAccountNumber, setBankAccountNumber] = useState('');
  const [iban, setIban] = useState('');
  const [countryId, setCountryId] = useState<number | null>(null);
  const [cities, setCities] = useState<{ id: number; name?: string }[]>([]);
  const [profileImage, setProfileImage] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [nameError, setNameError] = useState('');
  const [cityError, setCityError] = useState('');
  const [bankErrors, setBankErrors] = useState<BankFieldErrors>({});
  const [showSuccess, setShowSuccess] = useState(false);

  const clearBankFieldError = (key: BankFieldKey) => {
    setBankErrors((prev) => {
      if (!prev[key]) return prev;
      const next = { ...prev };
      delete next[key];
      return next;
    });
  };

  useEffect(() => {
    if (!authenticated) return;
    const localUser = getUser();
    if (localUser) {
      setName(localUser.name || '');
      setEmail(localUser.email || '');
      if (localUser.image) setImagePreview(localUser.image);
      if (localUser.city?.id) setCityId(localUser.city.id);
      const b = localUser.bank_account;
      setBankName(b?.bank_name || '');
      setBankAccountName(b?.bank_account_name || '');
      setBankAccountNumber(b?.bank_account_number || '');
      setIban(b?.iban || '');
    }
    api.get<ApiUser>(apiPaths.user.profile).then((res) => {
      if (res.key === 'success' && res.data) {
        const u = res.data as ApiUser;
        setName(u.name || '');
        setEmail(u.email || '');
        if (u.image) setImagePreview(u.image);
        if (u.city?.id) setCityId(u.city.id);
        setCountryId(u.country?.id ?? null);
        const b = u.bank_account;
        setBankName(b?.bank_name || '');
        setBankAccountName(b?.bank_account_name || '');
        setBankAccountNumber(b?.bank_account_number || '');
        setIban(b?.iban || '');
      }
      setLoading(false);
    });
  }, [authenticated]);

  useEffect(() => {
    if (!countryId) return;
    api.get<{ id: number; name?: string }[]>(apiPaths.user.cities(String(countryId))).then((res) => {
      if (res.key === 'success' && res.data && Array.isArray(res.data)) {
        setCities(res.data as { id: number; name?: string }[]);
      }
    });
  }, [countryId]);

  if (!checked) return null;

  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setProfileImage(e.target.files[0]);
      const reader = new FileReader();
      reader.onloadend = () => setImagePreview(reader.result as string);
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  const handleSave = async () => {
    setError('');
    setNameError('');
    setCityError('');
    if (!name.trim()) {
      setNameError('أدخل الاسم');
      return;
    }
    if (cityId === '') {
      setCityError('اختر المدينة');
      return;
    }

    const bankCheck = validateBankFields({
      bank_name: bankName,
      bank_account_name: bankAccountName,
      bank_account_number: bankAccountNumber,
      iban,
    });
    if (!bankCheck.ok) {
      setBankErrors(bankCheck.errors);
      return;
    }
    setBankErrors({});

    setSaving(true);
    try {
      const basePayload: Record<string, string | number> = {
        name: name.trim(),
        city_id: Number(cityId),
        bank_name: bankName.trim(),
        bank_account_name: bankAccountName.trim(),
        bank_account_number: bankAccountNumber.trim(),
        iban: normalizeSaudiIban(iban),
      };

      if (profileImage) {
        const formData = new FormData();
        formData.append('_method', 'PUT');
        formData.append('name', String(basePayload.name));
        formData.append('city_id', String(basePayload.city_id));
        formData.append('bank_name', String(basePayload.bank_name));
        formData.append('bank_account_name', String(basePayload.bank_account_name));
        formData.append('bank_account_number', String(basePayload.bank_account_number));
        formData.append('iban', String(basePayload.iban));
        formData.append('image', profileImage);
        const res = await api.postForm<{ user?: ApiUser }>(apiPaths.user.profileUpdate, formData);
        if (res.key === 'success') {
          const fresh = await api.get<ApiUser>(apiPaths.user.profile);
          if (fresh.key === 'success' && fresh.data) setUser(fresh.data as ApiUser);
          setShowSuccess(true);
          setTimeout(() => {
            setShowSuccess(false);
            router.push('/profile');
          }, 2000);
        } else {
          setError(res.msg || 'حدث خطأ، حاول مرة أخرى');
        }
      } else {
        const res = await api.put<ApiUser>(apiPaths.user.profileUpdate, basePayload);
        if (res.key === 'success') {
          const fresh = await api.get<ApiUser>(apiPaths.user.profile);
          if (fresh.key === 'success' && fresh.data) setUser(fresh.data as ApiUser);
          setShowSuccess(true);
          setTimeout(() => {
            setShowSuccess(false);
            router.push('/profile');
          }, 2000);
        } else {
          setError(res.msg || 'حدث خطأ، حاول مرة أخرى');
        }
      }
    } catch {
      setError('تعذر الاتصال بالخادم');
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-gray-50 flex items-center justify-center">
        <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  return (
    <div dir="rtl" className="flex flex-col flex-1 bg-gradient-to-br from-blue-50 via-white to-gray-50">
      {showSuccess && (
        <div className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-50 border border-green-200 text-green-800 px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2">
          <i className="ri-check-line text-xl"></i>
          <span className="font-semibold whitespace-nowrap">تم حفظ التعديلات بنجاح</span>
        </div>
      )}

      <main className="max-w-2xl mx-auto px-6 py-12">
        <div className="flex items-center gap-4 mb-8">
          <Link
            href="/profile"
            className="w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
          >
            <i className="ri-arrow-right-line text-xl text-gray-700"></i>
          </Link>
          <h1 className="text-3xl font-bold text-gray-900">تعديل الملف الشخصي</h1>
        </div>

        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
          <div className="space-y-6">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-3">الصورة الشخصية</label>
              <div className="flex items-center gap-6">
                <img
                  src={imagePreview || 'https://readdy.ai/api/search-image?query=professional%20portrait%20clean%20white%20background&width=120&height=120&seq=profile2&orientation=squarish'}
                  alt="الصورة الشخصية"
                  className="w-24 h-24 rounded-full object-cover border-4 border-blue-100"
                />
                <label className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap font-semibold">
                  <i className="ri-upload-2-line w-5 h-5 flex items-center justify-center"></i>
                  <span>تغيير الصورة</span>
                  <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
                </label>
              </div>
              {profileImage && (
                <p className="text-sm text-green-600 mt-2">تم اختيار: {profileImage.name}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">الاسم</label>
              <input
                type="text"
                value={name}
                onChange={(e) => {
                  setName(e.target.value);
                  setNameError('');
                }}
                className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  nameError ? 'border-red-500 ring-1 ring-red-500/20' : 'border-gray-200'
                }`}
                aria-invalid={!!nameError}
              />
              {nameError ? <p className="text-red-600 text-sm mt-1">{nameError}</p> : null}
            </div>

            {cities.length > 0 && (
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">المدينة</label>
                <select
                  value={cityId === '' ? '' : String(cityId)}
                  onChange={(e) => {
                    setCityId(e.target.value ? Number(e.target.value) : '');
                    setCityError('');
                  }}
                  className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white ${
                    cityError ? 'border-red-500 ring-1 ring-red-500/20' : 'border-gray-200'
                  }`}
                  aria-invalid={!!cityError}
                >
                  <option value="">— اختر المدينة —</option>
                  {cities.map((c) => (
                    <option key={c.id} value={String(c.id)}>
                      {c.name ?? c.id}
                    </option>
                  ))}
                </select>
                {cityError ? <p className="text-red-600 text-sm mt-1">{cityError}</p> : null}
              </div>
            )}

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">البريد الإلكتروني</label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                readOnly
                title="يتم تغيير البريد من إعدادات الحساب عند توفر ذلك"
              />
              <p className="text-xs text-gray-500 mt-1">لتغيير البريد استخدم مسار التحقق من التطبيق أو الإعدادات.</p>
            </div>

            <div className="border-t border-gray-100 pt-6">
              <h2 className="text-lg font-bold text-gray-900 mb-4">البيانات البنكية</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">اسم البنك</label>
                  <input
                    type="text"
                    value={bankName}
                    onChange={(e) => {
                      setBankName(e.target.value);
                      clearBankFieldError('bank_name');
                    }}
                    maxLength={191}
                    className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${bankErrors.bank_name ? 'border-red-400' : 'border-gray-200'}`}
                    placeholder="اختياري"
                  />
                  {bankErrors.bank_name && <p className="text-red-600 text-sm mt-1">{bankErrors.bank_name}</p>}
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">اسم صاحب الحساب</label>
                  <input
                    type="text"
                    value={bankAccountName}
                    onChange={(e) => {
                      setBankAccountName(e.target.value);
                      clearBankFieldError('bank_account_name');
                    }}
                    maxLength={191}
                    className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${bankErrors.bank_account_name ? 'border-red-400' : 'border-gray-200'}`}
                    placeholder="اختياري"
                  />
                  {bankErrors.bank_account_name && (
                    <p className="text-red-600 text-sm mt-1">{bankErrors.bank_account_name}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">رقم الحساب البنكي</label>
                  <input
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]*"
                    autoComplete="off"
                    value={bankAccountNumber}
                    onChange={(e) => {
                      setBankAccountNumber(e.target.value.replace(/\D/g, ''));
                      clearBankFieldError('bank_account_number');
                    }}
                    dir="ltr"
                    maxLength={30}
                    className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono ${bankErrors.bank_account_number ? 'border-red-500 ring-1 ring-red-500/20' : 'border-gray-200'}`}
                    placeholder="10–30 رقماً إن وُجد"
                  />
                  {bankErrors.bank_account_number && (
                    <p className="text-red-600 text-sm mt-1">{bankErrors.bank_account_number}</p>
                  )}
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">الآيبان (IBAN)</label>
                  <input
                    type="text"
                    value={iban}
                    onChange={(e) => {
                      setIban(e.target.value);
                      clearBankFieldError('iban');
                    }}
                    dir="ltr"
                    maxLength={24}
                    autoComplete="off"
                    className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono ${bankErrors.iban ? 'border-red-400' : 'border-gray-200'}`}
                    placeholder="SA + 22 رقماً"
                  />
                  {bankErrors.iban && <p className="text-red-600 text-sm mt-1">{bankErrors.iban}</p>}
                  <p className="text-xs text-gray-500 mt-1">صيغة سعودية: SA متبوع بـ 22 رقماً (24 خانة).</p>
                </div>
              </div>
            </div>

            {error && <p className="text-red-600 text-sm">{error}</p>}

            <button
              type="button"
              onClick={() => void handleSave()}
              disabled={saving}
              className="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap font-semibold disabled:opacity-70"
            >
              {saving ? 'جاري الحفظ...' : 'حفظ التعديلات'}
            </button>
          </div>
        </div>
      </main>
    </div>
  );
}