import React from 'react';
import { colors } from './colors';

interface FilePermissionsProps {
    mode: string;
    modeBits: string;
    compact?: boolean;
}

const FilePermissions: React.FC<FilePermissionsProps> = ({ mode, modeBits, compact = false }) => {
    const bits = modeBits.padStart(4, '0');
    const owner = parseInt(bits[1] || '0');
    const group = parseInt(bits[2] || '0');
    const others = parseInt(bits[3] || '0');

    const hasPermission = (value: number, bit: number) => (value & bit) !== 0;

    const renderPermissionGroup = (value: number, label: string) => (
        <div className="flex gap-0.5">
            {!compact && <span className="text-neutral-300 mr-1">{label}</span>}
            <span
                className={`px-1 rounded ${hasPermission(value, 4) ? '' : 'text-gray-300'}`}
                style={
                    hasPermission(value, 4)
                        ? { color: colors.success.default, background: colors.success.opacity(0.3) }
                        : undefined
                }
            >
                r
            </span>
            <span
                className={`px-1 rounded ${hasPermission(value, 2) ? '' : 'text-gray-300'}`}
                style={
                    hasPermission(value, 2)
                        ? { color: colors.success.default, background: colors.success.opacity(0.3) }
                        : undefined
                }
            >
                w
            </span>
            <span
                className={`px-1 rounded ${hasPermission(value, 1) ? '' : 'text-gray-300'}`}
                style={
                    hasPermission(value, 1)
                        ? { color: colors.success.default, background: colors.success.opacity(0.3) }
                        : undefined
                }
            >
                x
            </span>
        </div>
    );

    if (compact) {
        const isReadable = mode.includes('r');
        return (
            <div className="flex items-center gap-1 text-xs font-mono text-neutral-300" title={`Permissions: $local`}>
                <svg
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                >
                    {isReadable ? (
                        <>
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                            <path d="M7 11V7a5 5 0 0 1 9.9-1" />
                        </>
                    ) : (
                        <>
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                        </>
                    )}
                </svg>
                <span className="text-neutral-300">{modeBits}</span>
            </div>
        );
    }

    return (
        <div className="flex items-center gap-1 text-xs font-mono text-neutral-300">
            {renderPermissionGroup(owner, 'u')}
            <span className="text-neutral-300 mx-1">|</span>
            {renderPermissionGroup(group, 'g')}
            <span className="text-neutral-300 mx-1">|</span>
            {renderPermissionGroup(others, 'o')}
            <span className="text-neutral-300 ml-2">({modeBits})</span>
        </div>
    );
};

export default FilePermissions;