<script setup lang="ts">
import BrowserDataView from "./components/browser-data/BrowserDataView.vue";
import ConfigurationView from "./components/config/ConfigurationView.vue";
import AppSidebar from "./components/sidebar/AppSidebar.vue";
import { useBrowserManager } from "./composables/useBrowserManager";

const {
  activeSection,
  associatedProfilesModal,
  bookmarkSortKey,
  browserConfigs,
  browserMonogram,
  browsers,
  configError,
  configMonogram,
  configsLoading,
  createConfigForm,
  createCustomBrowserConfig,
  currentBrowser,
  deleteCustomBrowserConfig,
  domainFromUrl,
  error,
  extensionMonogram,
  extensionSortKey,
  isDeletingConfig,
  isOpeningProfile,
  loading,
  openProfileError,
  openBrowserProfile,
  page,
  pickExecutablePath,
  pickUserDataPath,
  profileSortKey,
  refreshAll,
  savingConfig,
  sectionCount,
  selectedBrowserId,
  showBookmarkProfilesModal,
  showExtensionProfilesModal,
  sortedBookmarks,
  sortedExtensions,
  sortedProfiles,
  closeAssociatedProfilesModal,
} = useBrowserManager();
</script>

<template>
  <div class="app-shell">
    <AppSidebar
      :browsers="browsers"
      :current-browser-id="currentBrowser?.browserId ?? null"
      :page="page"
      :loading="loading"
      :configs-loading="configsLoading"
      :browser-monogram="browserMonogram"
      @select-browser="selectedBrowserId = $event; page = 'browserData'"
      @select-configuration="page = 'configuration'"
      @refresh="refreshAll"
    />

    <main class="content-panel">
      <template v-if="page === 'configuration'">
        <ConfigurationView
          :config-error="configError"
          :configs-loading="configsLoading"
          :browser-configs="browserConfigs"
          :create-config-form="createConfigForm"
          :saving-config="savingConfig"
          :config-monogram="configMonogram"
          :is-deleting-config="isDeletingConfig"
          @update-name="createConfigForm.name = $event"
          @update-executable-path="createConfigForm.executablePath = $event"
          @update-user-data-path="createConfigForm.userDataPath = $event"
          @update-icon-key="createConfigForm.iconKey = $event"
          @pick-executable-path="pickExecutablePath"
          @pick-user-data-path="pickUserDataPath"
          @create-config="createCustomBrowserConfig"
          @delete-config="deleteCustomBrowserConfig"
        />
      </template>

      <template v-else-if="loading">
        <section class="state-panel">
          <p class="eyebrow">Scanning</p>
          <h2>Reading local browser data</h2>
          <p>Profiles, installed extensions, and bookmarks are being collected.</p>
        </section>
      </template>

      <template v-else-if="error">
        <section class="state-panel error">
          <p class="eyebrow">Error</p>
          <h2>Scan failed</h2>
          <p>{{ error }}</p>
        </section>
      </template>

      <BrowserDataView
        v-else-if="currentBrowser"
        :current-browser="currentBrowser"
        :active-section="activeSection"
        :profile-sort-key="profileSortKey"
        :extension-sort-key="extensionSortKey"
        :bookmark-sort-key="bookmarkSortKey"
        :sorted-profiles="sortedProfiles"
        :sorted-extensions="sortedExtensions"
        :sorted-bookmarks="sortedBookmarks"
        :open-profile-error="openProfileError"
        :section-count="sectionCount"
        :is-opening-profile="isOpeningProfile"
        :extension-monogram="extensionMonogram"
        :domain-from-url="domainFromUrl"
        :associated-profiles-modal="associatedProfilesModal"
        @update:active-section="activeSection = $event"
        @update:profile-sort-key="profileSortKey = $event"
        @update:extension-sort-key="extensionSortKey = $event"
        @update:bookmark-sort-key="bookmarkSortKey = $event"
        @open-profile="(browserId, profileId) => openBrowserProfile(browserId, profileId)"
        @show-extension-profiles="showExtensionProfilesModal"
        @show-bookmark-profiles="showBookmarkProfilesModal"
        @close-associated-profiles="closeAssociatedProfilesModal"
      />

      <template v-else>
        <section class="state-panel">
          <p class="eyebrow">No Data</p>
          <h2>No supported browser was detected</h2>
          <p>Install or sign in to Chrome, Edge, or Brave and refresh the scan.</p>
        </section>
      </template>
    </main>
  </div>
</template>
