import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { Content } from '../types/content'
import { indeeHubFilms, bitcoinFilms, documentaries, dramas } from '../data/indeeHubFilms'

export const useContentStore = defineStore('content', () => {
  const featuredContent = ref<Content | null>(null)
  const contentRows = ref<{ [key: string]: Content[] }>({
    featured: [],
    newReleases: [],
    bitcoin: [],
    documentaries: [],
    dramas: [],
    independent: []
  })

  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetchContent() {
    loading.value = true
    error.value = null

    try {
      // Set featured content immediately - God Bless Bitcoin
      const godBlessBitcoin = bitcoinFilms.find(f => f.title === 'God Bless Bitcoin') || bitcoinFilms[0]
      if (godBlessBitcoin) {
        // Override backdrop to use the downloaded image
        featuredContent.value = {
          ...godBlessBitcoin,
          backdrop: '/assets/images/god-bless-bitcoin-backdrop.jpg'
        }
      } else {
        featuredContent.value = indeeHubFilms[0]
      }
      
      // Small delay for content rows only
      await new Promise(resolve => setTimeout(resolve, 100))
      
      // Organize content into rows
      contentRows.value = {
        featured: indeeHubFilms.slice(0, 10),
        newReleases: indeeHubFilms.slice(0, 8).reverse(),
        bitcoin: bitcoinFilms,
        documentaries: documentaries.slice(0, 10),
        dramas: dramas.slice(0, 10),
        independent: indeeHubFilms.filter(f => 
          !f.categories.includes('Bitcoin') && !f.categories.includes('Documentary')
        ).slice(0, 10)
      }
    } catch (e) {
      error.value = 'Failed to load content'
      console.error(e)
    } finally {
      loading.value = false
    }
  }

  return {
    featuredContent,
    contentRows,
    loading,
    error,
    fetchContent
  }
})