'use client';

import { useState } from 'react';
import { RoleCards } from './RoleCards';
import { UserPanel } from './UserPanel';
import { AdminPanel } from './AdminPanel';
import { SuperAdminPanel } from './SuperAdminPanel';
import { ArrowLeft, X } from 'lucide-react';
import type { RoleType } from '@/utils/permissions';

export function RoleSelector() {
  const [selectedRole, setSelectedRole] = useState<RoleType | null>(null);

  const handleSelectRole = (role: RoleType) => {
    setSelectedRole(role === selectedRole ? null : role);
  };

  const handleClose = () => {
    setSelectedRole(null);
  };

  return (
    <div className="rounded-xl border border-white/5 bg-slate-900/50">
      <div className="flex items-center justify-between border-b border-white/5 px-4 py-3">
        <div className="flex items-center gap-2">
          {selectedRole ? (
            <button
              onClick={handleClose}
              className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-slate-400 hover:bg-white/5 hover:text-white transition-colors"
            >
              <ArrowLeft className="h-3.5 w-3.5" />
              Back
            </button>
          ) : null}
          <h3 className="text-xs font-semibold text-white">
            {selectedRole ? `${selectedRole} Testing Panel` : 'Role-Based Testing'}
          </h3>
        </div>
        {selectedRole && (
          <button
            onClick={handleClose}
            className="rounded-lg p-1.5 text-slate-400 hover:bg-white/5 hover:text-white transition-colors"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        )}
      </div>

      <div className="p-4">
        {!selectedRole ? (
          <RoleCards onSelectRole={handleSelectRole} selectedRole={null} />
        ) : selectedRole === 'USER' ? (
          <UserPanel />
        ) : selectedRole === 'ADMIN' ? (
          <AdminPanel />
        ) : (
          <SuperAdminPanel />
        )}
      </div>
    </div>
  );
}