import React, { useEffect, useRef } from 'react';
import { Badge, Card, Form } from 'react-bootstrap';
import type { PermissionOption, PermissionStatus } from './permissionTypes';

interface Props {
    option: PermissionOption;
    isSelected: (permission: string) => boolean;
    statusOf: (permission: string) => PermissionStatus;
    onToggleAction: (permission: string, checked: boolean) => void;
    onToggleOption: (permissions: string[], checked: boolean) => void;
}

const STATUS_BADGES: Record<PermissionStatus, { label: string; bg: string; text?: string }> = {
    inherited: { label: 'Heredado del rol', bg: 'light', text: 'dark' },
    additional: { label: 'Adicional', bg: 'info' },
    revoked: { label: 'Revocado', bg: 'danger' },
    available: { label: 'No asignado', bg: 'secondary' },
};

export const PermissionOptionCard = ({
    option,
    isSelected,
    statusOf,
    onToggleAction,
    onToggleOption,
}: Props) => {
    const permissions = option.actions.map((action) => action.permission);
    const selectedCount = permissions.filter(isSelected).length;
    const allSelected = selectedCount === permissions.length;
    const partiallySelected = selectedCount > 0 && !allSelected;
    const selectAllRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (selectAllRef.current) {
            selectAllRef.current.indeterminate = partiallySelected;
        }
    }, [partiallySelected]);

    return (
        <Card className="h-100 border permission-option-card">
            <Card.Header className="bg-light d-flex justify-content-between gap-3 align-items-start">
                <div>
                    <div className="fw-semibold">{option.label}</div>
                    <small className="text-muted d-block">{option.path}</small>
                </div>
                <div className="form-check form-switch mb-0">
                    <input
                        ref={selectAllRef}
                        id={`permission-option-${option.id}`}
                        className="form-check-input"
                        type="checkbox"
                        checked={allSelected}
                        onChange={(event) => onToggleOption(permissions, event.target.checked)}
                        aria-label={`Asignar todos los permisos de ${option.label}`}
                    />
                </div>
            </Card.Header>
            <Card.Body>
                <p className="text-muted small mb-3">{option.description}</p>
                <div className="d-grid gap-3">
                    {option.actions.map((action) => {
                        const status = statusOf(action.permission);
                        const badge = STATUS_BADGES[status];

                        return (
                            <div className="d-flex justify-content-between gap-3" key={action.permission}>
                                <Form.Check
                                    id={`permission-${action.permission.replaceAll('.', '-')}`}
                                    checked={isSelected(action.permission)}
                                    onChange={(event) => onToggleAction(action.permission, event.target.checked)}
                                    label={(
                                        <span>
                                            <span className="d-block fw-medium">{action.label}</span>
                                            <small className="text-muted">{action.description}</small>
                                        </span>
                                    )}
                                />
                                <Badge
                                    bg={badge.bg}
                                    text={badge.text}
                                    className="align-self-start text-nowrap"
                                >
                                    {badge.label}
                                </Badge>
                            </div>
                        );
                    })}
                </div>
            </Card.Body>
        </Card>
    );
};