<template>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
        <!-- Header -->
        <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600 rounded-t-lg">
            <div class="flex items-center space-x-2">
                <Cog6ToothIcon class="w-5 h-5 text-gray-600 dark:text-gray-400" />
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ isEditing ? 'Edit Scrapper Configuration' : 'New Scrapper Configuration' }}
                </h2>
            </div>
        </div>

        <!-- Form -->
        <form @submit.prevent="handleSubmit" class="p-6 space-y-6">
            <!-- Base URL -->
            <div>
                <label for="baseUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Base URL
                </label>
                <input
                    id="baseUrl"
                    v-model="form.baseUrl"
                    type="url"
                    required
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder="https://example.com" />
            </div>

            <!-- Image Selector -->
            <div>
                <label for="imageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Image Selector
                </label>
                <input
                    id="imageSelector"
                    v-model="form.imageSelector"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder=".reading-content .page-break img" />
            </div>

            <!-- Chapter URL Format -->
            <div>
                <label for="chapterUrlFormat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Chapter URL Format <span class="text-gray-500">({slug}, {chapterNumber})</span>
                </label>
                <input
                    id="chapterUrlFormat"
                    v-model="form.chapterUrlFormat"
                    type="text"
                    required
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder="https://example.com/manga/{slug}-{chapterNumber}/" />
            </div>

            <!-- Next Page Selector -->
            <div>
                <label for="nextPageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Next Page Selector <span class="text-gray-500">(let empty if vertical reader)</span>
                </label>
                <input
                    id="nextPageSelector"
                    v-model="form.nextPageSelector"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder=".next-page" />
            </div>

            <!-- Chapter Selector -->
            <div>
                <label for="chapterSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Chapter Selector <span class="text-gray-500">(required for Javascript scraping)</span>
                </label>
                <input
                    id="chapterSelector"
                    v-model="form.chapterSelector"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder=".chapter-selector" />
            </div>

            <!-- Scraping Type -->
            <div>
                <label for="scrapingType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Scraping Type
                </label>
                <select
                    id="scrapingType"
                    v-model="form.scrapingType"
                    required
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    <option value="html">HTML</option>
                    <option value="javascript">Javascript</option>
                </select>
            </div>

            <!-- Token (optionnel) -->
            <div>
                <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Token
                </label>
                <input
                    id="token"
                    v-model="form.token"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder="Optional authentication token" />
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end">
                <button
                    type="submit"
                    :disabled="saving"
                    class="px-6 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white font-medium rounded-md transition-colors duration-200 flex items-center space-x-2">
                    <ArrowPathIcon v-if="saving" class="w-4 h-4 animate-spin" />
                    <span>{{ isEditing ? 'Update Configuration' : 'Create Configuration' }}</span>
                    <PencilSquareIcon v-if="!saving" class="w-4 h-4" />
                </button>
            </div>

            <!-- Error message -->
            <div v-if="error" class="text-red-600 dark:text-red-400 text-sm">
                {{ error }}
            </div>
        </form>

        <!-- Test Configuration Section -->
        <div class="border-t border-gray-200 dark:border-gray-600 p-6 bg-gray-50 dark:bg-gray-700 rounded-b-lg">
            <div class="flex items-center space-x-2 mb-4">
                <WrenchScrewdriverIcon class="w-5 h-5 text-gray-600 dark:text-gray-400" />
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Test Configuration</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label for="testMangaSlug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Manga Slug
                    </label>
                    <input
                        id="testMangaSlug"
                        v-model="testData.mangaSlug"
                        type="text"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                        placeholder="manga-slug" />
                </div>

                <div>
                    <label for="testChapterNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Chapter Number
                    </label>
                    <input
                        id="testChapterNumber"
                        v-model="testData.chapterNumber"
                        type="number"
                        step="0.1"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                        placeholder="1" />
                </div>
            </div>

            <!-- Preview de l'URL qui sera testée -->
            <div v-if="generatedTestUrl" class="mb-4 p-3 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-md">
                <div class="text-sm text-blue-800 dark:text-blue-200">
                    <strong>URL qui sera testée :</strong>
                    <div class="mt-1 font-mono text-xs break-all">{{ generatedTestUrl }}</div>
                </div>
            </div>

            <button
                type="button"
                @click="testConfiguration"
                :disabled="testing || !canTest"
                class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-md transition-colors duration-200 flex items-center justify-center space-x-2">
                <ArrowPathIcon v-if="testing" class="w-4 h-4 animate-spin" />
                <PlayIcon v-else class="w-4 h-4" />
                <span>Test Configuration</span>
            </button>
        </div>
    </div>
</template>

<script setup>
import {
    ArrowPathIcon,
    Cog6ToothIcon,
    PencilSquareIcon,
    PlayIcon,
    WrenchScrewdriverIcon
} from '@heroicons/vue/24/outline';
import { computed, ref, watch } from 'vue';

const props = defineProps({
    source: {
        type: Object,
        default: null
    },
    saving: {
        type: Boolean,
        default: false
    },
    error: {
        type: String,
        default: null
    }
});

const emit = defineEmits(['submit', 'test']);

const isEditing = computed(() => !!props.source);

const form = ref({
    baseUrl: '',
    imageSelector: '',
    chapterUrlFormat: '',
    nextPageSelector: '',
    chapterSelector: '',
    scrapingType: 'html',
    token: ''
});

const testData = ref({
    mangaSlug: '',
    chapterNumber: ''
});

const testing = ref(false);

const canTest = computed(() => {
    return form.value.baseUrl &&
           form.value.chapterUrlFormat &&
           testData.value.mangaSlug &&
           testData.value.chapterNumber;
});

const generatedTestUrl = computed(() => {
    if (!form.value.chapterUrlFormat || !testData.value.mangaSlug || !testData.value.chapterNumber) {
        return '';
    }
    return form.value.chapterUrlFormat
        .replace('{slug}', testData.value.mangaSlug)
        .replace('{chapterNumber}', testData.value.chapterNumber);
});

// Initialize form with source data if editing, clear if creating new
watch(() => props.source, (newSource) => {
    if (newSource) {
        form.value = {
            baseUrl: newSource.baseUrl || '',
            imageSelector: newSource.imageSelector || '',
            chapterUrlFormat: newSource.chapterUrlFormat || '',
            nextPageSelector: newSource.nextPageSelector || '',
            chapterSelector: newSource.chapterSelector || '',
            scrapingType: (newSource.scrapingType || 'html').toLowerCase(),
            token: newSource.token || ''
        };
    } else {
        // Reset form when no source (creating new)
        form.value = {
            baseUrl: '',
            imageSelector: '',
            chapterUrlFormat: '',
            nextPageSelector: '',
            chapterSelector: '',
            scrapingType: 'html',
            token: ''
        };
    }
}, { immediate: true });

const handleSubmit = () => {
    emit('submit', { ...form.value });
};

const testConfiguration = async () => {
    testing.value = true;
    try {
        await emit('test', {
            configuration: { ...form.value },
            testData: {
                ...testData.value,
                testUrl: generatedTestUrl.value
            }
        });
    } finally {
        testing.value = false;
    }
};
</script>
