'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAuthStore } from '@/store/authStore';

export default function CaptainLoginScreen() {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const router = useRouter();
  const login = useAuthStore((state) => state.login);

  const isFormValid = phone && password;

  const handleLogin = () => {
    if (isFormValid) {
      login('captain', {
        phone,
        name: 'الكابتن',
      });
      router.push('/captain/home');
    }
  };

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

      <div className="px-6 pt-20 pb-8">
        <div className="flex flex-col items-center mb-8">
          <div className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg mb-4" style={{ background: '#1E3A8A' }}>
            <i className="ri-steering-2-line text-white text-2xl"></i>
          </div>
          <h1 className="text-[28px] font-bold text-slate-900 mb-2">أهلاً كابتن 👋</h1>
          <p className="text-[15px] text-slate-500">سجّل دخولك لبدء رحلاتك</p>
        </div>

        <div className="bg-white rounded-3xl p-6 shadow-sm">
          <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="tel"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  placeholder="5XXXXXXXX"
                  className="w-full h-[52px] bg-slate-50 border border-slate-200 rounded-xl pr-24 pl-4 text-slate-900 text-sm focus:outline-none transition-all"
                  onFocus={e => e.target.style.boxShadow = '0 0 0 2px #C7D2FE'}
                  onBlur={e => e.target.style.boxShadow = 'none'}
                  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-slate-50 border border-slate-200 rounded-xl px-4 text-slate-900 text-sm focus:outline-none transition-all"
                  onFocus={e => e.target.style.boxShadow = '0 0 0 2px #C7D2FE'}
                  onBlur={e => e.target.style.boxShadow = 'none'}
                />
                <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 className="text-left mt-2">
                <Link href="/captain/forgot-password" className="text-[13px] font-semibold cursor-pointer" style={{ color: '#1E3A8A' }}>
                  هل نسيت كلمة المرور؟
                </Link>
              </div>
            </div>
          </div>

          <button
            onClick={handleLogin}
            disabled={!isFormValid}
            className="w-full h-[52px] rounded-xl font-semibold text-base transition-all whitespace-nowrap mt-6"
            style={{
              background: isFormValid ? '#1E3A8A' : '#E0E7FF',
              color: isFormValid ? 'white' : '#A5B4FC',
              cursor: isFormValid ? 'pointer' : 'not-allowed',
            }}
          >
            تسجيل الدخول
          </button>
        </div>

        <p className="text-center text-sm text-slate-600 mt-6">
          مالكش حساب؟{' '}
          <Link href="/captain/register" className="font-semibold cursor-pointer" style={{ color: '#1E3A8A' }}>
            سجّل الآن
          </Link>
        </p>
      </div>

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