import { useState, type FormEvent } from 'react'
import { Link, Navigate, useLocation, useNavigate } from 'react-router-dom'
import { AlertCircle, ArrowRight, Eye, EyeOff, Lock, Mail } from 'lucide-react'
import { AuthLayout } from '@/components/auth/AuthLayout'
import { useAuth } from '@/auth/useAuth'
import { useDeviceCheckAccess } from '@/hooks/useDeviceCheckAccess'
import { usePublicSettings } from '@/hooks/usePublicSettings'
import { ApiError } from '@/api/client'

/** Экран входа (см. design/mockups/auth.html, блок «вход в аккаунт»). */
export function LoginPage() {
  const { login, status } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [pending, setPending] = useState(false)

  // Проверка устройств на входе (сессия 33) — отключаемый модуль, дефолт
  // выключен (см. `instance_settings.device_check`). `enabled=false` держит
  // хук полностью инертным — старое поведение сохраняется как есть.
  //
  // На LoginPage — без видимого превью и кнопок (решение оператора,
  // сессия 33: LoginPage ведёт в лобби, а не в конкретную конференцию,
  // применить выбор «войти с камерой» в моменте физически некуда, а
  // кнопки без действия только путают). Сам ранний запрос доступа
  // остаётся — это по-прежнему пре-авторизация разрешения, чтобы позже,
  // уже в конференции, при включении камеры/микрофона не всплывал системный
  // диалог. Освобождение потока — через `release()` внутри самого хука при
  // размонтировании страницы (успешный логин уводит на другой маршрут).
  const { data: publicSettings } = usePublicSettings()
  const deviceCheck = useDeviceCheckAccess(publicSettings?.device_check_enabled ?? false)

  // Уже вошли — незачем показывать форму логина повторно.
  if (status === 'authenticated') {
    return <Navigate to="/lobby" replace />
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError(null)
    setPending(true)
    try {
      await login(email, password)
      const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname ?? '/lobby'
      navigate(from, { replace: true })
    } catch (err) {
      if (err instanceof ApiError && err.status === 403) {
        setError('Подтвердите почту — мы отправили письмо со ссылкой при регистрации')
      } else if (err instanceof ApiError && (err.status === 401 || err.status === 400)) {
        setError('Неверный email или пароль')
      } else {
        setError('Не удалось войти. Попробуйте ещё раз позже')
      }
    } finally {
      setPending(false)
    }
  }

  return (
    <AuthLayout>
      <section className="screen-block">
        <div className="tabs" role="tablist" aria-label="Способ авторизации">
          <span className="tab is-active" role="tab" aria-selected="true">
            Вход
          </span>
          <Link to="/register" className="tab" role="tab" aria-selected="false">
            Регистрация
          </Link>
          <Link to="/join" className="tab" role="tab" aria-selected="false">
            <span className="label-full">Зайти как гость</span>
            <span className="label-short">Гость</span>
          </Link>
        </div>

        <form
          onSubmit={handleSubmit}
          noValidate
          onPointerDown={deviceCheck.triggerOnGesture}
          onKeyDown={deviceCheck.triggerOnGesture}
        >
          <div className="field">
            <label htmlFor="login-email">Рабочая почта</label>
            <div className="input-wrap">
              <Mail className="lucide field-icon" aria-hidden="true" />
              <input
                id="login-email"
                type="email"
                autoComplete="email"
                required
                placeholder="you@company.ru"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
          </div>

          <div className={`field${error ? ' has-error' : ''}`}>
            <label htmlFor="login-pass">Пароль</label>
            <div className="input-wrap">
              <Lock className="lucide field-icon" aria-hidden="true" />
              <input
                id="login-pass"
                type={showPassword ? 'text' : 'password'}
                autoComplete="current-password"
                required
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <button
                type="button"
                className="toggle-eye"
                aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
                onClick={() => setShowPassword((v) => !v)}
              >
                {showPassword ? <EyeOff className="lucide" /> : <Eye className="lucide" />}
              </button>
            </div>
            {error && (
              <p className="error-msg">
                <AlertCircle className="lucide" style={{ width: 16, height: 16 }} aria-hidden="true" />
                {error}
              </p>
            )}
          </div>

          <div className="row-between">
            <label className="checkbox-row">
              <input type="checkbox" defaultChecked /> Запомнить меня
            </label>
          </div>

          <button type="submit" className="btn btn-primary btn-block btn-lg" disabled={pending}>
            {pending ? 'Входим…' : (
              <>
                Войти <ArrowRight className="lucide" aria-hidden="true" />
              </>
            )}
          </button>
        </form>
      </section>
    </AuthLayout>
  )
}
