import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Shield, Plus, Pen } 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 className="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm">
      <CardHeader className="@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6">
        <div className="flex items-center justify-between w-full">
          <div>
            <CardTitle className="leading-none text-xl font-bold">Role Definitions</CardTitle>
            <CardDescription className="text-muted-foreground mt-1.5">Overview of available roles and their access levels</CardDescription>
          </div>
          <Button onClick={onAddRole} className="bg-re-red hover:bg-re-red-hover h-9">
            <Plus className="w-4 h-4 mr-2" />
            Add Role
          </Button>
        </div>
      </CardHeader>
      <CardContent className="px-6 [&:last-child]:pb-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {roles.map((role) => (
            <div key={role.id} className="border rounded-lg p-4 space-y-3 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Shield className="w-5 h-5 text-re-red" />
                  <h3 className="text-slate-900 font-bold">{role.name}</h3>
                </div>
                <Badge variant="secondary" className="border-transparent bg-secondary text-secondary-foreground text-xs font-medium">
                  {role.userCount || 0} users
                </Badge>
              </div>

              <div>
                <label className="items-center gap-2 font-medium text-xs text-slate-600 mb-2 block">Key Permissions</label>
                <div className="flex flex-wrap gap-1">
                  {(role.permissions || []).slice(0, 3).map((perm: string, idx: number) => (
                    <Badge key={idx} variant="outline" className="border px-2 py-0.5 font-medium text-foreground text-[10px] bg-white/50">
                      {perm.replace(/_/g, ' ').toLowerCase()}
                    </Badge>
                  ))}
                  {role.permissions?.length > 3 && (
                    <Badge variant="outline" className="text-[10px] border-slate-200">
                      +{role.permissions.length - 3}
                    </Badge>
                  )}
                </div>
              </div>

              <Button 
                variant="outline" 
                size="sm" 
                onClick={() => onEditRole(role)}
                className="w-full mt-2 h-8 rounded-md gap-1.5 px-3 border bg-background text-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
                title="Edit Permissions"
              >
                <Pen className="w-3 h-3 mr-1" />
                Edit Permissions
              </Button>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

