import React, { useState } from 'react';
import { ArrowLeft } from 'lucide-react';
import { UserManagementModal } from '../components/UserManagementModal';

interface AdminDashboardProps {
  user: any;
  onNavigate: (page: string) => void;
}

export const AdminDashboard: React.FC<AdminDashboardProps> = ({ user, onNavigate }) => {
  const [isModalOpen, setIsModalOpen] = useState(true);

  if (!user?.isAdmin) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-4">
        <div className="text-center">
          <h1 className="text-3xl font-black text-white mb-4">Quyền Truy Cập Bị Từ Chối</h1>
          <p className="text-slate-400 mb-6">Bạn không có quyền truy cập trang admin này.</p>
          <button
            onClick={() => onNavigate('dashboard')}
            className="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold transition-all"
          >
            Quay lại Dashboard
          </button>
        </div>
      </div>
    );
  }

  // When admin closes the modal, navigate back to user dashboard
  const handleCloseModal = () => {
    onNavigate('dashboard');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      {/* Header with toggle button */}
      <div className="fixed top-0 left-0 right-0 z-[60] bg-slate-900/95 backdrop-blur-md border-b border-slate-800 px-4 md:px-6 py-4 flex items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <button
            onClick={handleCloseModal}
            className="p-2 hover:bg-slate-800 rounded-xl transition-colors"
            title="Quay lại User Dashboard"
          >
            <ArrowLeft className="w-6 h-6 text-slate-300" />
          </button>
          <h1 className="text-2xl font-black text-white">
            🛡️ Admin Dashboard
          </h1>
        </div>
        <button
          onClick={handleCloseModal}
          className="px-4 py-2 text-sm font-bold text-slate-300 hover:text-white hover:bg-slate-800 rounded-xl transition-all"
        >
          Switch to User Dashboard
        </button>
      </div>

      {/* Modal shown full screen */}
      <div className="pt-20">
        <UserManagementModal
          isOpen={isModalOpen}
          onClose={handleCloseModal}
        />
      </div>
    </div>
  );
};