<template>
    <div class="decoration-page p-4 flex">
        <!-- Left Sidebar: Component List -->
        <div
            class="w-[400px] bg-white shadow rounded-lg p-4 overflow-y-auto flex flex-col gap-3"
        >
            <!-- 1. Search Bar -->
            <div class="section-item cursor-not-allowed opacity-70">
                <div
                    class="border rounded p-3 text-center text-gray-400 bg-gray-50 relative"
                >
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        1</div
                    >
                    搜索框，不可编辑
                </div>
            </div>

            <!-- 2. One Book One Experience -->
            <div class="section-item cursor-not-allowed opacity-70">
                <div
                    class="border rounded p-3 text-center text-gray-500 bg-white relative"
                >
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        2</div
                    >
                    一书一验 不可编辑
                </div>
            </div>

            <!-- 3. Diamond Area -->
            <div
                class="section-item cursor-pointer hover:border-blue-500 transition-colors"
                @click="handleEdit('diamond')"
            >
                <div
                    class="border rounded p-3 flex flex-col items-center justify-center h-20 bg-white relative"
                >
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        3</div
                    >
                    <span>金刚区</span>
                </div>
            </div>

            <!-- 4. Left Carousel / Right Hot Sales -->
            <div
                class="section-item cursor-pointer hover:border-blue-500 transition-colors"
                @click="handleEdit('leftCarousel')"
            >
                <div class="border rounded p-3 flex h-24 bg-white relative">
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        4</div
                    >
                    <div
                        class="w-1/2 border-r flex items-center justify-center text-sm"
                        >左轮播</div
                    >
                    <div
                        class="w-1/2 flex items-center justify-center text-sm"
                        @click.stop="handleEdit('hotSales')"
                    >
                        右热销商品</div
                    >
                </div>
            </div>

            <!-- 5. Left Booklist / Right Booklist -->
            <div
                class="section-item cursor-pointer hover:border-blue-500 transition-colors"
            >
                <div class="border rounded p-3 flex h-20 bg-white relative">
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        5</div
                    >
                    <div
                        class="w-1/2 border-r flex items-center justify-center text-sm"
                        @click="handleEdit('leftBooklist')"
                        >左书单</div
                    >
                    <div
                        class="w-1/2 flex items-center justify-center text-sm"
                        @click="handleEdit('rightBooklist')"
                        >右书单
                    </div>
                </div>
            </div>

            <!-- 6. Topic Configuration -->
            <div
                class="section-item cursor-pointer hover:border-blue-500 transition-colors"
                @click="handleEdit('topic')"
            >
                <div
                    class="border rounded p-3 flex items-center justify-center h-20 bg-white relative"
                >
                    <div
                        class="absolute top-0 left-0 bg-yellow-100 text-xs px-2 py-1 rounded-tl rounded-br text-black"
                    >
                        6</div
                    >
                    专题配置
                </div>
            </div>
        </div>

        <!-- Center: Phone Preview -->
        <div
            class="flex-1 flex justify-center items-start bg-gray-50 p-4 overflow-y-auto"
        >
            <div
                class="phone-mockup w-[375px] min-h-[667px] bg-white shadow-xl rounded-[30px] border-[8px] border-gray-800 overflow-hidden relative"
            >
                <!-- Status Bar -->
                <div
                    class="h-6 bg-black text-white text-[10px] flex justify-between px-4 items-center"
                >
                    <span>9:41</span>
                    <div class="flex space-x-1">
                        <div
                            class="w-3 h-3 bg-white rounded-full opacity-50"
                        ></div>
                        <div
                            class="w-3 h-3 bg-white rounded-full opacity-50"
                        ></div>
                    </div>
                </div>

                <!-- Content Area -->
                <div
                    class="phone-content overflow-y-auto h-full pb-10 bg-gray-100"
                >
                    <!-- 1. Search -->
                    <div class="p-3 bg-white">
                        <div
                            class="bg-gray-100 rounded-full px-4 py-2 text-gray-400 text-sm flex items-center"
                        >
                            <el-icon class="mr-2">
                                <Search />
                            </el-icon>
                            搜索商品
                        </div>
                    </div>

                    <!-- 2. One Book -->
                    <div class="bg-white p-3 mt-2">
                        <div
                            class="h-24 bg-gray-200 rounded flex items-center justify-center text-gray-500"
                        >
                            一书一验区域
                        </div>
                    </div>

                    <!-- 3. Diamond Zone -->
                    <div class="bg-white p-3 mt-2 grid grid-cols-5 gap-2">
                        <template v-if="hasDiamondData">
                            <div
                                v-for="(item, index) in diamondData"
                                :key="index"
                                class="flex flex-col items-center"
                            >
                                <el-image
                                    :src="item.imgUrl"
                                    class="w-10 h-10 rounded-full mb-1 object-cover"
                                >
                                    <template #error>
                                        <div
                                            class="w-10 h-10 bg-gray-200 rounded-full"
                                        ></div>
                                    </template>
                                </el-image>
                                <span
                                    class="text-[10px] text-gray-500 truncate w-full text-center"
                                    >{{ item.showCateName || '金刚区' }}</span
                                >
                            </div>
                        </template>
                        <template v-else>
                            <div
                                v-for="i in 5"
                                :key="i"
                                class="flex flex-col items-center"
                            >
                                <div
                                    class="w-10 h-10 bg-gray-200 rounded-full mb-1"
                                ></div>
                                <span class="text-[10px] text-gray-500"
                                    >金刚区</span
                                >
                            </div>
                        </template>
                    </div>

                    <!-- 4. Carousel & Hot Sales -->
                    <div class="flex mt-2 px-2 gap-2">
                        <div
                            class="w-1/2 bg-white rounded h-32 flex items-center justify-center bg-gray-200 overflow-hidden relative"
                        >
                            <template v-if="hasLeftBannerData">
                                <el-carousel
                                    indicator-position="none"
                                    arrow="never"
                                    :interval="3000"
                                    height="100%"
                                    class="w-full h-full"
                                >
                                    <el-carousel-item
                                        v-for="(item, index) in leftBannerData"
                                        :key="index"
                                    >
                                        <el-image
                                            :src="item.imgUrl"
                                            class="w-full h-full object-cover rounded"
                                        />
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                            <span v-else class="text-gray-500">左轮播</span>
                        </div>
                        <div
                            class="w-1/2 bg-white rounded h-32 flex items-center justify-center bg-gray-200 overflow-hidden relative"
                        >
                            <template v-if="hasRightBannerData">
                                <div
                                    class="w-full h-full bg-gradient-to-b from-[#FFE0D7] to-[#FFF5F2] rounded p-2 flex flex-col"
                                >
                                    <div
                                        class="text-center font-bold text-gray-800 text-sm mb-2"
                                        >🔥 热销商品 🔥</div
                                    >
                                    <div class="grid grid-cols-2 gap-2 flex-1">
                                        <div
                                            v-for="(
                                                item, index
                                            ) in rightBannerData"
                                            :key="index"
                                            class="relative rounded-lg overflow-hidden h-full"
                                        >
                                            <el-image
                                                :src="item.imgUrl"
                                                class="w-full h-full object-cover rounded-lg"
                                            >
                                                <template #error>
                                                    <div
                                                        class="w-full h-full bg-gray-200 flex items-center justify-center text-xs text-gray-400"
                                                    >
                                                        <el-icon>
                                                            <Picture />
                                                        </el-icon>
                                                    </div>
                                                </template>
                                            </el-image>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <span v-else class="text-gray-500">右热销</span>
                        </div>
                    </div>

                    <!-- 5. Booklists -->
                    <div class="flex mt-2 px-2 gap-2">
                        <div
                            class="w-1/2 bg-white rounded h-24 flex items-center justify-center bg-gray-200 overflow-hidden relative"
                        >
                            <template v-if="hasLeftBooklistData">
                                <el-carousel
                                    indicator-position="none"
                                    arrow="never"
                                    :interval="3000"
                                    class="w-full h-full"
                                >
                                    <el-carousel-item
                                        v-for="(
                                            item, index
                                        ) in leftBooklistData"
                                        :key="index"
                                    >
                                        <div
                                            class="w-full h-full relative bg-[#FFF8E1] rounded p-2 overflow-hidden"
                                        >
                                            <div
                                                class="text-sm font-bold text-[#B8741A] truncate z-10 relative leading-tight"
                                            >
                                                {{
                                                    item.showCateName ||
                                                    '书单标题'
                                                }}
                                            </div>
                                            <el-image
                                                :src="item.imgUrl"
                                                class="absolute -right-2 -bottom-2 w-14 h-14 object-contain z-0 opacity-90"
                                                fit="contain"
                                            >
                                                <template #error>
                                                    <div
                                                        class="w-full h-full flex items-center justify-center text-xs text-gray-300"
                                                    >
                                                        <el-icon>
                                                            <Picture />
                                                        </el-icon>
                                                    </div>
                                                </template>
                                            </el-image>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                            <span v-else class="text-gray-500">左书单</span>
                        </div>
                        <div
                            class="w-1/2 bg-white rounded h-24 flex items-center justify-center bg-gray-200 overflow-hidden relative"
                        >
                            <template v-if="hasRightBooklistData">
                                <el-carousel
                                    indicator-position="none"
                                    arrow="never"
                                    :interval="3000"
                                    class="w-full h-full"
                                >
                                    <el-carousel-item
                                        v-for="(
                                            item, index
                                        ) in rightBooklistData"
                                        :key="index"
                                    >
                                        <div
                                            class="w-full h-full relative bg-[#E8F5E9] rounded overflow-hidden p-2"
                                        >
                                            <div
                                                class="text-sm font-bold text-[#2E7D32] truncate z-10 relative leading-tight"
                                            >
                                                {{
                                                    item.showCateName ||
                                                    '书单标题'
                                                }}
                                            </div>
                                            <el-image
                                                :src="item.imgUrl"
                                                class="absolute -right-2 -bottom-2 w-14 h-14 object-contain z-0 opacity-90"
                                                fit="contain"
                                            >
                                                <template #error>
                                                    <div
                                                        class="w-full h-full flex items-center justify-center text-xs text-gray-300"
                                                    >
                                                        <el-icon>
                                                            <Picture />
                                                        </el-icon>
                                                    </div>
                                                </template>
                                            </el-image>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                            <span v-else class="text-gray-500">右书单</span>
                        </div>
                    </div>

                    <!-- 6. Topic Configuration -->
                    <div class="mt-2 px-2">
                        <template v-if="hasTopicData">
                            <div
                                class="bg-white rounded p-3 mb-2"
                                v-for="item in topicData"
                                :key="item.id"
                            >
                                <div
                                    class="flex justify-between items-center mb-2"
                                >
                                    <span class="font-bold text-sm">{{
                                        item.showCateName
                                    }}</span>
                                    <span class="text-xs text-gray-400"
                                        >查看全部 ></span
                                    >
                                </div>
                                <div class="grid grid-cols-3 gap-2">
                                    <div
                                        v-for="i in 3"
                                        :key="i"
                                        class="flex flex-col"
                                    >
                                        <div
                                            class="bg-gray-200 rounded h-20 w-full mb-1 overflow-hidden relative"
                                        >
                                        </div>
                                        <div
                                            class="h-3 bg-gray-100 rounded w-3/4 mb-1"
                                        ></div>
                                        <div
                                            class="h-3 bg-gray-100 rounded w-1/2"
                                        ></div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div
                            v-else
                            class="bg-white rounded h-24 mb-2 flex items-center justify-center bg-gray-200"
                            >专题配置
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <DiamondEdit v-model="modals.diamond" @success="handleSuccess" />
        <CarouselEdit
            v-model="modals.leftCarousel"
            title="左轮播编辑"
            type="carousel"
            :fixedNumber="3"
            position="left_banner"
            @success="handleSuccess"
        />
        <HotSalesEdit
            v-model="modals.hotSales"
            position="right_banner"
            @success="handleSuccess"
        />
        <DiamondEdit
            v-model="modals.leftBooklist"
            title="左书单编辑"
            position="left_book_list"
            :limit="4"
            @success="handleSuccess"
        />
        <DiamondEdit
            v-model="modals.rightBooklist"
            title="右书单编辑"
            position="right_book_list"
            :limit="4"
            @success="handleSuccess"
        />

        <!-- Reusing CarouselEdit for Topics as they are likely banner images linking to topics -->
        <TopicEdit
            v-model="modals.topic"
            title="专题配置"
            :limit="99"
            @success="handleSuccess"
        />
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { Search, Plus, Picture } from '@element-plus/icons-vue';
    import DiamondEdit from './components/DiamondEdit.vue';
    import CarouselEdit from './components/CarouselEdit.vue';
    import HotSalesEdit from './components/HotSalesEdit.vue';
    import TopicEdit from './components/TopicEdit.vue';
    import request from '@/utils/request';

    const modals = reactive({
        diamond: false,
        leftCarousel: false,
        hotSales: false,
        leftBooklist: false,
        rightBooklist: false,
        topic: false
    });

    const diamondData = ref([]);
    const hasDiamondData = ref(false);
    const leftBooklistData = ref([]);
    const hasLeftBooklistData = ref(false);
    const rightBooklistData = ref([]);
    const hasRightBooklistData = ref(false);
    const leftBannerData = ref([]);
    const hasLeftBannerData = ref(false);
    const rightBannerData = ref([]);
    const hasRightBannerData = ref(false);
    const topicData = ref([]);
    const hasTopicData = ref(false);

    const fetchDecorationData = async () => {
        const positions = [
            { key: 'diamond_area', data: diamondData, has: hasDiamondData },
            {
                key: 'left_book_list',
                data: leftBooklistData,
                has: hasLeftBooklistData
            },
            {
                key: 'right_book_list',
                data: rightBooklistData,
                has: hasRightBooklistData
            },
            {
                key: 'left_banner',
                data: leftBannerData,
                has: hasLeftBannerData
            },
            {
                key: 'right_banner',
                data: rightBannerData,
                has: hasRightBannerData
            },
            { key: 'topic', data: topicData, has: hasTopicData }
        ];

        for (const pos of positions) {
            request
                .get('/book/showIndex/getInfoByPosition', {
                    params: { position: pos.key }
                })
                .then((res) => {
                    const list = res.data.data || [];
                    if (list.length > 0) {
                        pos.data.value = list;
                        pos.has.value = true;
                    } else {
                        pos.data.value = [];
                        pos.has.value = false;
                    }
                })
                .catch((e) => {
                    console.error(`Failed to fetch ${pos.key}`, e);
                });
        }
    };

    const handleEdit = (type) => {
        if (modals[type] !== undefined) {
            modals[type] = true;
        }
    };

    const handleSuccess = () => {
        fetchDecorationData();
    };

    const handleAddTopic = () => {
        // Logic to add topic
        console.log('Add topic');
    };

    onMounted(() => {
        fetchDecorationData();
    });
</script>

<style scoped>
    .section-item {
        position: relative;
    }

    .phone-content {
        max-height: calc(100vh - 210px);
    }
</style>
