'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function RegisterScreen() {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [location, setLocation] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [agreedToTerms, setAgreedToTerms] = useState(false);
  const [profileImage, setProfileImage] = useState<string | null>(null);
  const router = useRouter();

  const passwordsMatch = password && confirmPassword && password === confirmPassword;
  const isFormValid = name && phone && password && confirmPassword && passwordsMatch && location && agreedToTerms;

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

  const handleRegister = () => {
    if (isFormValid) {
      router.push('/mobile/otp');
    }
  };

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

      <div className="h-14 bg-white shadow-sm flex items-center justify-center px-4 relative">
        <button 
          onClick={() => router.back()}
          className="absolute right-4 w-10 h-10 flex items-center justify-center cursor-pointer"
        >
          <i className="ri-arrow-right-line text-slate-900 text-xl"></i>
        </button>
        <h1 className="text-lg font-bold text-slate-900">
          إنشاء حساب
        </h1>
      </div>

      <div className="px-4 py-6 pb-24">
        <div className="flex flex-col items-center mb-6">
          <div className="relative">
            <label htmlFor="profile-upload" className="cursor-pointer">
              <div className="w-20 h-20 rounded-full bg-slate-50 border-2 border-dashed border-slate-300 flex items-center justify-center overflow-hidden">
                {profileImage ? (
                  <img src={profileImage} alt="Profile" className="w-full h-full object-cover" />
                ) : (
                  <i className="ri-camera-line text-slate-400 text-[28px]"></i>
                )}
              </div>
              <div className="absolute bottom-0 left-0 w-6 h-6 bg-emerald-600 rounded-full flex items-center justify-center shadow-md">
                <i className="ri-add-line text-white text-xs"></i>
              </div>
            </label>
            <input 
              id="profile-upload"
              type="file" 
              accept="image/*"
              onChange={handleImageUpload}
              className="hidden"
            />
          </div>
          <p className="text-xs text-slate-600 mt-2">
            إضافة صورة (اختياري)
          </p>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-[13px] font-semibold text-slate-600 mb-2 text-right">
              الاسم الكامل *
            </label>
            <div className="relative">
              <input 
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="أدخلي اسمك الكامل"
                className="w-full h-[52px] bg-white border border-slate-200 rounded-xl pr-12 pl-4 text-slate-900 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center">
                <i className="ri-user-line text-slate-400 text-lg"></i>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-[13px] font-semibold text-slate-600 mb-2 text-right">
              رقم الجوال *
            </label>
            <div className="relative">
              <input 
                type="tel"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="5XXXXXXXX"
                className="w-full h-[52px] bg-white border border-slate-200 rounded-xl pr-24 pl-4 text-slate-900 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
                dir="ltr"
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2 text-slate-600 text-sm">
                <span>🇸🇦</span>
                <span>+966</span>
              </div>
            </div>
          </div>

          <div>
            <label className="block text-[13px] font-semibold text-slate-600 mb-2 text-right">
              كلمة المرور *
            </label>
            <div className="relative">
              <input 
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                className="w-full h-[52px] bg-white border border-slate-200 rounded-xl px-4 text-slate-900 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all"
              />
              <button 
                onClick={() => setShowPassword(!showPassword)}
                className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 cursor-pointer w-5 h-5 flex items-center justify-center"
              >
                <i className={`${showPassword ? 'ri-eye-line' : 'ri-eye-off-line'} text-lg`}></i>
              </button>
            </div>
          </div>

          <div>
            <label className="block text-[13px] font-semibold text-slate-600 mb-2 text-right">
              تأكيد كلمة المرور *
            </label>
            <div className="relative">
              <input 
                type={showConfirmPassword ? 'text' : 'password'}
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                placeholder="••••••••"
                className={`w-full h-[52px] bg-white border rounded-xl px-4 pr-10 text-slate-900 text-sm focus:outline-none focus:ring-2 transition-all ${
                  passwordsMatch 
                    ? 'border-emerald-500 focus:ring-emerald-500' 
                    : 'border-slate-200 focus:ring-emerald-500'
                }`}
              />
              <button 
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 cursor-pointer w-5 h-5 flex items-center justify-center"
              >
                <i className={`${showConfirmPassword ? 'ri-eye-line' : 'ri-eye-off-line'} text-lg`}></i>
              </button>
              {passwordsMatch && (
                <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center">
                  <i className="ri-checkbox-circle-fill text-emerald-500 text-lg"></i>
                </div>
              )}
            </div>
          </div>

          <div>
            <label className="block text-[13px] font-semibold text-slate-600 mb-2 text-right">
              الموقع الجغرافي *
            </label>
            <div className="relative">
              <input 
                type="text"
                value={location}
                placeholder="حددي موقعك على الخريطة"
                readOnly
                className="w-full h-[52px] bg-slate-50 border border-slate-200 rounded-xl pr-12 pl-20 text-slate-900 text-sm cursor-pointer"
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center">
                <i className="ri-map-pin-line text-emerald-600 text-lg"></i>
              </div>
              <button 
                onClick={() => setLocation('حي النزهة، الرياض')}
                className="absolute left-3 top-1/2 -translate-y-1/2 px-3 py-1 bg-emerald-50 text-emerald-600 rounded-full text-xs font-semibold cursor-pointer whitespace-nowrap"
              >
                تحديد
              </button>
            </div>
          </div>

          <div className="flex items-start gap-3 pt-2">
            <label className="flex items-start gap-3 cursor-pointer flex-1">
              <div className="relative flex-shrink-0 mt-0.5">
                <input 
                  type="checkbox"
                  checked={agreedToTerms}
                  onChange={(e) => setAgreedToTerms(e.target.checked)}
                  className="peer sr-only"
                />
                <div className="w-5 h-5 border-2 border-slate-300 rounded bg-white peer-checked:bg-emerald-600 peer-checked:border-emerald-600 transition-all flex items-center justify-center">
                  {agreedToTerms && (
                    <i className="ri-check-line text-white text-xs"></i>
                  )}
                </div>
              </div>
              <span className="text-[13px] text-slate-600 text-right leading-relaxed">
                أوافق على{' '}
                <Link href="#" className="text-emerald-600 font-semibold cursor-pointer">
                  الشروط والأحكام
                </Link>
              </span>
            </label>
          </div>
        </div>

        <button 
          onClick={handleRegister}
          disabled={!isFormValid}
          className={`w-full h-[52px] rounded-xl font-semibold text-base transition-all whitespace-nowrap mt-8 ${
            isFormValid
              ? 'bg-emerald-600 text-white hover:bg-emerald-700 active:scale-95 cursor-pointer'
              : 'bg-slate-200 text-slate-400 cursor-not-allowed'
          }`}
        >
          إنشاء الحساب
        </button>
      </div>

      <div className="h-[34px]"></div>
    </div>
  );
}