import { useState, useEffect } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import api from '../services/api';

export default function ProtectedRoute() {
  const token = localStorage.getItem('adminToken');
  const [isValidating, setIsValidating] = useState(true);
  const [isValid, setIsValid] = useState(true);

  useEffect(() => {
    if (!token) {
      setIsValid(false);
      setIsValidating(false);
      return;
    }

    api.get('/users/profile')
      .then(() => {
        setIsValid(true);
      })
      .catch(() => {
        localStorage.removeItem('adminToken');
        setIsValid(false);
      })
      .finally(() => {
        setIsValidating(false);
      });
  }, [token]);

  if (!token || !isValid) {
    return <Navigate to="/login" replace />;
  }

  if (isValidating) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="w-8 h-8 border-4 border-purple-600 border-t-transparent rounded-full animate-spin"></div>
      </div>
    );
  }

  return <Outlet />;
}