/**
 * Login Page Component
 * Professional login form connected to the API with visual improvements
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLogin } from '../hooks/useAuth';
import { useNavigate, Link } from 'react-router-dom';
import SmoothScheduleLogo from '../components/SmoothScheduleLogo';
import OAuthButtons from '../components/OAuthButtons';
import LanguageSelector from '../components/LanguageSelector';
import { DevQuickLogin } from '../components/DevQuickLogin';
import { AlertCircle, Loader2, Mail, Lock, ArrowRight } from 'lucide-react';

const LoginPage: React.FC = () => {
  const { t } = useTranslation();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const navigate = useNavigate();
  const loginMutation = useLogin();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    loginMutation.mutate(
      { email, password },
      {
        onSuccess: (data) => {
          // Check if MFA is required
          if (data.mfa_required) {
            // Store MFA challenge info in sessionStorage and redirect to MFA page
            sessionStorage.setItem('mfa_challenge', JSON.stringify({
              user_id: data.user_id,
              mfa_methods: data.mfa_methods,
              phone_last_4: data.phone_last_4,
            }));
            navigate('/mfa-verify');
            return;
          }

          const user = data.user!;
          const currentHostname = window.location.hostname;
          const currentPort = window.location.port;
          const portStr = currentPort ? `:${currentPort}` : '';
          const protocol = window.location.protocol;

          // Extract base domain from current hostname
          // For lvh.me: smoothschedule.com becomes base, subdomain.smoothschedule.com has subdomain
          // For production: smoothschedule.com becomes base, subdomain.smoothschedule.com has subdomain
          const hostnameParts = currentHostname.split('.');
          const baseDomain = hostnameParts.length >= 2
            ? hostnameParts.slice(-2).join('.')
            : currentHostname;

          // Check domain type
          const isRootDomain = currentHostname === baseDomain || currentHostname === 'localhost';
          const isPlatformDomain = currentHostname === `platform.${baseDomain}`;
          const currentSubdomain = hostnameParts[0];
          const isBusinessSubdomain = !isRootDomain && !isPlatformDomain && currentSubdomain !== 'api';

          // Platform users (superuser, platform_manager, platform_support)
          const isPlatformUser = ['superuser', 'platform_manager', 'platform_support'].includes(user.role);

          // Business-associated users (owner, manager, staff, resource)
          const isBusinessUser = ['owner', 'manager', 'staff', 'resource'].includes(user.role);

          // Customer users
          const isCustomer = user.role === 'customer';

          // RULE 1: Platform users cannot login from /login - they must use /platform/login
          if (isPlatformUser) {
            setError(t('auth.invalidCredentials'));
            return;
          }

          // RULE 2: Business users cannot login on other business subdomains
          if (isBusinessUser && isBusinessSubdomain && user.business_subdomain !== currentSubdomain) {
            setError(t('auth.invalidCredentials'));
            return;
          }

          // RULE 3: Customers cannot login on root domain (they must use their business subdomain)
          if (isCustomer && isRootDomain) {
            setError(t('auth.invalidCredentials'));
            return;
          }

          // RULE 4: Customers cannot login on platform domain
          if (isCustomer && isPlatformDomain) {
            setError(t('auth.invalidCredentials'));
            return;
          }

          // RULE 5: Customers cannot login on a different business subdomain
          if (isCustomer && isBusinessSubdomain && user.business_subdomain !== currentSubdomain) {
            setError(t('auth.invalidCredentials'));
            return;
          }

          // Determine target subdomain for redirect
          let targetSubdomain: string | null = null;

          // Business users should be on their business subdomain
          if (isBusinessUser && user.business_subdomain && !isBusinessSubdomain) {
            targetSubdomain = user.business_subdomain;
          }

          // Check if we need to redirect to a different subdomain
          const needsRedirect = targetSubdomain !== null;

          if (needsRedirect) {
            // Pass tokens in URL to ensure they're available immediately on the new subdomain
            const targetHostname = `${targetSubdomain}.${baseDomain}`;
            window.location.href = `${protocol}//${targetHostname}${portStr}/dashboard?access_token=${data.access}&refresh_token=${data.refresh}`;
            return;
          }

          // Already on correct subdomain - navigate to dashboard
          navigate('/dashboard');
        },
        onError: (err: any) => {
          setError(err.response?.data?.error || t('auth.invalidCredentials'));
        },
      }
    );
  };

  return (
    <div className="min-h-screen flex bg-white dark:bg-gray-900 transition-colors duration-200">
      {/* Left Side - Image & Branding (Hidden on mobile) */}
      <div className="hidden lg:flex lg:w-1/2 relative bg-gray-900 text-white overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80')] bg-cover bg-center opacity-40"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-gray-900/50"></div>

        <div className="relative z-10 flex flex-col justify-between w-full p-12">
          <div>
            <Link to="/" className="flex items-center gap-3 text-white/90 hover:text-white transition-colors">
              <SmoothScheduleLogo className="w-8 h-8 text-brand-500" />
              <span className="font-bold text-xl tracking-tight">Smooth Schedule</span>
            </Link>
          </div>

          <div className="space-y-6 max-w-md">
            <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
              {t('marketing.tagline')}
            </h1>
            <p className="text-lg text-gray-300">
              {t('marketing.description')}
            </p>
            <div className="flex gap-2 pt-4">
              <div className="h-1 w-12 bg-brand-500 rounded-full"></div>
              <div className="h-1 w-4 bg-gray-600 rounded-full"></div>
              <div className="h-1 w-4 bg-gray-600 rounded-full"></div>
            </div>
          </div>

          <div className="text-sm text-gray-500">
            © {new Date().getFullYear()} {t('marketing.copyright')}
          </div>
        </div>
      </div>

      {/* Right Side - Login Form */}
      <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8 lg:w-1/2 xl:px-24 bg-gray-50 dark:bg-gray-900">
        <div className="mx-auto w-full max-w-sm lg:max-w-md">
          <div className="text-center lg:text-left mb-10">
            <Link to="/" className="lg:hidden flex justify-center mb-6">
              <SmoothScheduleLogo className="w-12 h-12 text-brand-600" />
            </Link>
            <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">
              {t('auth.welcomeBack')}
            </h2>
            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
              {t('auth.pleaseEnterDetails')}
            </p>
          </div>

          {error && (
            <div data-testid="error-message" className="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-100 dark:border-red-800/50 animate-in fade-in slide-in-from-top-2">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertCircle className="h-5 w-5 text-red-500 dark:text-red-400" aria-hidden="true" />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
                    {t('auth.authError')}
                  </h3>
                  <div className="mt-1 text-sm text-red-700 dark:text-red-300">
                    {error}
                  </div>
                </div>
              </div>
            </div>
          )}

          <form className="space-y-6" onSubmit={handleSubmit}>
            <div className="space-y-4">
              {/* Email */}
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  {t('auth.email')}
                </label>
                <div className="relative rounded-md shadow-sm">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Mail className="h-5 w-5 text-gray-400" aria-hidden="true" />
                  </div>
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    required
                    className="focus:ring-brand-500 focus:border-brand-500 block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 rounded-lg py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
                    placeholder={t('auth.enterEmail')}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
              </div>

              {/* Password */}
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  {t('auth.password')}
                </label>
                <div className="relative rounded-md shadow-sm">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Lock className="h-5 w-5 text-gray-400" aria-hidden="true" />
                  </div>
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    required
                    className="focus:ring-brand-500 focus:border-brand-500 block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 rounded-lg py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
                    placeholder="••••••••"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
              </div>
            </div>

            <button
              type="submit"
              disabled={loginMutation.isPending}
              className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-70 disabled:cursor-not-allowed transition-all duration-200 ease-in-out transform active:scale-[0.98]"
            >
              {loginMutation.isPending ? (
                <span className="flex items-center gap-2">
                  <Loader2 className="animate-spin h-5 w-5" />
                  {t('auth.signingIn')}
                </span>
              ) : (
                <span className="flex items-center gap-2">
                  {t('auth.signIn')}
                  <ArrowRight className="h-4 w-4" />
                </span>
              )}
            </button>
          </form>

          {/* OAuth Divider and Buttons */}
          <div className="mt-6">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-300 dark:border-gray-700"></div>
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-4 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400">
                  {t('auth.orContinueWith')}
                </span>
              </div>
            </div>

            <div className="mt-6">
              <OAuthButtons
                disabled={loginMutation.isPending}
              />
            </div>
          </div>

          {/* Language Selector */}
          <div className="mt-8 flex justify-center">
            <LanguageSelector />
          </div>
          
          {/* Dev Quick Login */}
          <DevQuickLogin embedded filter="business" />
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
