import Alpine from 'alpinejs';

declare global {
  interface Window {
    Alpine: typeof Alpine;
  }
}

interface NavigationStore {
  activeTab: string;

  init(): void;
  loadPage(): Promise<void>;
}

const navigationStore: NavigationStore = {
  activeTab: '',

  async init() {
    await this.loadPage();
    window.addEventListener('hashchange', () => this.loadPage());
  },

  async loadPage() {
    const tab = window.location.hash.split('/')[1] || 'chats';
    if (this.activeTab === tab) return;
    this.activeTab = tab;

    const pageContent = document.getElementById('page-content');
    if (!pageContent) throw new Error('Failed to find #page-content');

    try {
      const response = await fetch(`/pages/${tab}.html`);
      if (!response.ok) throw new Error('Failed to load page');

      pageContent.innerHTML = await response.text();
    } catch (error) {
      console.error('Page load error:', error);
      pageContent.innerHTML = `
        <div class="bg-tertiary-50 border border-tertiary-200 rounded-lg p-4">
          <p class="text-tertiary-700">Failed to load page. Please try again.</p>
        </div>
      `;
    }
  },
};

Alpine.store('navigation', navigationStore);