import './style.css'

const app = document.querySelector('#app')

const state = {
  articles: [],
  groups: [],
  loading: true,
  error: null,
  filter: 'all',
  viewMode: 'regular', // 'regular' or 'ai'
  carMode: false,
  carModeIndex: 0,
  carModeInterval: null,
}

function formatDate(dateString) {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor(diff / (1000 * 60))

  if (minutes < 60) return minutes + 'm ago'
  if (hours < 24) return hours + 'h ago'
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

function truncate(text, maxLength = 150) {
  if (!text || text.length <= maxLength) return text || ''
  return text.slice(0, maxLength).trim() + '...'
}

const SOURCE_CONFIG = {
  abc: { name: 'ABC News', color: 'bg-blue-100 text-blue-800' },
  npr: { name: 'NPR', color: 'bg-indigo-100 text-indigo-800' },
  cnn: { name: 'CNN', color: 'bg-orange-100 text-orange-800' },
  nbc: { name: 'NBC News', color: 'bg-purple-100 text-purple-800' },
  cbs: { name: 'CBS News', color: 'bg-emerald-100 text-emerald-800' },
  nytimes: { name: 'NY Times', color: 'bg-slate-100 text-slate-800' },
}

function getSourceColor(source) {
  return SOURCE_CONFIG[source]?.color || 'bg-gray-100 text-gray-800'
}

function getSourceName(source) {
  return SOURCE_CONFIG[source]?.name || source
}

const CATEGORY_COLORS = {
  politics: 'bg-red-100 text-red-800',
  business: 'bg-green-100 text-green-800',
  technology: 'bg-blue-100 text-blue-800',
  sports: 'bg-orange-100 text-orange-800',
  entertainment: 'bg-pink-100 text-pink-800',
  health: 'bg-teal-100 text-teal-800',
  science: 'bg-purple-100 text-purple-800',
  world: 'bg-indigo-100 text-indigo-800',
  other: 'bg-gray-100 text-gray-800',
}

function getCategoryColor(category) {
  return CATEGORY_COLORS[category] || CATEGORY_COLORS.other
}

function renderGroupCard(group) {
  const imageHtml = group.image
    ? `<div class="aspect-video overflow-hidden bg-gray-100"><img src="${group.image}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" onerror="this.parentElement.style.display='none'" /></div>`
    : ''

  const sourceBadges = group.sources
    .slice(0, 3)
    .map(s => `<span class="px-2 py-0.5 text-xs font-medium rounded-full ${getSourceColor(s)}">${getSourceName(s)}</span>`)
    .join('')

  const moreCount = group.sources.length > 3 ? `<span class="text-xs text-gray-500">+${group.sources.length - 3}</span>` : ''

  return `<article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100 border-l-4 border-l-blue-500">
    ${imageHtml}
    <div class="p-5">
    <div class="flex items-center gap-2 mb-3 flex-wrap">
    <span class="px-2.5 py-1 text-xs font-medium rounded-full ${getCategoryColor(group.category)}">
    ${group.category}
    </span>
    <span class="text-xs text-gray-500">${group.articleCount} articles</span>
    <span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-blue-600 text-white">AI Summary</span>
    </div>
    <h2 class="text-lg font-semibold text-gray-900 mb-3">
    ${group.title}
    </h2>
    <p class="text-sm text-gray-600 line-clamp-[10] mb-4">
    ${group.summary}
    </p>
    <div class="flex items-center gap-2 flex-wrap mb-3">
    ${sourceBadges}${moreCount}
    </div>
    <details class="text-sm">
    <summary class="cursor-pointer text-blue-600 hover:text-blue-800 font-medium">View source articles</summary>
    <ul class="mt-2 space-y-1 pl-4">
    ${group.articles.map(a => `<li><a href="${a.link}" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-blue-600 hover:underline">${truncate(a.title, 60)} <span class="text-gray-400">(${getSourceName(a.source)})</span></a></li>`).join('')}
    </ul>
    </details>
    </div>
    </article>`
}

function renderArticle(article) {
  const imageHtml = article.image
    ? `<div class="aspect-video overflow-hidden bg-gray-100"><img src="${article.image}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" onerror="this.parentElement.style.display='none'" /></div>`
    : ''

  return `<article class="group bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100">
    <a href="${article.link}" target="_blank" rel="noopener noreferrer" class="block">
    ${imageHtml}
    <div class="p-5">
    <div class="flex items-center gap-2 mb-3">
    <span class="px-2.5 py-1 text-xs font-medium rounded-full ${getSourceColor(article.source)}">
    ${getSourceName(article.source)}
    </span>
    <span class="text-xs text-gray-500">${formatDate(article.pubDate)}</span>
    </div>
    <h2 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-2 mb-2">
    ${article.title}
    </h2>
    <p class="text-sm text-gray-600 line-clamp-[10]">
    ${truncate(article.content, 500)}
    </p>
    </div>
    </a>
    </article>`
}

function renderLoading() {
  const message = state.viewMode === 'ai'
    ? 'AI is analyzing and grouping news...'
    : 'Loading latest news...'
  return `<div class="col-span-full flex flex-col items-center justify-center py-20">
    <div class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
    <p class="text-gray-600">${message}</p>
    </div>`
}

function renderError(error) {
  return `<div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
    <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
    </svg></div>
    <h3 class="text-lg font-semibold text-gray-900 mb-2">Failed to load news</h3>
    <p class="text-gray-600 mb-4">${error}</p>
    <button onclick="fetchNews()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Try Again</button>
    </div>`
}

function renderEmpty() {
  return `<div class="col-span-full flex flex-col items-center justify-center py-20 text-center">
    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
    </svg></div>
    <h3 class="text-lg font-semibold text-gray-900 mb-2">No articles found</h3>
    <p class="text-gray-600">Try selecting a different source filter.</p>
    </div>`
}

function renderCarModeCard(group, index, total) {
  const sourceBadges = group.sources
    .slice(0, 4)
    .map(s => `<span class="px-3 py-1 text-sm font-medium rounded-full ${getSourceColor(s)} bg-opacity-90">${getSourceName(s)}</span>`)
    .join('')

  const moreCount = group.sources.length > 4 ? `<span class="text-sm text-gray-300">+${group.sources.length - 4} more</span>` : ''

  return `
    <div class="car-mode-card max-w-4xl w-full bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl overflow-hidden">
      ${group.image ? `
        <div class="h-64 sm:h-80 overflow-hidden">
          <img src="${group.image}" alt="" class="w-full h-full object-cover" onerror="this.parentElement.style.display='none'" />
        </div>
      ` : ''}
      <div class="p-8 sm:p-10">
        <div class="flex items-center gap-3 mb-4 flex-wrap">
          <span class="px-4 py-1.5 text-sm font-semibold rounded-full ${getCategoryColor(group.category)}">
            ${group.category}
          </span>
          <span class="text-gray-500">${group.articleCount} articles</span>
          <span class="ml-auto px-3 py-1 text-sm font-medium rounded-full bg-blue-600 text-white">AI Summary</span>
        </div>
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 leading-tight">
          ${group.title}
        </h2>
        <p class="text-lg text-gray-600 leading-relaxed mb-6 line-clamp-6">
          ${group.summary}
        </p>
        <div class="flex items-center gap-2 flex-wrap">
          ${sourceBadges}${moreCount}
        </div>
      </div>
      <!-- Progress bar -->
      <div class="h-1 bg-gray-200">
        <div class="car-mode-progress h-full bg-blue-600"></div>
      </div>
    </div>
    <!-- Card counter -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-2">
      ${Array.from({ length: total }, (_, i) => `
        <div class="w-2 h-2 rounded-full transition-all duration-300 ${i === index ? 'bg-white w-6' : 'bg-white/40'}"></div>
      `).join('')}
    </div>
  `
}

function renderCarMode() {
  if (state.groups.length === 0) {
    return `
      <div class="fixed inset-0 z-50 car-mode-bg flex items-center justify-center">
        <div class="car-mode-blur-1"></div>
        <div class="car-mode-blur-2"></div>
        <div class="car-mode-blur-3"></div>
        <div class="relative z-10 text-center text-white">
          <div class="w-16 h-16 border-4 border-white/30 border-t-white rounded-full animate-spin mx-auto mb-6"></div>
          <p class="text-xl">Loading AI grouped news...</p>
        </div>
        <button onclick="exitCarMode()" class="absolute top-6 right-6 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Exit Car Mode (Esc)">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
    `
  }

  const currentGroup = state.groups[state.carModeIndex]

  return `
    <div class="fixed inset-0 z-50 car-mode-bg flex items-center justify-center p-6">
      <div class="car-mode-blur-1"></div>
      <div class="car-mode-blur-2"></div>
      <div class="car-mode-blur-3"></div>

      <!-- Exit button -->
      <button onclick="exitCarMode()" class="absolute top-6 right-6 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Exit Car Mode (Esc)">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Navigation buttons -->
      <button onclick="carModePrev()" class="absolute left-6 top-1/2 -translate-y-1/2 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Previous">
        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <button onclick="carModeNext()" class="absolute right-6 top-1/2 -translate-y-1/2 z-20 p-3 text-white/70 hover:text-white hover:bg-white/10 rounded-full transition-colors" title="Next">
        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
      </button>

      <!-- Card -->
      <div class="relative z-10 flex items-center justify-center w-full">
        ${renderCarModeCard(currentGroup, state.carModeIndex, state.groups.length)}
      </div>

      <!-- Car mode indicator -->
      <div class="absolute top-6 left-6 z-20 flex items-center gap-2 text-white/70">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
        </svg>
        <span class="text-sm font-medium">Car Mode</span>
      </div>
    </div>
  `
}

function render() {
  // If car mode is active, render car mode overlay
  if (state.carMode) {
    app.innerHTML = renderCarMode()
    return
  }

  const filteredArticles = state.filter === 'all'
    ? state.articles
    : state.articles.filter(a => a.source === state.filter)

  const spinClass = state.loading ? 'animate-spin' : ''
  const sources = [...new Set(state.articles.map(a => a.source))]

  let content = ''
  if (state.loading) {
    content = renderLoading()
  } else if (state.error) {
    content = renderError(state.error)
  } else if (state.viewMode === 'ai') {
    if (state.groups.length === 0) {
      content = renderEmpty()
    } else {
      content = state.groups.map(renderGroupCard).join('')
    }
  } else if (filteredArticles.length === 0) {
    content = renderEmpty()
  } else {
    content = filteredArticles.map(renderArticle).join('')
  }

  const regularBtnClass = state.viewMode === 'regular' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
  const aiBtnClass = state.viewMode === 'ai' ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'

  const filterButtons = state.viewMode === 'regular' ? `
    <button onclick="setFilter('all')" class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${state.filter === 'all' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}">All</button>
    ${sources.map(source => `<button onclick="setFilter('${source}')" class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${state.filter === source ? 'bg-gray-900 text-white' : getSourceColor(source)}">${SOURCE_CONFIG[source]?.name || source}</button>`).join('')}
  ` : ''

  app.innerHTML = `<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
    <header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
    <h1 class="text-2xl font-bold text-gray-900">News Feed</h1>
    <p class="text-sm text-gray-500">${state.viewMode === 'ai' ? 'AI-grouped summaries from multiple sources' : 'Latest headlines from multiple sources'}</p>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
    <div class="flex items-center gap-1 mr-2 p-1 bg-gray-100 rounded-lg">
    <button onclick="setViewMode('regular')" class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${regularBtnClass}">Regular</button>
    <button onclick="setViewMode('ai')" class="px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${aiBtnClass}">AI Grouped</button>
    </div>
    ${filterButtons}
    ${state.viewMode === 'ai' ? `<button onclick="clearCacheAndRefresh()" class="ml-2 px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors" title="Clear cache and fetch fresh AI groupings">Clear Cache</button>` : ''}
    <button onclick="enterCarMode()" class="ml-2 px-3 py-1.5 text-sm font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 rounded-lg transition-colors flex items-center gap-1.5" title="Enter Car Mode - Auto-cycling news display">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
    </svg>
    Car Mode
    </button>
    <button onclick="refresh()" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" title="Refresh">
    <svg class="w-5 h-5 ${spinClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
    </svg></button>
    </div></div></div></header>
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    ${content}
    </div></main>
    <footer class="bg-white border-t border-gray-200 mt-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 text-center text-sm text-gray-500">
    News aggregated from ABC, NPR, CNN, NBC, CBS & NY Times
    </div></footer></div>`
}

async function fetchNews() {
  state.loading = true
  state.error = null
  render()

  try {
    const response = await fetch('/api/news')
    if (!response.ok) throw new Error('Failed to fetch news')

    const data = await response.json()

    const allArticles = data.feeds
      .flatMap(feed => feed.items)
      .sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate))

    state.articles = allArticles
    state.loading = false

    if (data.errors && data.errors.length > 0) {
      console.warn('Some feeds failed:', data.errors)
    }
  } catch (error) {
    state.error = error.message
    state.loading = false
  }

  render()
}

async function fetchGroupedNews() {
  state.loading = true
  state.error = null
  render()

  try {
    const response = await fetch('/api/grouped-news')
    if (!response.ok) throw new Error('Failed to fetch grouped news')

    const data = await response.json()
    state.groups = data.groups
    state.loading = false
  } catch (error) {
    state.error = error.message
    state.loading = false
  }

  render()
}

window.setFilter = function(filter) {
  state.filter = filter
  render()
}

window.setViewMode = function(mode) {
  state.viewMode = mode
  if (mode === 'ai' && state.groups.length === 0) {
    fetchGroupedNews()
  } else {
    render()
  }
}

window.refresh = function() {
  if (state.viewMode === 'ai') {
    fetchGroupedNews()
  } else {
    fetchNews()
  }
}

window.clearCacheAndRefresh = async function() {
  state.loading = true
  state.error = null
  render()

  try {
    const response = await fetch('/api/grouped-news?refresh=true')
    if (!response.ok) throw new Error('Failed to fetch grouped news')

    const data = await response.json()
    state.groups = data.groups
    state.loading = false
  } catch (error) {
    state.error = error.message
    state.loading = false
  }

  render()
}

window.fetchNews = fetchNews
window.fetchGroupedNews = fetchGroupedNews

// Car Mode Functions
window.enterCarMode = async function() {
  state.carMode = true
  state.carModeIndex = 0
  render()

  // Fetch AI grouped news if not already loaded
  if (state.groups.length === 0) {
    try {
      const response = await fetch('/api/grouped-news')
      if (!response.ok) throw new Error('Failed to fetch grouped news')
      const data = await response.json()
      state.groups = data.groups
      render()
    } catch (error) {
      console.error('Failed to load grouped news for car mode:', error)
    }
  }

  // Start auto-cycling every 5 seconds
  startCarModeCycle()
}

window.exitCarMode = function() {
  state.carMode = false
  stopCarModeCycle()
  render()
}

window.carModeNext = function() {
  if (state.groups.length === 0) return
  state.carModeIndex = (state.carModeIndex + 1) % state.groups.length
  // Reset the cycle timer when manually navigating
  stopCarModeCycle()
  render()
  startCarModeCycle()
}

window.carModePrev = function() {
  if (state.groups.length === 0) return
  state.carModeIndex = (state.carModeIndex - 1 + state.groups.length) % state.groups.length
  // Reset the cycle timer when manually navigating
  stopCarModeCycle()
  render()
  startCarModeCycle()
}

function startCarModeCycle() {
  stopCarModeCycle() // Clear any existing interval
  state.carModeInterval = setInterval(() => {
    if (state.groups.length > 0) {
      state.carModeIndex = (state.carModeIndex + 1) % state.groups.length
      render()
    }
  }, 5000) // 5 seconds per card
}

function stopCarModeCycle() {
  if (state.carModeInterval) {
    clearInterval(state.carModeInterval)
    state.carModeInterval = null
  }
}

// Keyboard support for car mode
document.addEventListener('keydown', (e) => {
  if (!state.carMode) return

  switch (e.key) {
    case 'Escape':
      window.exitCarMode()
      break
    case 'ArrowRight':
    case ' ':
      window.carModeNext()
      break
    case 'ArrowLeft':
      window.carModePrev()
      break
  }
})

fetchNews()

setInterval(() => {
  if (state.viewMode === 'ai') {
    fetchGroupedNews()
  } else {
    fetchNews()
  }
}, 5 * 60 * 1000)
