import React, { useEffect, useRef } from 'react';
import { 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; className: string }> = {
    inherited: { label: 'Heredado del rol', className: 'inherited' },
    additional: { label: 'Adicional', className: 'additional' },
    revoked: { label: 'Revocado', className: 'revoked' },
    available: { label: 'No asignado', className: 'available' },
};

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 (
        <div className="apple-permission-card permission-option-card">
            <div className="apple-permission-card-header">
                <div>
                    <div className="apple-permission-card-title">{option.label}</div>
                    <span className="apple-permission-card-path">{option.path}</span>
                </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}`}
                        style={{ cursor: 'pointer' }}
                    />
                </div>
            </div>
            <div className="apple-permission-card-body">
                <p style={{ fontSize: '0.76rem', color: '#64748b', marginBottom: '0.65rem' }}>
                    {option.description}
                </p>
                <div>
                    {option.actions.map((action) => {
                        const status = statusOf(action.permission);
                        const badge = STATUS_BADGES[status];

                        return (
                            <div className="apple-permission-action-row" 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"
                                                style={{ fontSize: '0.8125rem', fontWeight: 600, color: '#1e293b' }}
                                            >
                                                {action.label}
                                            </span>
                                            <small style={{ fontSize: '0.73rem', color: '#64748b' }}>
                                                {action.description}
                                            </small>
                                        </span>
                                    }
                                />
                                <span
                                    className={`apple-legend-pill ${badge.className} align-self-start text-nowrap`}
                                >
                                    {badge.label}
                                </span>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};