import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { Role, KPICard } from './DashboardConfig';

interface RoleDashboardSectionProps {
  role: Role;
  kpis: Record<string, boolean>;
  onKPIToggle: (kpi: KPICard, checked: boolean) => void;
}

const kpiCards: KPICard[] = [
  'Total Requests',
  'Open Requests',
  'Approved Requests',
  'Rejected Requests',
  'My Pending Actions',
  'TAT Compliance',
  'Delayed Workflows',
  'Average Cycle Time'
];

const getRoleBadgeColor = (role: Role) => {
  switch (role) {
    case 'Initiator':
      return 'bg-blue-100 text-blue-800';
    case 'Approver':
      return 'bg-green-100 text-green-800';
    case 'Spectator':
      return 'bg-gray-100 text-gray-800';
    default:
      return 'bg-gray-100 text-gray-800';
  }
};

export function RoleDashboardSection({ role, kpis, onKPIToggle }: RoleDashboardSectionProps) {
  return (
    <div className="space-y-3">
      <h4 className="font-medium flex items-center gap-2">
        <Badge className={getRoleBadgeColor(role)}>
          {role} Dashboard
        </Badge>
      </h4>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-2 ml-4">
        {kpiCards.map((kpi) => (
          <div key={kpi} className="flex items-center space-x-2 p-2 bg-muted/50 rounded">
            <Checkbox
              id={`${role.toLowerCase()}-${kpi}`}
              checked={kpis[kpi] || false}
              onCheckedChange={(checked) => onKPIToggle(kpi, checked === true)}
            />
            <label
              htmlFor={`${role.toLowerCase()}-${kpi}`}
              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
            >
              {kpi}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}