import type { PermState } from '../PermissionsPanel';

interface PermCellProps {
  state: PermState;
  onToggle: () => void;
  label?: string;
  readOnly?: boolean;
}

export function PermCell({ state, onToggle, label, readOnly = false }: PermCellProps) {
  const isDisabled = state === 'forced-denied' || readOnly;

  const baseClasses =
    'w-5 h-5 rounded border text-caption font-bold transition-all flex items-center justify-center';

  let classes: string;
  let icon: string;

  switch (state) {
    case 'explicit-granted':
      classes = readOnly
        ? `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-default`
        : `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-pointer hover:bg-[rgba(6,182,212,0.3)]`;
      icon = '✓';
      break;
    case 'inherited-granted':
      classes = readOnly
        ? `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-default`
        : `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-pointer hover:border-color-accent`;
      icon = '✓';
      break;
    case 'explicit-denied':
      classes = readOnly
        ? `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-default`
        : `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-pointer hover:border-color-danger`;
      icon = '—';
      break;
    case 'forced-denied':
      classes = `${baseClasses} bg-bg-elevated border-stroke text-fg-disabled opacity-40 cursor-not-allowed`;
      icon = '—';
      break;
  }

  return (
    <button
      onClick={isDisabled ? undefined : onToggle}
      disabled={isDisabled}
      className={classes}
      title={
        readOnly
          ? state === 'explicit-granted'
            ? `${label ?? ''} 허용`
            : state === 'inherited-granted'
              ? `${label ?? ''} 상속 허용`
              : state === 'explicit-denied'
                ? `${label ?? ''} 거부`
                : `${label ?? ''} 비활성`
          : state === 'explicit-granted'
            ? `${label ?? ''} 명시적 허용 (클릭: 거부로 전환)`
            : state === 'inherited-granted'
              ? `${label ?? ''} 부모 상속 허용 (클릭: 명시적 거부)`
              : state === 'explicit-denied'
                ? `${label ?? ''} 명시적 거부 (클릭: 허용으로 전환)`
                : `${label ?? ''} 부모 거부로 비활성`
      }
    >
      {icon}
    </button>
  );
}
