import { useState } from 'react'
import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { Eye, EyeOff, Lock, Smartphone } from 'lucide-react'
import { useAuth } from '../../context/AuthContext'
import { ApiError } from '../../lib/api'
import { toE164CellNumber } from '../../lib/cellNumber'
import { syncGuestCartToServer } from '../../services/syncGuestCart'
import styles from './CheckoutSteps.module.css'

export function CheckoutLoginStep() {
  const navigate = useNavigate()
  const location = useLocation()
  const [searchParams] = useSearchParams()
  const { login } = useAuth()
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)

  function resolveRedirectPath() {
    const fromQuery = searchParams.get('redirect')
    if (fromQuery && fromQuery.startsWith('/') && !fromQuery.startsWith('//')) {
      return fromQuery
    }
    const fromState = (location.state as { from?: string } | null)?.from
    if (fromState && fromState.startsWith('/') && !fromState.startsWith('//')) {
      return fromState
    }
    return '/checkout/delivery'
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')
    setIsSubmitting(true)

    try {
      const cellNumber = toE164CellNumber(phone)
      await login(cellNumber, password)
      try {
        await syncGuestCartToServer()
      } catch {
        // Cart sync is best-effort; delivery/payment will retry
      }
      navigate(resolveRedirectPath(), { replace: true })
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'ورود ممکن نشد.')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className={styles.stepContent}>
      <div>
        <h1 className={styles.stepTitle}>برای ادامه وارد شوید</h1>
        <p className={styles.stepDesc}>
          سبد خرید شما ذخیره شده است. برای تعیین ارسال و پرداخت وارد شوید.
        </p>
      </div>

      <form className={styles.loginForm} onSubmit={(e) => void handleSubmit(e)}>
        {error && (
          <div className={styles.error} role="alert">
            {error}
          </div>
        )}

        <div className={styles.field}>
          <label htmlFor="checkout-phone">شماره موبایل</label>
          <div className={styles.inputWrap}>
            <Smartphone size={18} className={styles.inputIcon} />
            <input
              id="checkout-phone"
              type="tel"
              inputMode="tel"
              placeholder="09122222222"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
              disabled={isSubmitting}
              dir="ltr"
            />
          </div>
        </div>

        <div className={styles.field}>
          <label htmlFor="checkout-password">رمز عبور</label>
          <div className={styles.inputWrap}>
            <Lock size={18} className={styles.inputIcon} />
            <input
              id="checkout-password"
              type={showPassword ? 'text' : 'password'}
              placeholder="رمز عبور خود را وارد کنید"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              minLength={8}
              disabled={isSubmitting}
            />
            <button
              type="button"
              className={styles.togglePassword}
              onClick={() => setShowPassword((v) => !v)}
              aria-label={showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'}
            >
              {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
            </button>
          </div>
        </div>

        <button type="submit" className={styles.primaryBtn} disabled={isSubmitting}>
          {isSubmitting ? 'در حال ورود...' : 'ادامه به ارسال'}
        </button>
      </form>

      <p className={styles.footerLink}>
        حساب کاربری ندارید؟{' '}
        <Link to="/login?redirect=/checkout/cart">ثبت‌نام کنید</Link>
      </p>
    </div>
  )
}
