<script lang="ts">
  import "../../../styles/companies/companydetail.css";
  import { onMount } from "svelte";
  import type { PageData } from "./types";

  // Tab components
  import CompanySidebar from "./components/CompanySidebar.svelte";
  import OverviewTab from "./components/OverviewTab.svelte";
  import CredentialsTab from "./components/CredentialsTab.svelte";
  import ConfigurationsTab from "./components/ConfigurationsTab.svelte";
  import ContactsTab from "./components/ContactsTab.svelte";
  import UniFiTab from "./components/UniFiTab.svelte";
  import ActivityTab from "./components/ActivityTab.svelte";

  export let data: PageData;

  $: company = data.company;
  $: configurations = data.configurations;
  $: credentials = data.credentials;
  $: credentialTypes = data.credentialTypes;
  $: unifiSites = data.unifiSites;
  $: accessToken = data.accessToken;
  $: permissions = data.permissions;

  // Mobile detection
  let isMobile = false;
  function checkMobile() {
    isMobile = typeof window !== "undefined" && window.innerWidth <= 768;
  }
  onMount(() => {
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  });

  // Create credential modal state (bound to CredentialsTab)
  let isCreateCredentialOpen = false;
  // Link UniFi site modal state (bound to UniFiTab)
  let isLinkUnifiOpen = false;

  // Tab navigation
  const tabs = [
    "Overview",
    "Credentials",
    "Configurations",
    "UniFi",
    "Contacts",
    "Activity",
  ] as const;
  type Tab = (typeof tabs)[number];
  let activeTab: Tab = "Overview";

  // Mobile nav state: null = show vertical nav menu; set = show tab content
  let mobileActiveTab: Tab | null = null;

  function selectMobileTab(tab: Tab) {
    activeTab = tab;
    mobileActiveTab = tab;
  }

  function mobileBack() {
    mobileActiveTab = null;
  }
</script>

<svelte:head>
  <title>{company?.name ?? "Company"} — Project Optima</title>
</svelte:head>

<div class="company-detail-page">
  <!-- Left pane (1/4) — Company overview -->
  <CompanySidebar {company} {permissions} {isMobile} {mobileActiveTab} />

  <!-- Mobile vertical nav menu (only visible on mobile when no tab selected) -->
  {#if isMobile && mobileActiveTab === null}
    <div class="mobile-nav-menu">
      {#each tabs as tab}
        <button
          class="mobile-nav-item"
          on:click={() => selectMobileTab(tab)}
          type="button"
        >
          <span class="mobile-nav-icon">
            {#if tab === "Credentials"}
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                width="20"
                height="20"
              >
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path
                  d="M7 11V7a5 5 0 0 1 10 0v4"
                />
              </svg>
            {:else if tab === "Configurations"}
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                width="20"
                height="20"
              >
                <circle cx="12" cy="12" r="3" /><path
                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
                />
              </svg>
            {:else if tab === "UniFi"}
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                width="20"
                height="20"
              >
                <path d="M12 2L2 7l10 5 10-5-10-5z" /><path
                  d="M2 17l10 5 10-5"
                /><path d="M2 12l10 5 10-5" />
              </svg>
            {:else if tab === "Contacts"}
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                width="20"
                height="20"
              >
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle
                  cx="9"
                  cy="7"
                  r="4"
                /><path d="M23 21v-2a4 4 0 00-3-3.87" /><path
                  d="M16 3.13a4 4 0 010 7.75"
                />
              </svg>
            {:else}
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                width="20"
                height="20"
              >
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
              </svg>
            {/if}
          </span>
          <span class="mobile-nav-label">{tab}</span>
          {#if tab === "Credentials" && credentials.length > 0}
            <span class="mobile-nav-badge">{credentials.length}</span>
          {/if}
          {#if tab === "Configurations" && configurations.length > 0}
            <span class="mobile-nav-badge">{configurations.length}</span>
          {/if}
          {#if tab === "UniFi" && unifiSites.length > 0}
            <span class="mobile-nav-badge">{unifiSites.length}</span>
          {/if}
          {#if tab === "Contacts" && (company?.cw_Data?.allContacts?.length ?? 0) > 0}
            <span class="mobile-nav-badge"
              >{company?.cw_Data?.allContacts?.length}</span
            >
          {/if}
          <svg
            class="mobile-nav-chevron"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="16"
            height="16"
          >
            <polyline points="9 18 15 12 9 6" />
          </svg>
        </button>
      {/each}
    </div>
  {/if}

  <!-- Right pane (3/4) -->
  <div
    class="company-detail-right"
    class:mobile-hidden={isMobile && mobileActiveTab === null}
  >
    <!-- Mobile content header with back button -->
    {#if isMobile && mobileActiveTab !== null}
      <div class="mobile-content-header">
        <button
          class="mobile-back-btn"
          on:click={mobileBack}
          type="button"
          aria-label="Back to menu"
        >
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="18"
            height="18"
          >
            <path d="M19 12H5M12 19l-7-7 7-7" />
          </svg>
        </button>
        <h3 class="mobile-content-title">{mobileActiveTab}</h3>
        {#if mobileActiveTab === "Credentials"}
          <button
            type="button"
            class="create-credential-btn mobile-create-btn"
            on:click={() => (isCreateCredentialOpen = true)}
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              width="14"
              height="14"
            >
              <line x1="12" y1="5" x2="12" y2="19" /><line
                x1="5"
                y1="12"
                x2="19"
                y2="12"
              />
            </svg>
            New
          </button>
        {/if}
        {#if mobileActiveTab === "UniFi"}
          <button
            type="button"
            class="create-credential-btn mobile-create-btn"
            on:click={() => (isLinkUnifiOpen = true)}
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              width="14"
              height="14"
            >
              <path
                d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
              />
              <path
                d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
              />
            </svg>
            Link
          </button>
        {/if}
      </div>
    {/if}

    <div class="tab-bar" role="tablist">
      {#each tabs as tab}
        <button
          class="tab-btn"
          class:active={activeTab === tab}
          role="tab"
          aria-selected={activeTab === tab}
          on:click={() => (activeTab = tab)}
        >
          {tab}
          {#if tab === "Credentials" && credentials.length > 0}
            <span class="tab-count-badge">{credentials.length}</span>
          {/if}
          {#if tab === "Configurations" && configurations.length > 0}
            <span class="tab-count-badge">{configurations.length}</span>
          {/if}
          {#if tab === "UniFi" && unifiSites.length > 0}
            <span class="tab-count-badge">{unifiSites.length}</span>
          {/if}
        </button>
      {/each}
      {#if activeTab === "Credentials"}
        <div class="tab-bar-spacer"></div>
        <button
          type="button"
          class="create-credential-btn"
          on:click={() => (isCreateCredentialOpen = true)}
        >
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="14"
            height="14"
          >
            <line x1="12" y1="5" x2="12" y2="19" />
            <line x1="5" y1="12" x2="19" y2="12" />
          </svg>
          Create Credential
        </button>
      {/if}
      {#if activeTab === "UniFi"}
        <div class="tab-bar-spacer"></div>
        <button
          type="button"
          class="create-credential-btn"
          on:click={() => (isLinkUnifiOpen = true)}
        >
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            width="14"
            height="14"
          >
            <path
              d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
            />
            <path
              d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
            />
          </svg>
          Link Site
        </button>
      {/if}
    </div>
    <div class="detail-pane-body">
      {#if activeTab === "Overview"}
        <OverviewTab {company} {credentials} {configurations} {unifiSites} />
      {:else if activeTab === "Credentials"}
        <CredentialsTab
          companyId={company?.id ?? ""}
          {credentials}
          {credentialTypes}
          {accessToken}
          {permissions}
          {isMobile}
          bind:isCreateCredentialOpen
        />
      {:else if activeTab === "Configurations"}
        <ConfigurationsTab {configurations} {isMobile} />
      {:else if activeTab === "UniFi"}
        <UniFiTab
          companyId={company?.id ?? ""}
          {unifiSites}
          {accessToken}
          {permissions}
          bind:isLinkUnifiOpen
        />
      {:else if activeTab === "Contacts"}
        <ContactsTab {company} />
      {:else if activeTab === "Activity"}
        <ActivityTab />
      {/if}
    </div>
  </div>
</div>
