karibeo_backend_admin/src/components/roles/RoleManagement.tsx

import React, { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { 
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Plus, Edit, Trash2, Users, Shield } from 'lucide-react';
import { EntityType, Role, PERMISSIONS } from '@/types/roles';
import { useRolesPermissions } from '@/hooks/useRolesPermissions';

interface RoleManagementProps {
  entityType: EntityType;
}

const RoleManagement: React.FC<RoleManagementProps> = ({ entityType }) => {
  const { roles, getRolesByEntity, createRole, updateRole, deleteRole } = useRolesPermissions();
  const [isCreateOpen, setIsCreateOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<Role | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    permissions: [] as string[],
  });

  const entityRoles = getRolesByEntity(entityType);
  const availablePermissions = PERMISSIONS[entityType] || [];

  const getEntityTitle = () => {
    const titles: Record<EntityType, string> = {
      admin: 'Admin System',
      hotel: 'Hotel Management',
      restaurant: 'Restaurant Management',
      commerce: 'Commerce Management',
    };
    return titles[entityType];
  };

  const handleSubmit = () => {
    if (editingRole) {
      updateRole(editingRole.id, formData);
      setEditingRole(null);
    } else {
      createRole({
        ...formData,
        entityType,
      });
    }
    setIsCreateOpen(false);
    setFormData({ name: '', description: '', permissions: [] });
  };

  const handleEdit = (role: Role) => {
    setEditingRole(role);
    setFormData({
      name: role.name,
      description: role.description,
      permissions: role.permissions,
    });
    setIsCreateOpen(true);
  };

  const handleDelete = (roleId: string) => {
    if (confirm('Are you sure you want to delete this role?')) {
      deleteRole(roleId);
    }
  };

  const togglePermission = (permissionId: string) => {
    setFormData(prev => ({
      ...prev,
      permissions: prev.permissions.includes(permissionId)
        ? prev.permissions.filter(p => p !== permissionId)
        : [...prev.permissions, permissionId],
    }));
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Shield className="w-6 h-6 text-primary" />
          <div>
            <h2 className="text-2xl font-bold">{getEntityTitle()}</h2>
            <p className="text-muted-foreground">Manage roles and permissions</p>
          </div>
        </div>
        <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
          <DialogTrigger asChild>
            <Button onClick={() => {
              setEditingRole(null);
              setFormData({ name: '', description: '', permissions: [] });
            }}>
              <Plus className="w-4 h-4 mr-2" />
              New Role
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{editingRole ? 'Edit Role' : 'Create New Role'}</DialogTitle>
              <DialogDescription>
                Define role name, description, and permissions
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label>Role Name</Label>
                <Input
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="e.g., Manager, Operator"
                />
              </div>
              <div>
                <Label>Description</Label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Brief description of this role"
                />
              </div>
              <div>
                <Label className="mb-3 block">Permissions</Label>
                <div className="space-y-4">
                  {Object.entries(
                    availablePermissions.reduce((acc, perm) => {
                      if (!acc[perm.module]) acc[perm.module] = [];
                      acc[perm.module].push(perm);
                      return acc;
                    }, {} as Record<string, typeof availablePermissions>)
                  ).map(([module, perms]) => (
                    <div key={module} className="border rounded-lg p-4">
                      <h4 className="font-semibold mb-3">{module}</h4>
                      <div className="space-y-2">
                        {perms.map((perm) => (
                          <div key={perm.id} className="flex items-center space-x-2">
                            <Checkbox
                              id={perm.id}
                              checked={formData.permissions.includes(perm.id)}
                              onCheckedChange={() => togglePermission(perm.id)}
                            />
                            <Label htmlFor={perm.id} className="flex-1 cursor-pointer">
                              <div className="font-medium">{perm.name}</div>
                              <div className="text-sm text-muted-foreground">{perm.description}</div>
                            </Label>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="flex justify-end gap-2 pt-4">
                <Button variant="outline" onClick={() => setIsCreateOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={handleSubmit} disabled={!formData.name || formData.permissions.length === 0}>
                  {editingRole ? 'Update' : 'Create'} Role
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <div className="grid gap-4">
        {entityRoles.map((role) => (
          <Card key={role.id} className="p-6">
            <div className="flex items-start justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <h3 className="text-lg font-semibold">{role.name}</h3>
                  {role.isSystem && (
                    <Badge variant="secondary">System Role</Badge>
                  )}
                  <div className="flex items-center gap-1 text-muted-foreground">
                    <Users className="w-4 h-4" />
                    <span className="text-sm">{role.userCount} users</span>
                  </div>
                </div>
                <p className="text-muted-foreground mb-4">{role.description}</p>
                <div className="flex flex-wrap gap-2">
                  {role.permissions.map((permId) => {
                    const perm = availablePermissions.find(p => p.id === permId);
                    return perm ? (
                      <Badge key={permId} variant="outline">
                        {perm.name}
                      </Badge>
                    ) : null;
                  })}
                </div>
              </div>
              <div className="flex gap-2">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => handleEdit(role)}
                >
                  <Edit className="w-4 h-4" />
                </Button>
                {!role.isSystem && (
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDelete(role.id)}
                  >
                    <Trash2 className="w-4 h-4" />
                  </Button>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default RoleManagement;