{{--
    Copyable Text Component - AdminLTE style
    Text field with copy to clipboard functionality
    
    Usage:
    <x-proxmox::ui.copyable label="IPv4 Address" value="192.168.1.1" />
--}}

@props([
    'label' => null,
    'value',
    'masked' => false,
])

<style>
    .copyable-lte-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .copyable-lte-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #495057;
    }
    .copyable-lte-field {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 1rem;
        background-color: #f8f9fa;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        font-size: 0.875rem;
        transition: border-color var(--lte-transition-speed, 0.3s) ease;
    }
    .copyable-lte-value {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        color: #212529;
    }
    .copyable-lte-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        padding: 0;
        background: transparent;
        border: none;
        color: #adb5bd;
        cursor: pointer;
        transition: color var(--lte-transition-speed, 0.3s) ease;
    }
    .copyable-lte-btn:hover {
        color: var(--lte-primary, #0d6efd);
    }
    .copyable-lte-btn svg {
        width: 1rem;
        height: 1rem;
        position: absolute;
    }
    .copyable-lte-btn-success {
        color: var(--lte-success, #198754);
    }
    /* Dark mode */
    .dark .copyable-lte-label {
        color: #d1d5db;
    }
    .dark .copyable-lte-field {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .copyable-lte-value {
        color: #e5e7eb;
    }
    .dark .copyable-lte-btn {
        color: #6b7280;
    }
    .dark .copyable-lte-btn:hover {
        color: var(--lte-primary, #0d6efd);
    }
</style>

<div class="copyable-lte-group">
    @if($label)
        <label class="copyable-lte-label">{{ $label }}</label>
    @endif
    <div 
        x-data="{
            copied: false,
            showValue: @js(!$masked),
            copyText: @js($value),
            copyToClipboard() {
                navigator.clipboard.writeText(this.copyText);
                this.copied = true;
                setTimeout(() => this.copied = false, 2000);
            }
        }"
        class="copyable-lte-field"
    >
        @if($masked)
            <span class="copyable-lte-value" x-text="showValue ? copyText : '••••••••••••'"></span>
            <button 
                @click="showValue = !showValue" 
                type="button"
                class="copyable-lte-btn"
                :aria-label="showValue ? 'Hide value' : 'Show value'"
            >
                <x-ri-eye-line x-show="!showValue" />
                <x-ri-eye-off-line x-show="showValue" x-cloak />
            </button>
        @else
            <span class="copyable-lte-value">{{ $value }}</span>
        @endif
        <button 
            @click="copyToClipboard()" 
            type="button"
            class="copyable-lte-btn"
            :class="copied ? 'copyable-lte-btn-success' : ''"
            aria-label="Copy to clipboard"
        >
            <x-ri-check-fill x-show="copied" x-transition x-cloak />
            <x-ri-file-copy-line x-show="!copied" x-transition />
        </button>
    </div>
</div>