import { ref } from 'vue'
import { defineStore } from 'pinia'

export interface Article {
  source: { id: string | null; name: string }
  author: string | null
  title: string
  description: string | null
  url: string
  urlToImage: string | null
  publishedAt: string
  content: string | null
}

export const useNewsStore = defineStore('news', () => {
  const articles = ref<Article[]>([])
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function fetchTopHeadlines(params: Record<string, string> = {}) {
    loading.value = true
    error.value = null
    const query = new URLSearchParams(params)
    const response = await fetch(`/api/top-headlines?${query}`)
    const data = await response.json()
    if (!response.ok) {
      error.value = data.message ?? 'Failed to fetch top headlines'
    } else {
      articles.value = data.articles
    }
    loading.value = false
  }

  async function fetchEverything(params: Record<string, string> = {}) {
    loading.value = true
    error.value = null
    const query = new URLSearchParams(params)
    const response = await fetch(`/api/everything?${query}`)
    const data = await response.json()
    if (!response.ok) {
      error.value = data.message ?? 'Failed to fetch articles'
    } else {
      articles.value = data.articles
    }
    loading.value = false
  }

  return { articles, loading, error, fetchTopHeadlines, fetchEverything }
})