<template>
    <div class="space-y-4">
        <!-- API Key -->
        <div>
            <div class="settings-row border-b border-gray-100 py-4">
                <div class="settings-label">
                    <div class="label-title">{{ $t('Anthropic API Key') }} <span class="text-red-500">*</span></div>
                    <div class="label-help">{{ $t('Your Anthropic API key will be encrypted and stored securely.') }}</div>
                </div>
                <div class="settings-control">
                    <div class="relative">
                        <input
                            :type="showApiKey ? 'text' : 'password'"
                            v-model="localForm.anthropic_api_key"
                            class="form-input w-full pr-10"
                            placeholder="sk-ant-..."
                        />
                        <button
                            type="button"
                            @click="showApiKey = !showApiKey"
                            class="absolute inset-y-0 right-0 pr-3 flex items-center"
                        >
                            <Icon
                                :name="showApiKey ? 'eye-off-line' : 'eye-line'"
                                size="sm"
                                class="text-gray-400 hover:text-gray-600"
                            />
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Model Selection -->
        <div>
            <div class="settings-row border-b border-gray-100 py-4">
                <div class="settings-label">
                    <div class="label-title">{{ $t('Model') }} <span class="text-red-500">*</span></div>
                    <div class="label-help">{{ $t('Choose the Anthropic Claude model for generating responses.') }}</div>
                </div>
                <div class="settings-control">
                    <select v-model="localForm.anthropic_model" class="form-select w-full">
                        <option value="">{{ $t('Select a model') }}</option>
                        <option value="claude-3-opus-20240229">Claude 3 Opus</option>
                        <option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
                        <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
                        <option value="claude-2.1">Claude 2.1</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Temperature -->
        <div>
            <div class="settings-row border-b border-gray-100 py-4">
                <div class="settings-label">
                    <div class="label-title flex items-center gap-2">
                        {{ $t('Temperature') }}: {{ localForm.anthropic_temperature }}
                        <div class="relative group">
                            <Icon
                                name="information-line"
                                size="sm"
                                class="text-gray-400 hover:text-gray-600 cursor-help"
                            />
                            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                                Temperature affects Claude's response style.<br/>
                                0 = Consistent & predictable, 1 = Creative & varied.
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
                            </div>
                        </div>
                    </div>
                    <div class="label-help">{{ $t('Controls randomness in responses. Lower values are more focused, higher values are more creative.') }}</div>
                </div>
                <div class="settings-control">
                    <RangeSlider
                        v-model="localForm.anthropic_temperature"
                        :min="0"
                        :max="1"
                        :step="0.1"
                        :labels="[
                            '0 (' + $t('Focused') + ')',
                            '0.5 (' + $t('Balanced') + ')',
                            '1 (' + $t('Creative') + ')'
                        ]"
                        color="purple"
                    />
                </div>
            </div>
        </div>

        <!-- Max Tokens -->
        <div>
            <div class="settings-row border-b border-gray-100 py-4">
                <div class="settings-label">
                    <div class="label-title flex items-center gap-2">
                        {{ $t('Max Tokens') }}
                        <div class="relative group">
                            <Icon
                                name="information-line"
                                size="sm"
                                class="text-gray-400 hover:text-gray-600 cursor-help"
                            />
                            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                                Higher values = more detailed responses but cost more.<br/>
                                Lower values = concise responses and save costs.
                                <div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900"></div>
                            </div>
                        </div>
                    </div>
                    <div class="label-help">{{ $t('Maximum number of tokens in the response. Claude models support up to 4000 tokens.') }}</div>
                </div>
                <div class="settings-control">
                    <input
                        type="number"
                        min="1"
                        max="4000"
                        v-model="localForm.anthropic_max_tokens"
                        class="form-input w-full"
                        placeholder="2000"
                    />
                </div>
            </div>
        </div>

        <!-- Test Connection -->
        <div v-if="localForm.anthropic_api_key">
            <div class="settings-row border-b border-gray-100 py-4">
                <div class="settings-label">
                    <div class="label-title">{{ $t('Test Connection') }}</div>
                    <div class="label-help">{{ $t('Verify your Anthropic API configuration.') }}</div>
                </div>
                <div class="settings-control">
                    <div class="flex items-center gap-4">
                        <button
                            @click="handleTestConnection"
                            :disabled="isTesting"
                            class="btn-success"
                        >
                            <Icon
                                :name="isTesting ? 'loader-line' : 'play-line'"
                                size="sm"
                                :class="{ 'animate-spin': isTesting }"
                                class="mr-2"
                            />
                            {{ isTesting ? $t('Testing...') : $t('Test Connection') }}
                        </button>

                        <div v-if="connectionStatus" class="flex items-center gap-2">
                            <Icon
                                :name="connectionStatus.success ? 'check-line' : 'close-line'"
                                size="sm"
                                :class="connectionStatus.success ? 'text-green-600' : 'text-red-600'"
                            />
                            <span :class="connectionStatus.success ? 'text-green-600' : 'text-red-600'">
                                {{ connectionStatus.message }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Icon from '@/Admin/Components/Icon.vue'
import RangeSlider from '@/Admin/Components/RangeSlider.vue'

const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    },
    isTesting: {
        type: Boolean,
        default: false
    },
    connectionStatus: {
        type: Object,
        default: null
    }
})

const emit = defineEmits(['update:modelValue', 'test-connection'])

// Local reactive state
const showApiKey = ref(false)

// Create a local form object that syncs with the parent
const localForm = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

const handleTestConnection = () => {
    emit('test-connection', {
        api_key: localForm.value.anthropic_api_key,
        model: localForm.value.anthropic_model,
        temperature: localForm.value.anthropic_temperature,
        max_tokens: localForm.value.anthropic_max_tokens
    })
}
</script>

<style lang="scss" scoped>
// Settings layout styles
.settings-row {
  @apply flex flex-col md:flex-row md:items-start gap-4;
}

.settings-label {
  @apply md:w-1/3 flex-shrink-0;
}

.label-title {
  @apply text-sm font-medium text-gray-900 mb-1;
}

.label-help {
  @apply text-sm text-gray-500;
}

.settings-control {
  @apply md:w-2/3 flex-1;
}

// Form input styles
.form-input, .form-select {
  @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-select {
  @apply bg-white;
}

// Button styles
.btn-success {
  @apply bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center;
}

// Range slider styles are now handled by the RangeSlider component
</style>
