import { StaffUserForm } from '@/components/StaffUserForm';

export function SuperAdminRoute() {
  return (
    <div className="max-w-6xl mx-auto space-y-6">
      <div className="bg-white rounded-lg shadow-md p-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Super Admin Dashboard</h1>
        <p className="text-gray-600">Advanced system management and user administration</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* System Management Cards */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">System Overview</h2>
          <div className="space-y-3">
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Total Users</span>
              <span className="font-semibold">1,234</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">Active Sessions</span>
              <span className="font-semibold">89</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-gray-600">System Health</span>
              <span className="text-green-600 font-semibold">Good</span>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold text-gray-900 mb-4">Recent Activity</h2>
          <div className="space-y-2 text-sm text-gray-600">
            <p>• New user registration</p>
            <p>• Order completed</p>
            <p>• System backup completed</p>
          </div>
        </div>

        {/* Staff User Management - Full Width */}
        <div className="lg:col-span-2">
          <StaffUserForm
            onSuccess={() => {
              // Could refresh staff list or show additional success feedback
              console.log('Staff user created successfully');
            }}
          />
        </div>
      </div>
    </div>
  );
}