portfolio/app/manage/page.tsx

"use client";

import { useState, useEffect, useCallback } from 'react';
import { Lock, Loader2 } from 'lucide-react';
import ModernAdminDashboard from '@/components/ModernAdminDashboard';

// Constants
const LOCKOUT_DURATION = 15 * 60 * 1000; // 15 minutes
const RATE_LIMIT_DELAY = 1000; // 1 second base delay

const getRateLimitDelay = (attempts: number): number => {
  return RATE_LIMIT_DELAY * Math.pow(2, attempts);
};

interface AuthState {
  isAuthenticated: boolean;
  isLoading: boolean;
  showLogin: boolean;
  password: string;
  showPassword: boolean;
  error: string;
  attempts: number;
  isLocked: boolean;
  lastAttempt: number;
  csrfToken: string;
}

const AdminPage = () => {
  const [authState, setAuthState] = useState<AuthState>({
    isAuthenticated: false,
    isLoading: true,
    showLogin: false,
    password: '',
    showPassword: false,
    error: '',
    attempts: 0,
    isLocked: false,
    lastAttempt: 0,
    csrfToken: ''
  });

  // Fetch CSRF token
  const fetchCSRFToken = useCallback(async () => {
    try {
      const response = await fetch('/api/auth/csrf');
      const data = await response.json();
      if (response.ok && data.csrfToken) {
        setAuthState(prev => ({ ...prev, csrfToken: data.csrfToken }));
        return data.csrfToken;
      }
    } catch {
      console.error('Failed to fetch CSRF token');
    }
    return '';
  }, []);

  // Check if user is locked out
  const checkLockout = useCallback(() => {
    if (typeof window === 'undefined') return false;

    try {
      const lockoutData = localStorage.getItem('admin_lockout');
      if (lockoutData) {
        try {
          const { timestamp, attempts } = JSON.parse(lockoutData);
          const now = Date.now();

          if (now - timestamp < LOCKOUT_DURATION) {
            setAuthState(prev => ({
              ...prev,
              isLocked: true,
              attempts,
              isLoading: false
            }));
            return true;
          } else {
            try {
              localStorage.removeItem('admin_lockout');
            } catch {
              // Ignore errors
            }
          }
        } catch {
          try {
            localStorage.removeItem('admin_lockout');
          } catch {
            // Ignore errors
          }
        }
      }
    } catch (error) {
      // localStorage might be disabled
      if (process.env.NODE_ENV === 'development') {
        console.warn('Failed to check lockout status:', error);
      }
    }
    return false;
  }, []);

  // Check session validity via API
  const checkSession = useCallback(async () => {
    try {
      const sessionToken = sessionStorage.getItem('admin_session_token');
      if (!sessionToken) {
        setAuthState(prev => ({
          ...prev,
          isAuthenticated: false,
          showLogin: true,
          isLoading: false
        }));
        return;
      }

      const response = await fetch('/api/auth/validate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': authState.csrfToken
        },
        body: JSON.stringify({
          sessionToken,
          csrfToken: authState.csrfToken
        })
      });

      const data = await response.json();

      if (response.ok && data.valid) {
        setAuthState(prev => ({
          ...prev,
          isAuthenticated: true,
          showLogin: false,
          isLoading: false
        }));
        sessionStorage.setItem('admin_authenticated', 'true');
      } else {
        sessionStorage.removeItem('admin_authenticated');
        sessionStorage.removeItem('admin_session_token');
        setAuthState(prev => ({
          ...prev,
          isAuthenticated: false,
          showLogin: true,
          isLoading: false
        }));
      }
    } catch {
      setAuthState(prev => ({
        ...prev,
        isAuthenticated: false,
        showLogin: true,
        isLoading: false
      }));
    }
  }, [authState.csrfToken]);

  // Initialize
  useEffect(() => {
    const init = async () => {
      if (checkLockout()) return;

      const token = await fetchCSRFToken();
      if (token) {
        setAuthState(prev => ({ ...prev, csrfToken: token }));
      }
    };

    init();
  }, [checkLockout, fetchCSRFToken]);

  useEffect(() => {
    if (authState.csrfToken && !authState.isLocked) {
      checkSession();
    }
  }, [authState.csrfToken, authState.isLocked, checkSession]);


  // Handle login form submission
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!authState.password.trim() || authState.isLoading) return;

    setAuthState(prev => ({ ...prev, isLoading: true, error: '' }));

    // Rate limiting delay
    const delay = getRateLimitDelay(authState.attempts);
    await new Promise(resolve => setTimeout(resolve, delay));

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': authState.csrfToken
        },
        body: JSON.stringify({
          password: authState.password,
          csrfToken: authState.csrfToken
        })
      });

      const data = await response.json();

      if (response.ok && data.success) {
        sessionStorage.setItem('admin_authenticated', 'true');
        sessionStorage.setItem('admin_session_token', data.sessionToken);
        setAuthState(prev => ({
          ...prev,
          isAuthenticated: true,
          showLogin: false,
          password: '',
          error: '',
          attempts: 0,
          isLoading: false
        }));
        try {
          localStorage.removeItem('admin_lockout');
        } catch {
          // Ignore errors
        }
      } else {
        const newAttempts = authState.attempts + 1;
        setAuthState(prev => ({
          ...prev,
          error: data.error || 'Login failed',
          attempts: newAttempts,
          isLoading: false
        }));

        if (newAttempts >= 5) {
          try {
            localStorage.setItem('admin_lockout', JSON.stringify({
              timestamp: Date.now(),
              attempts: newAttempts
            }));
          } catch (error) {
            // localStorage might be full or disabled
            if (process.env.NODE_ENV === 'development') {
              console.warn('Failed to save lockout data:', error);
            }
          }
          setAuthState(prev => ({
            ...prev,
            isLocked: true,
            error: 'Too many failed attempts. Please try again in 15 minutes.'
          }));
        }
      }
    } catch {
      setAuthState(prev => ({
        ...prev,
        error: 'Network error. Please try again.',
        isLoading: false
      }));
    }
  };

  // Loading state
  if (authState.isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-stone-50 dark:bg-stone-950">
        <div className="text-center space-y-4">
          <div className="font-mono text-sm font-black tracking-tighter text-stone-900 dark:text-stone-50">
            dk<span className="text-red-500">0</span>.dev
          </div>
          <Loader2 className="w-5 h-5 animate-spin mx-auto text-emerald-500" />
        </div>
      </div>
    );
  }

  // Lockout state
  if (authState.isLocked) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-stone-50 dark:bg-stone-950 px-6">
        <div className="w-full max-w-sm">
          <div className="bg-white dark:bg-stone-900 rounded-[2.5rem] border border-stone-200 dark:border-stone-800 overflow-hidden shadow-2xl">
            <div className="h-0.5 bg-gradient-to-r from-red-500 via-orange-400 to-red-400" />
            <div className="p-10 text-center">
              <div className="w-14 h-14 bg-red-50 dark:bg-red-950/30 rounded-[1.25rem] flex items-center justify-center mx-auto mb-6 border border-red-200 dark:border-red-900">
                <Lock className="w-6 h-6 text-red-500" />
              </div>
              <p className="font-mono text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-4">
                dk<span className="text-red-500">0</span>.dev · admin
              </p>
              <h1 className="text-2xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 mb-2">
                Account Locked
              </h1>
              <p className="text-stone-500 dark:text-stone-400 text-sm leading-relaxed mb-8">
                Too many failed attempts. Please try again in 15 minutes.
              </p>
              <button
                onClick={() => {
                  try {
                    localStorage.removeItem('admin_lockout');
                  } catch {
                    // Ignore errors
                  }
                  window.location.reload();
                }}
                className="px-8 py-3 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:scale-105 active:scale-95 transition-all"
              >
                Try Again
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Login form
  if (authState.showLogin || !authState.isAuthenticated) {
    return (
      <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-stone-50 dark:bg-stone-950 px-6">
        {/* Liquid ambient blobs */}
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute top-[5%] left-[5%] w-[50vw] h-[50vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
          <div className="absolute bottom-[5%] right-[5%] w-[40vw] h-[40vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
        </div>

        <div className="relative z-10 w-full max-w-sm animate-[fadeIn_0.4s_ease-out]">
          <div className="bg-white dark:bg-stone-900 rounded-[2.5rem] border border-stone-200 dark:border-stone-800 overflow-hidden shadow-2xl">
            <div className="h-0.5 bg-gradient-to-r from-emerald-400 via-sky-400 to-purple-400" />

            <div className="p-10">
              <div className="text-center mb-8">
                <p className="font-mono text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-5">
                  dk<span className="text-red-500">0</span>.dev · admin
                </p>
                <div className="w-14 h-14 bg-stone-100 dark:bg-stone-800 rounded-[1.25rem] flex items-center justify-center mx-auto mb-5 border border-stone-200 dark:border-stone-700">
                  <Lock className="w-6 h-6 text-stone-700 dark:text-stone-300" />
                </div>
                <h1 className="text-3xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 mb-1">
                  Admin Access
                </h1>
                <p className="text-stone-500 dark:text-stone-400 text-sm">
                  Enter your password to continue
                </p>
              </div>

              <form onSubmit={handleLogin} className="space-y-4">
                <div>
                  <div className="relative">
                    <input
                      type={authState.showPassword ? 'text' : 'password'}
                      value={authState.password}
                      onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
                      placeholder="Password"
                      className="w-full px-5 py-4 bg-stone-50 dark:bg-stone-950/50 border border-stone-200 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent transition-all"
                      disabled={authState.isLoading}
                    />
                    <button
                      type="button"
                      onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
                      className="absolute right-4 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 p-1 transition-colors"
                    >
                      {authState.showPassword ? '👁️' : '👁️‍🗨️'}
                    </button>
                  </div>
                  {authState.error && (
                    <p className="mt-2 text-red-500 text-sm font-medium flex items-center gap-2">
                      <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0" />
                      {authState.error}
                    </p>
                  )}
                </div>

                <button
                  type="submit"
                  disabled={authState.isLoading || !authState.password}
                  className="w-full bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 py-4 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 transition-all flex items-center justify-center gap-2"
                >
                  {authState.isLoading ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Authenticating
                    </>
                  ) : (
                    'Sign In'
                  )}
                </button>
              </form>
            </div>
          </div>

          {authState.attempts > 0 && (
            <p className="text-center text-xs text-stone-400 mt-4">
              {5 - authState.attempts} attempt{5 - authState.attempts !== 1 ? 's' : ''} remaining
            </p>
          )}
        </div>
      </div>
    );
  }

  // Authenticated state - show admin dashboard
  return (
    <div className="relative">
      <ModernAdminDashboard isAuthenticated={authState.isAuthenticated} />
    </div>
  );
};

export default AdminPage;