'use client'

import Link from 'next/link'
import { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useDashboardI18n } from '@/components/I18nProvider'
import { adminUrl, marketplaceUrl } from '@/lib/urls'
import { API_BASE, EMPLOYEE_TOKEN_KEY } from '@/lib/api'

export default function SignInPage() {
  const { language } = useDashboardI18n()
  const searchParams = useSearchParams()
  const portal = searchParams.get('portal') === 'admin' ? 'admin' : 'workspace'
  const dict = {
    en: {
      workspace: 'Sign in',
      admin: 'Admin sign in',
      subtitle: 'Enter your credentials to access your workspace.',
      adminSubtitle: 'Use the same sign-in page for platform admin access.',
      email: 'Email',
      password: 'Password',
      signIn: 'Sign in',
      signingIn: 'Signing in…',
      verify: 'Verify code',
      verifying: 'Verifying…',
      authCode: 'Authentication code',
      enterCode: 'Enter the 6-digit code from your authenticator app.',
      back: 'Back to credentials',
      forgotPassword: 'Forgot your password?',
      newAccount: 'New company account?',
      createWorkspace: 'Create your workspace',
      invalidCredentials: 'Invalid email or password.',
      passwordNotSet: 'No password set yet. Check your invitation email or use "Forgot your password?"',
      unexpectedError: 'Something went wrong. Please try again.',
    },
    fr: {
      workspace: 'Connexion',
      admin: 'Connexion admin',
      subtitle: 'Saisissez vos identifiants pour accéder à votre espace.',
      adminSubtitle: 'Utilisez cette page unique pour accéder à la plateforme admin.',
      email: 'Email',
      password: 'Mot de passe',
      signIn: 'Connexion',
      signingIn: 'Connexion…',
      verify: 'Vérifier le code',
      verifying: 'Vérification…',
      authCode: 'Code d’authentification',
      enterCode: 'Entrez le code à 6 chiffres de votre application d’authentification.',
      back: 'Retour aux identifiants',
      forgotPassword: 'Mot de passe oublié ?',
      newAccount: 'Nouveau compte entreprise ?',
      createWorkspace: 'Créer votre espace',
      invalidCredentials: 'Email ou mot de passe invalide.',
      passwordNotSet: 'Aucun mot de passe défini. Vérifiez votre e-mail d\'invitation ou utilisez « Mot de passe oublié ? »',
      unexpectedError: 'Une erreur est survenue. Veuillez réessayer.',
    },
    ar: {
      workspace: 'تسجيل الدخول',
      admin: 'دخول الإدارة',
      subtitle: 'أدخل بياناتك للوصول إلى مساحة العمل.',
      adminSubtitle: 'استخدم صفحة الدخول نفسها للوصول إلى لوحة الإدارة.',
      email: 'البريد الإلكتروني',
      password: 'كلمة المرور',
      signIn: 'تسجيل الدخول',
      signingIn: 'جارٍ تسجيل الدخول…',
      verify: 'تحقق من الرمز',
      verifying: 'جارٍ التحقق…',
      authCode: 'رمز المصادقة',
      enterCode: 'أدخل الرمز المكون من 6 أرقام من تطبيق المصادقة.',
      back: 'العودة إلى بيانات الدخول',
      forgotPassword: 'نسيت كلمة المرور؟',
      newAccount: 'حساب شركة جديد؟',
      createWorkspace: 'أنشئ مساحتك',
      invalidCredentials: 'البريد الإلكتروني أو كلمة المرور غير صحيحة.',
      passwordNotSet: 'لم يتم تعيين كلمة مرور بعد. تحقق من بريد الدعوة أو استخدم "نسيت كلمة المرور؟"',
      unexpectedError: 'حدث خطأ ما. يرجى المحاولة مرة أخرى.',
    },
  }[language]

  return (
    <main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,#dbeafe,transparent_35%),linear-gradient(180deg,#f8fafc,white)] px-4 py-12">
      <div className="w-full max-w-md">
        <div className="mb-8 text-center">
          <Link href={marketplaceUrl} className="text-xs font-semibold uppercase tracking-[0.24em] text-blue-600">
            RentalDriveGo
          </Link>
          <h1 className="mt-3 text-3xl font-black tracking-tight text-slate-900">
            {portal === 'admin' ? dict.admin : dict.workspace}
          </h1>
          <p className="mt-2 text-sm text-slate-500">
            {portal === 'admin' ? dict.adminSubtitle : dict.subtitle}
          </p>
        </div>

        <section className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm">
          <LocalSignInForm dict={dict} portal={portal} />

          {portal !== 'admin' ? (
            <div className="mt-6 border-t border-slate-200 pt-6 text-sm text-slate-500">
              {dict.newAccount}
              <Link href="/sign-up" className="ml-1 font-semibold text-slate-900 underline decoration-slate-300 underline-offset-4">
                {dict.createWorkspace}
              </Link>
            </div>
          ) : null}
        </section>
      </div>
    </main>
  )
}

function LocalSignInForm({ dict, portal }: {
  dict: {
    email: string
    password: string
    signIn: string
    signingIn: string
    verify: string
    verifying: string
    authCode: string
    enterCode: string
    back: string
    forgotPassword: string
    invalidCredentials: string
    passwordNotSet: string
    unexpectedError: string
  }
  portal: 'admin' | 'workspace'
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [totpCode, setTotpCode] = useState('')
  const [step, setStep] = useState<'credentials' | 'totp'>('credentials')
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const adminNext = searchParams.get('next') || '/dashboard'
  const employeeRedirect = searchParams.get('redirect') || '/dashboard'
  const forgotPasswordHref = portal === 'admin' ? `${adminUrl}/forgot-password` : '/forgot-password'

  function redirectAdmin(token: string) {
    const hash = new URLSearchParams({ token, next: adminNext }).toString()
    window.location.href = `${adminUrl}/auth-redirect#${hash}`
  }

  async function handleCredentials(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)

    try {
      if (portal === 'admin') {
        const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
        })
        const adminJson = await adminRes.json()

        if (adminRes.ok && adminJson?.data?.token) {
          redirectAdmin(adminJson.data.token)
          return
        }

        if (adminRes.status === 401 && adminJson?.error === 'totp_required') {
          setStep('totp')
          return
        }

        setError(dict.invalidCredentials)
        return
      }

      const empRes = await fetch(`${API_BASE}/auth/employee/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      })
      const empJson = await empRes.json()

      if (empRes.ok && empJson?.data?.token) {
        const token = empJson.data.token
        localStorage.setItem(EMPLOYEE_TOKEN_KEY, token)
        document.cookie = `employee_token=${token}; path=/; max-age=28800; samesite=lax`
        router.push(employeeRedirect)
        return
      }

      if (empJson?.error === 'password_not_set') {
        setError(dict.passwordNotSet)
        return
      }

      setError(dict.invalidCredentials)
    } catch {
      setError(dict.unexpectedError)
    } finally {
      setLoading(false)
    }
  }

  async function handleTotp(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)

    try {
      const adminRes = await fetch(`${API_BASE}/admin/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password, totpCode }),
      })
      const adminJson = await adminRes.json()

      if (adminRes.ok && adminJson?.data?.token) {
        redirectAdmin(adminJson.data.token)
        return
      }

      setError(dict.invalidCredentials)
    } catch {
      setError(dict.unexpectedError)
    } finally {
      setLoading(false)
    }
  }

  return (
    <>
      {error ? (
        <div className="mb-5 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          {error}
        </div>
      ) : null}

      {step === 'credentials' ? (
        <form onSubmit={handleCredentials} className="space-y-5">
          <div>
            <label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.email}</label>
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="owner@company.com"
              className="input-field"
            />
          </div>

          <div>
            <label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.password}</label>
            <div className="relative">
              <input
                type={showPassword ? 'text' : 'password'}
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                className="input-field pr-10"
              />
              <button
                type="button"
                onClick={() => setShowPassword((v) => !v)}
                className="absolute inset-y-0 right-3 flex items-center text-slate-400 hover:text-slate-600"
                tabIndex={-1}
              >
                {showPassword ? (
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                  </svg>
                ) : (
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                  </svg>
                )}
              </button>
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            className="btn-primary w-full justify-center disabled:cursor-not-allowed disabled:opacity-60"
          >
            {loading ? dict.signingIn : dict.signIn}
          </button>

          <div className="text-center">
            <Link href={forgotPasswordHref} className="text-sm text-slate-500 hover:text-slate-700 underline decoration-slate-300 underline-offset-4">
              {dict.forgotPassword}
            </Link>
          </div>
        </form>
      ) : (
        <form onSubmit={handleTotp} className="space-y-5">
          <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-center text-sm text-slate-600">
            {dict.enterCode}
          </div>

          <div>
            <label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.authCode}</label>
            <input
              type="text"
              inputMode="numeric"
              pattern="[0-9]{6}"
              maxLength={6}
              required
              value={totpCode}
              onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ''))}
              placeholder="000000"
              className="input-field text-center text-xl tracking-[0.45em]"
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className="btn-primary w-full justify-center disabled:cursor-not-allowed disabled:opacity-60"
          >
            {loading ? dict.verifying : dict.verify}
          </button>

          <button
            type="button"
            onClick={() => {
              setStep('credentials')
              setTotpCode('')
              setError(null)
            }}
            className="w-full text-sm text-slate-500 hover:text-slate-700"
          >
            {dict.back}
          </button>
        </form>
      )}
    </>
  )
}
