/**
 * ============================================
 * LOGIN / REGISTER PAGE
 * ============================================
 * Equivalent to: account/login.html.twig in Shopware
 *
 * Two-column layout:
 * Left:  "I'm a customer already!" — login form
 * Right: "I'm a new customer!" — registration form
 */

'use client';

import { useState, useEffect, Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useAuth } from '@/lib/auth-context';
import {
  getSalutations,
  getCountries,
  getStorefrontUrl,
  Salutation,
  Country,
} from '@/lib/shopware-api';

function LoginRegisterForm() {
  const { login, register, isLoggedIn } = useAuth();
  const router = useRouter();
  const searchParams = useSearchParams();
  const redirectTo = searchParams.get('redirect') || '/account';

  // Login state
  const [loginEmail, setLoginEmail] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [loginError, setLoginError] = useState('');
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  // Register state
  const [salutations, setSalutations] = useState<Salutation[]>([]);
  const [countries, setCountries] = useState<Country[]>([]);
  const [regError, setRegError] = useState('');
  const [isRegistering, setIsRegistering] = useState(false);
  // Private vs commercial account (gated by Shopware's account-type setting)
  const [accountType, setAccountType] = useState<'private' | 'business' | ''>('');
  const [showAccountType, setShowAccountType] = useState(true);
  const [regForm, setRegForm] = useState({
    salutationId: '',
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    company: '',
    department: '',
    vatId: '',
    street: '',
    zipcode: '',
    city: '',
    countryId: '',
  });

  useEffect(() => {
    if (isLoggedIn) {
      router.push(redirectTo);
    }
  }, [isLoggedIn, redirectTo, router]);

  // Load salutations & countries
  useEffect(() => {
    (async () => {
      try {
        const [salData, countryData] = await Promise.all([
          getSalutations(),
          getCountries(),
        ]);
        const salList = salData.elements || [];
        const cList = countryData.elements || [];
        setSalutations(salList);
        setCountries(cList);
        setRegForm((prev) => ({
          ...prev,
          salutationId: salList[0]?.id || '',
          countryId: cList[0]?.id || '',
        }));
      } catch {
        // silent
      }
    })();
  }, []);

  // Respect the "Show selection between company and customer account" setting.
  useEffect(() => {
    let cancelled = false;
    fetch('/api/registration-config')
      .then((r) => r.json())
      .then((cfg) => {
        if (cancelled) return;
        const show = cfg?.showAccountTypeSelection !== false;
        setShowAccountType(show);
        if (!show) setAccountType('private');
      })
      .catch(() => {});
    return () => {
      cancelled = true;
    };
  }, []);

  if (isLoggedIn) return null;

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoginError('');
    setIsLoggingIn(true);
    try {
      await login(loginEmail, loginPassword);
      router.push(redirectTo);
    } catch (err: any) {
      setLoginError(err.message || 'Invalid email or password.');
    } finally {
      setIsLoggingIn(false);
    }
  };

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setRegError('');
    if (regForm.password.length < 8) {
      setRegError('Password must be at least 8 characters.');
      return;
    }
    if (showAccountType && accountType === '') {
      setRegError('Please select an account type.');
      return;
    }
    const isBusiness = accountType === 'business';
    if (isBusiness && !regForm.company.trim()) {
      setRegError('Company name is required for a commercial account.');
      return;
    }
    setIsRegistering(true);
    try {
      await register({
        salutationId: regForm.salutationId,
        firstName: regForm.firstName,
        lastName: regForm.lastName,
        email: regForm.email,
        password: regForm.password,
        storefrontUrl: getStorefrontUrl(),
        accountType: isBusiness ? 'business' : 'private',
        vatIds: isBusiness && regForm.vatId.trim() ? [regForm.vatId.trim()] : undefined,
        billingAddress: {
          street: regForm.street,
          zipcode: regForm.zipcode,
          city: regForm.city,
          countryId: regForm.countryId,
          ...(isBusiness && {
            company: regForm.company.trim(),
            department: regForm.department.trim() || undefined,
          }),
        },
      });
      router.push(redirectTo);
    } catch (err: any) {
      setRegError(err.message || 'Registration failed. Please try again.');
    } finally {
      setIsRegistering(false);
    }
  };

  const inputClass =
    'w-full border border-surface-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400';
  const labelClass = 'block text-sm font-medium text-surface-700 mb-1';

  return (
    <div className="max-w-6xl mx-auto px-6 py-10">
      <h1 className="text-3xl font-bold text-surface-900 mb-8">Log in or create account</h1>

      <div className="grid lg:grid-cols-2 gap-10 items-start">
        {/* Left: Login */}
        <div>
          <h2 className="text-lg font-bold text-surface-900 mb-1">I&apos;m a customer already!</h2>
          <hr className="border-surface-200 mb-4" />
          <p className="text-sm text-surface-500 mb-5">Log in with email address and password</p>

          {loginError && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
              {loginError}
            </div>
          )}

          <form onSubmit={handleLogin}>
            <div className="grid grid-cols-2 gap-4 mb-3">
              <div>
                <label className={labelClass}>Your email address</label>
                <input
                  type="email"
                  required
                  value={loginEmail}
                  onChange={(e) => setLoginEmail(e.target.value)}
                  className={inputClass}
                  placeholder="Enter email address..."
                  autoComplete="email"
                />
              </div>
              <div>
                <label className={labelClass}>Your password</label>
                <input
                  type="password"
                  required
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                  className={inputClass}
                  placeholder="Enter password..."
                  autoComplete="current-password"
                />
              </div>
            </div>

            <Link href="/account/recover-password" className="text-sm text-brand-600 hover:text-brand-700 hover:underline">
              I have forgotten my password.
            </Link>

            <div className="mt-4">
              <button
                type="submit"
                disabled={isLoggingIn}
                className="px-6 py-2.5 bg-brand-500 hover:bg-brand-600 disabled:bg-brand-300 text-white text-sm font-semibold rounded-lg transition-colors"
              >
                {isLoggingIn ? 'Logging in...' : 'Log in'}
              </button>
            </div>
          </form>

          {/* Login advantages */}
          <div className="mt-8">
            <h3 className="font-semibold text-surface-900 mb-2">Login advantages:</h3>
            <ul className="list-disc list-inside text-sm text-surface-600 space-y-1">
              <li>Express shopping</li>
              <li>Save your data and settings</li>
              <li>Order overview and shipping information</li>
              <li>Manage your newsletter subscription</li>
            </ul>
          </div>
        </div>

        {/* Right: Register */}
        <div>
          <h2 className="text-lg font-bold text-surface-900 mb-1">I&apos;m a new customer!</h2>
          <hr className="border-surface-200 mb-4" />

          {regError && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
              {regError}
            </div>
          )}

          <form onSubmit={handleRegister} className="space-y-4">
            {/* Account type (only when Shopware's selection setting is enabled) */}
            {showAccountType && (
              <div>
                <label className={labelClass}>Account type*</label>
                <select
                  value={accountType}
                  onChange={(e) => setAccountType(e.target.value as 'private' | 'business' | '')}
                  required
                  className={`${inputClass} max-w-[200px]`}
                >
                  <option value="">Select...</option>
                  <option value="private">Private</option>
                  <option value="business">Commercial</option>
                </select>
              </div>
            )}

            {/* Salutation */}
            <div>
              <label className={labelClass}>Salutation</label>
              <select
                value={regForm.salutationId}
                onChange={(e) => setRegForm((prev) => ({ ...prev, salutationId: e.target.value }))}
                className={`${inputClass} max-w-[200px]`}
              >
                {salutations.map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.translated?.displayName || s.displayName}
                  </option>
                ))}
              </select>
            </div>

            {/* Name */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className={labelClass}>First name*</label>
                <input
                  type="text"
                  required
                  value={regForm.firstName}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, firstName: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter first name..."
                />
              </div>
              <div>
                <label className={labelClass}>Last name*</label>
                <input
                  type="text"
                  required
                  value={regForm.lastName}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, lastName: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter last name..."
                />
              </div>
            </div>

            {/* Commercial-account fields */}
            {accountType === 'business' && (
              <>
                <div>
                  <label className={labelClass}>Company*</label>
                  <input
                    type="text"
                    required
                    value={regForm.company}
                    onChange={(e) => setRegForm((prev) => ({ ...prev, company: e.target.value }))}
                    className={inputClass}
                    placeholder="Enter company..."
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className={labelClass}>Department</label>
                    <input
                      type="text"
                      value={regForm.department}
                      onChange={(e) => setRegForm((prev) => ({ ...prev, department: e.target.value }))}
                      className={inputClass}
                      placeholder="(optional)"
                    />
                  </div>
                  <div>
                    <label className={labelClass}>VAT Reg.No.</label>
                    <input
                      type="text"
                      value={regForm.vatId}
                      onChange={(e) => setRegForm((prev) => ({ ...prev, vatId: e.target.value }))}
                      className={inputClass}
                      placeholder="(optional)"
                    />
                  </div>
                </div>
              </>
            )}

            {/* Email & Password */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className={labelClass}>Email address*</label>
                <input
                  type="email"
                  required
                  value={regForm.email}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, email: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter email address..."
                  autoComplete="email"
                />
              </div>
              <div>
                <label className={labelClass}>Password*</label>
                <input
                  type="password"
                  required
                  minLength={8}
                  value={regForm.password}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, password: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter password..."
                  autoComplete="new-password"
                />
                <p className="text-xs text-surface-400 mt-1">Passwords must have a minimum length of 8 characters.</p>
              </div>
            </div>

            {/* Address section */}
            <h3 className="font-semibold text-surface-900 pt-2 mb-0">Your address</h3>
            <hr className="border-surface-200" />

            {/* Street */}
            <div>
              <label className={labelClass}>Street address*</label>
              <input
                type="text"
                required
                value={regForm.street}
                onChange={(e) => setRegForm((prev) => ({ ...prev, street: e.target.value }))}
                className={inputClass}
                placeholder="Enter street address..."
              />
            </div>

            {/* Postal code / City */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className={labelClass}>Postal code*</label>
                <input
                  type="text"
                  required
                  value={regForm.zipcode}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, zipcode: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter postal code..."
                />
              </div>
              <div>
                <label className={labelClass}>City*</label>
                <input
                  type="text"
                  required
                  value={regForm.city}
                  onChange={(e) => setRegForm((prev) => ({ ...prev, city: e.target.value }))}
                  className={inputClass}
                  placeholder="Enter city..."
                />
              </div>
            </div>

            {/* Country */}
            <div>
              <label className={labelClass}>Country*</label>
              <select
                value={regForm.countryId}
                onChange={(e) => setRegForm((prev) => ({ ...prev, countryId: e.target.value }))}
                className={`${inputClass} max-w-sm`}
                required
              >
                <option value="">Select country...</option>
                {countries.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.translated?.name || c.name}
                  </option>
                ))}
              </select>
            </div>

            <p className="text-xs text-surface-500 pt-2">
              Fields marked with asterisks (*) are required.
            </p>

            <button
              type="submit"
              disabled={isRegistering}
              className="w-full py-3.5 bg-brand-500 hover:bg-brand-600 disabled:bg-brand-300 text-white font-semibold rounded-xl transition-colors"
            >
              {isRegistering ? (
                <span className="flex items-center justify-center gap-2">
                  <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                  Creating account...
                </span>
              ) : (
                'Continue'
              )}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense fallback={
      <div className="min-h-[60vh] flex items-center justify-center">
        <div className="flex items-center gap-3 text-surface-500">
          <svg className="w-6 h-6 animate-spin" viewBox="0 0 24 24" fill="none">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
          Loading...
        </div>
      </div>
    }>
      <LoginRegisterForm />
    </Suspense>
  );
}