/**
 * UnlinkableField Component
 * 
 * Wraps a field with link/unlink functionality.
 * Shows visual indication when field is unlinked from preset.
 * 
 * @since 1.5.0
 */

import React from 'react';
import { Link2, Link2Off } from 'lucide-react';
import { t, sprintf } from '@/lib/i18n';

export interface UnlinkableFieldProps {
    /** Field identifier */
    fieldKey: string;
    /** Display label */
    label: string;
    /** Is this field unlinked (overridden) from preset? */
    isUnlinked: boolean;
    /** Is a preset selected? If not, no link/unlink is needed */
    hasPreset: boolean;
    /** Callback when user clicks unlink */
    onUnlink: (fieldKey: string) => void;
    /** Callback when user clicks re-link */
    onRelink?: (fieldKey: string) => void;
    /** The field content (input, color picker, etc.) */
    children: React.ReactNode;
    /** Optional: preset value to show what the linked value would be */
    presetValue?: string;
    /** Optional: show inline (horizontal layout) */
    inline?: boolean;
}

export const UnlinkableField: React.FC<UnlinkableFieldProps> = ({
    fieldKey,
    label,
    isUnlinked,
    hasPreset,
    onUnlink,
    onRelink,
    children,
    presetValue,
    inline = false,
}) => {
    // If no preset is selected, just render the field normally
    if (!hasPreset) {
        return (
            <div className="space-y-1">
                <label className="block text-sm font-medium text-gray-700">
                    {label}
                </label>
                {children}
            </div>
        );
    }

    const handleToggle = () => {
        if (isUnlinked && onRelink) {
            onRelink(fieldKey);
        } else {
            onUnlink(fieldKey);
        }
    };

    return (
        <div 
            className={`
                relative rounded-lg transition-all duration-200
                ${isUnlinked 
                    ? 'bg-amber-50 border-2 border-amber-300 p-3 shadow-sm' 
                    : 'bg-gray-50 border border-gray-200 p-3'
                }
            `}
        >
            {/* Header with label and link/unlink button */}
            <div className={`flex items-center justify-between ${inline ? '' : 'mb-2'}`}>
                <label className="flex items-center gap-2 text-sm font-medium text-gray-700">
                    {label}
                    {isUnlinked && (
                        <span className="text-xs px-2 py-0.5 bg-amber-200 text-amber-800 rounded-full font-normal">
                            {t('Unlinked')}
                        </span>
                    )}
                </label>
                
                <button
                    type="button"
                    onClick={handleToggle}
                    className={`
                        flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium
                        transition-all duration-200
                        ${isUnlinked 
                            ? 'bg-amber-200 text-amber-800 hover:bg-amber-300' 
                            : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                        }
                    `}
                    title={isUnlinked ? t('Relink to Preset') : t('Unlink from Preset')}
                >
                    {isUnlinked ? (
                        <>
                            <Link2 className="w-3.5 h-3.5" />
                            <span>{t('Relink')}</span>
                        </>
                    ) : (
                        <>
                            <Link2Off className="w-3.5 h-3.5" />
                            <span>{t('Unlink')}</span>
                        </>
                    )}
                </button>
            </div>

            {/* Preset value indicator when linked */}
            {!isUnlinked && presetValue && (
                <div className="mb-2 text-xs text-blue-600 flex items-center gap-1">
                    <Link2 className="w-3 h-3" />
                    <span>{sprintf(t('Linked to Preset: %s'), presetValue)}</span>
                </div>
            )}

            {/* The actual field */}
            <div className={inline ? 'flex-1' : ''}>
                {children}
            </div>

            {/* Visual indicator for unlinked state */}
            {isUnlinked && (
                <div className="absolute top-0 left-0 w-1 h-full bg-amber-400 rounded-l-lg" />
            )}
        </div>
    );
};

export default UnlinkableField;


