'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Mail, Lock, Eye, EyeOff, ArrowRight, Crown } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { superAdminAuthService } from '@/services/admin-auth.service';
import { getErrorMessage } from '@/lib/errors';
import TermsPopup from '@/components/popups/TermsPopup';

export default function SuperAdminLoginPage() {
  const router = useRouter();
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState<string | null>(null);

  const [requiresTermsAcceptance, setRequiresTermsAcceptance] = useState(false);
  const [pendingTokens, setPendingTokens] = useState<{ accessToken: string; refreshToken?: string } | null>(null);
  const [pendingSuperAdmin, setPendingSuperAdmin] = useState<any | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const { data } = await superAdminAuthService.login({ email, password });
      const res = data?.data ?? {};
      const tokens = res.tokens ?? {};
      const accessToken = tokens.accessToken;
      const refreshToken = tokens.refreshToken;

      if (!accessToken) {
        setError('Unable to complete sign in. Please try again.');
        setLoading(false);
        return;
      }

      const superAdmin = res.superAdmin;

      // If terms not yet accepted, show the popup instead of redirecting
      if (data?.requiresTermsAcceptance || res.requiresTermsAcceptance || (superAdmin && superAdmin.hasAcceptedTerms === false)) {
        setPendingTokens({ accessToken, refreshToken });
        setPendingSuperAdmin(superAdmin ?? null);
        setRequiresTermsAcceptance(true);
        setLoading(false);
        return;
      }

      const role = 'SUPER_ADMIN';

      const { tokenManager } = await import('@/lib/token-manager');
      tokenManager.setTokens(accessToken, refreshToken);

      const { useAuthStore } = await import('@/store/auth.store');
      useAuthStore.getState().setAuth(accessToken, role, {
        id: superAdmin?.id ?? '',
        email: superAdmin?.email ?? email,
        firstName: superAdmin?.name,
        lastName: undefined,
        role: role as any,
      }, refreshToken);

      router.push('/super-admin/dashboard');
    } catch (err) {
      setError(getErrorMessage(err));
      setLoading(false);
    }
  };

  const handleTermsAccept = async () => {
    if (!pendingTokens?.accessToken) {
      setError('Unable to complete sign in. Please try again.');
      setRequiresTermsAcceptance(false);
      return;
    }
    setError(null);
    setLoading(true);
    try {
      await superAdminAuthService.acceptTerms(pendingTokens.accessToken);
      const role = 'SUPER_ADMIN';
      const { tokenManager } = await import('@/lib/token-manager');
      tokenManager.setTokens(pendingTokens.accessToken, pendingTokens.refreshToken);
      const { useAuthStore } = await import('@/store/auth.store');
      useAuthStore.getState().setAuth(pendingTokens.accessToken, role, {
        id: pendingSuperAdmin?.id ?? '',
        email: pendingSuperAdmin?.email ?? email,
        firstName: pendingSuperAdmin?.name,
        lastName: undefined,
        role: role as any,
      }, pendingTokens.refreshToken);
      setRequiresTermsAcceptance(false);
      setTimeout(() => router.push('/super-admin/dashboard'), 100);
    } catch (err) {
      setError(getErrorMessage(err));
      setRequiresTermsAcceptance(false);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-surface-sunken px-4 py-10">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-40 -top-40 h-96 w-96 rounded-full bg-primary-500/20 blur-3xl" />
        <div className="absolute -bottom-40 -right-40 h-96 w-96 rounded-full bg-indigo-500/20 blur-3xl" />
        <div className="absolute inset-0 bg-grid opacity-40" />
      </div>

      <div className="relative mx-auto w-full max-w-md">
        <Card className="card-hover">
          <CardHeader>
            <CardTitle className="text-2xl">Super Admin Sign In</CardTitle>
            <CardDescription className="mt-2">Sign in to the super admin control panel</CardDescription>
          </CardHeader>

          {error && (
            <div className="mx-5 mb-2 flex items-start gap-2 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-300">
              <span>{error}</span>
            </div>
          )}

          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div>
                <label htmlFor="superadmin-email" className="mb-1.5 block text-sm font-medium text-ink">Email</label>
                <Input
                  id="superadmin-email"
                  type="email"
                  placeholder="superadmin@example.com"
                  icon={<Mail className="h-4 w-4" />}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  autoComplete="email"
                />
              </div>
              <div>
                <div className="mb-1.5 flex items-center justify-between">
                  <label htmlFor="superadmin-password" className="text-sm font-medium text-ink">Password</label>
                </div>
                <div className="relative">
                  <Input
                    id="superadmin-password"
                    type={showPassword ? 'text' : 'password'}
                    placeholder="••••••••"
                    icon={<Lock className="h-4 w-4" />}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    autoComplete="current-password"
                    className="pr-10"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword((v) => !v)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-ink-faint hover:text-ink"
                    aria-label={showPassword ? 'Hide password' : 'Show password'}
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </div>
              </div>
              <Button type="submit" className="w-full" loading={loading}>
                {loading ? 'Signing in...' : 'Sign In'}
                {!loading && <ArrowRight className="h-4 w-4" />}
              </Button>
            </CardContent>
          </form>

          <CardFooter className="flex-col gap-4">
            <p className="text-center text-sm text-ink-muted">
              <Link href="/login" className="font-semibold text-primary-600 hover:underline">Back to user login</Link>
            </p>
          </CardFooter>
        </Card>
      </div>

      <TermsPopup open={requiresTermsAcceptance} onAccept={handleTermsAccept} />
    </div>
  );
}