import { useNavigate } from '@tanstack/react-router'
import { useUserStore } from '@/stores/userStore'
import { removeAuthToken } from '@/services/auth'
import { StaffUserForm } from '@/components/StaffUserForm';

export function SuperAdminRoute() {
  const navigate = useNavigate()
  const clearUser = useUserStore((state) => state.clearUser)

  const handleLogout = async () => {
    await removeAuthToken()
    clearUser()
    navigate({ to: '/login' as any })
  }

  return (
    <div className="max-w-6xl mx-auto space-y-6">
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="flex justify-between items-start">
          <div>
            <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>
          <button
            onClick={handleLogout}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
          >
            Logout
          </button>
        </div>
      </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>
  );
}