<template>
  <div id="app" class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <header
      class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Owly News</h1>

          <div class="flex items-center gap-4">
            <button
              @click="toggleDarkMode"
              class="p-2 rounded-md text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
            >
              <svg v-if="darkMode.isDarkMode" class="h-6 w-6" fill="none" stroke="currentColor"
                   viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
              </svg>
              <svg v-else class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
              </svg>
            </button>

            <button
              @click="showMobileMenu = !showMobileMenu"
              class="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 cursor-pointer"
            >
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
            </button>

            <nav class="hidden lg:flex space-x-4">
              <button
                v-for="tab in tabs"
                :key="tab.id"
                @click="activeTab = tab.id"
                :class="[
                'px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer',
                activeTab === tab.id
                  ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300'
                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
              ]"
              >
                {{ tab.label }}
              </button>
            </nav>
          </div>

          <div
            :class="{ 'hidden': !showMobileMenu }"
            class="lg:hidden py-2 border-t"
          >
            <div class="flex flex-col space-y-1">
              <button
                v-for="tab in tabs"
                :key="tab.id"
                @click="activeTab = tab.id; showMobileMenu = false"
                :class="[
                'px-3 py-2 rounded-md text-left text-base font-medium transition-colors cursor-pointer',
                activeTab === tab.id
                  ? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300'
                  : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
              ]"
              >
                {{ tab.label }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
      <div v-if="activeTab === 'management'" class="space-y-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <SyncButton/>
          <NewsRefreshButton/>
          <ModelStatus/>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
          <FeedManager/>
          <CronSlider/>
        </div>
      </div>

      <div v-if="activeTab === 'news'" class="space-y-6">
        <NewsFilters/>

        <NewsList/>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {useNews} from './stores/useNews';
import {useDarkMode} from './stores/useDarkMode';
import SyncButton from './components/SyncButton.vue';
import NewsRefreshButton from './components/NewsRefreshButton.vue';
import ModelStatus from './components/ModelStatus.vue';
import FeedManager from './components/FeedManager.vue';
import CronSlider from './components/CronSlider.vue';
import NewsFilters from './components/NewsFilters.vue';
import NewsList from './components/NewsList.vue';

const news = useNews();
const darkMode = useDarkMode();
const activeTab = ref('news');
const showMobileMenu = ref(false);

const toggleDarkMode = () => {
  darkMode.toggleDarkMode();
};

onMounted(() => {
  darkMode.initDarkMode();
});

const tabs = [
  {id: 'news', label: 'News'},
  {id: 'management', label: 'Management'}
];

onMounted(async () => {
  await news.loadLastSync();
});

document.addEventListener('click', (e) => {
  if (showMobileMenu.value && !(e.target as Element).closest('header')) {
    showMobileMenu.value = false;
  }
});
</script>

<style scoped>
#app {
  display: block;
  grid-template-columns: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
</style>
