'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/stores/auth-store';
import RoleSelector from '@/components/auth/RoleSelector';
import type { UserRole } from '@/lib/constants/navigation';
import { useTranslation } from '@/lib/hooks/useTranslation';

/**
 * Login page — Divisi branding + role selector.
 *
 * The user picks a role and clicks "Log In" to enter the dashboard.
 * No real credentials are involved; this is a simulated auth flow.
 * If the user is already authenticated, redirects to /overview.
 */
export default function LoginPage() {
  const router = useRouter();
  const login = useAuthStore((s) => s.login);
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  const [selectedRole, setSelectedRole] = useState<UserRole | null>(null);
  const t = useTranslation();

  // Redirect already-authenticated users to the appropriate page
  useEffect(() => {
    if (isAuthenticated) {
      const role = useAuthStore.getState().role;
      router.replace(role === 'Client_Portal' ? '/portal' : '/overview');
    }
  }, [isAuthenticated, router]);

  function handleLogin() {
    if (!selectedRole) return;
    login(selectedRole);
    router.push(selectedRole === 'Client_Portal' ? '/portal' : '/overview');
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-divisi-bg px-4">
      <div className="w-full max-w-sm">
        {/* Branding */}
        <div className="mb-8 text-center">
          {/* Logo placeholder */}
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-divisi-accent">
            <span className="text-2xl font-bold text-divisi-bg">D</span>
          </div>
          <h1 className="text-2xl font-bold text-divisi-text-primary">{t.login.title}</h1>
          <p className="mt-1 text-sm text-divisi-text-secondary">
            {t.login.subtitle}
          </p>
        </div>

        {/* Card */}
        <div className="rounded-xl border border-divisi-border bg-divisi-card p-6">
          <h2 className="mb-1 text-base font-semibold text-divisi-text-primary">
            {t.login.selectRole}
          </h2>
          <p className="mb-4 text-xs text-divisi-text-secondary">
            {t.login.selectRoleDesc}
          </p>

          <RoleSelector selectedRole={selectedRole} onSelect={setSelectedRole} />

          <button
            type="button"
            onClick={handleLogin}
            disabled={!selectedRole}
            className={`
              mt-5 w-full rounded-lg py-2.5 text-sm font-semibold transition-colors duration-200
              focus:outline-none focus-visible:ring-2 focus-visible:ring-divisi-accent focus-visible:ring-offset-2 focus-visible:ring-offset-divisi-bg
              ${
                selectedRole
                  ? 'bg-divisi-accent text-divisi-bg hover:bg-divisi-accent-hover cursor-pointer'
                  : 'bg-divisi-accent/30 text-divisi-bg/50 cursor-not-allowed'
              }
            `}
          >
            {t.login.logIn}
          </button>
        </div>

        <p className="mt-6 text-center text-xs text-divisi-text-secondary">
          {t.login.copyright}
        </p>
      </div>
    </main>
  );
}