import {defineStore} from 'pinia'
import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core";
import {ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

export const useBrandingStore = defineStore(
    'branding',
    () => {

        const currentBrand = ref(undefined)
        const loading = ref(false)
        const error = ref(null)
        const notFound = ref(false)

        const value = useSessionStorage(
            'branding',
            {},
            {writeDefaults: false})

        const presentationInfos = ref([])
        const router = useRouter()
        const route = useRoute()
        watch(
            () => route.params.creator,
            async (creator) => {
                // Extract just the creator name from the path (remove any additional segments)
                const creatorName = creator ? creator.split('/')[0] : undefined;
                await updateBrand(creatorName);
            }
        )

        async function updateBrand(newBrand) {
            loading.value = true
            error.value = null
            notFound.value = false

            if (newBrand !== currentBrand.value) {
                if (newBrand !== undefined) {
                    const result = await fetchCreatorData(newBrand)
                    if (result.success) {
                        value.value = result.data
                        currentBrand.value = newBrand
                        presentationInfos.value = result.data?.presentationInfos
                    } else {
                        // Handle different error types
                        if (result.status === 404) {
                            notFound.value = true
                            error.value = 'Creator not found'
                        } else {
                            error.value = result.error || 'Failed to load creator'
                        }
                        value.value = {}
                        currentBrand.value = undefined
                        presentationInfos.value = []
                    }
                } else {
                    value.value = {}
                    currentBrand.value = undefined
                    presentationInfos.value = []
                }
            }

            loading.value = false
        }

        const fetchCreatorData = async (creatorAlias) => {
            try {
                const client = useClient()
                const response = await client.get(`/api/creators/@${creatorAlias}`)
                return { success: true, data: response.data }
            } catch (error) {
                console.error('Error fetching creator data:', error)

                if (error.response?.status === 404) {
                    return { success: false, status: 404, error: 'Creator not found' }
                }

                return { 
                    success: false, 
                    status: error.response?.status || 500, 
                    error: error.message || 'Unknown error occurred' 
                }
            }
        }

        return {
            currentBrand,
            value,
            loading, 
            error,
            notFound,
            updateBrand, 
            presentationInfos
        }
    })