import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { Shield, Plus, Edit2, Users } from 'lucide-react';
import { RootState } from '../../../store';

interface RolePermissionsProps {
  onAddRole: () => void;
  onEditRole: (role: any) => void;
}

export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onEditRole }) => {
  const { roles } = useSelector((state: RootState) => state.master);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Roles & Access Controls</CardTitle>
            <CardDescription>Manage user roles and their associated system permissions</CardDescription>
          </div>
          <Button onClick={onAddRole} className="bg-amber-600 hover:bg-amber-700">
            <Plus className="w-4 h-4 mr-2" />
            Add Role
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {roles.map((role) => (
            <div key={role.id} className="border-2 rounded-xl p-6 bg-white hover:border-amber-200 transition-all group shadow-sm">
              <div className="flex items-center justify-between mb-4">
                <div className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center group-hover:bg-purple-100 transition-colors">
                  <Shield className="w-6 h-6 text-purple-700" />
                </div>
                <div className="flex gap-2">
                  <Button variant="ghost" size="sm" onClick={() => onEditRole(role)} className="h-8 w-8 p-0">
                    <Edit2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-1">{role.name}</h3>
              <div className="flex items-center gap-2 text-sm text-slate-500 mb-4">
                <Users className="w-4 h-4" />
                <span>{role.userCount} Active Users</span>
              </div>
              
              <div className="space-y-3">
                <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Key Permissions</p>
                <div className="flex flex-wrap gap-1.5">
                  {role.permissions?.slice(0, 6).map((perm: string, idx: number) => (
                    <Badge key={idx} variant="secondary" className="text-[10px] bg-slate-50 border-slate-200 font-medium">
                      {perm.replace(/_/g, ' ')}
                    </Badge>
                  ))}
                  {role.permissions?.length > 6 && (
                    <Badge variant="outline" className="text-[10px] border-slate-200">
                      +{role.permissions.length - 6} more
                    </Badge>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};