<script setup lang="ts">
const props = defineProps<{
  selectedTab: "communications" | "documents";
  peopleLeftMode: "contacts" | "calendar";
  authInitials: string;
  authDisplayName: string;
  telegramStatusBadgeClass: string;
  telegramStatusLabel: string;
  telegramConnectBusy: boolean;
  telegramConnectNotice: string;
}>();

const emit = defineEmits<{
  (e: "open-contacts"): void;
  (e: "open-calendar"): void;
  (e: "open-documents"): void;
  (e: "start-telegram-connect"): void;
  (e: "logout"): void;
}>();
</script>

<template>
  <div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
    <div class="flex items-center justify-between gap-3">
      <div class="join">
        <button
          class="btn btn-sm join-item"
          :class="
            props.selectedTab === 'communications' && props.peopleLeftMode === 'contacts'
              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
          "
          @click="emit('open-contacts')"
        >
          Contacts
        </button>
        <button
          class="btn btn-sm join-item"
          :class="
            props.selectedTab === 'communications' && props.peopleLeftMode === 'calendar'
              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
          "
          @click="emit('open-calendar')"
        >
          Calendar
        </button>
        <button
          class="btn btn-sm join-item"
          :class="
            props.selectedTab === 'documents'
              ? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
              : 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
          "
          @click="emit('open-documents')"
        >
          Documents
        </button>
      </div>

      <div class="dropdown dropdown-end">
        <button tabindex="0" class="btn btn-sm btn-ghost gap-2">
          <div class="avatar placeholder">
            <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-content">
              <span class="text-[11px] font-semibold leading-none">{{ props.authInitials }}</span>
            </div>
          </div>
          <span class="max-w-[160px] truncate text-xs font-medium">{{ props.authDisplayName }}</span>
        </button>
        <div tabindex="0" class="dropdown-content z-30 mt-2 w-80 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg">
          <div class="mb-2 border-b border-base-300 pb-2">
            <p class="truncate text-sm font-semibold">{{ props.authDisplayName }}</p>
            <p class="text-[11px] uppercase tracking-wide text-base-content/60">Settings</p>
          </div>

          <div class="space-y-2 rounded-lg border border-base-300 bg-base-50/40 p-2">
            <div class="flex items-center justify-between gap-2">
              <span class="text-xs font-medium">Telegram Business</span>
              <span class="badge badge-xs" :class="props.telegramStatusBadgeClass">{{ props.telegramStatusLabel }}</span>
            </div>
            <button
              class="btn btn-xs btn-primary w-full"
              :disabled="props.telegramConnectBusy"
              @click="emit('start-telegram-connect')"
            >
              {{ props.telegramConnectBusy ? "Connecting..." : "Connect Telegram" }}
            </button>
            <p v-if="props.telegramConnectNotice" class="text-[11px] leading-snug text-base-content/70">
              {{ props.telegramConnectNotice }}
            </p>
          </div>

          <div class="mt-3 border-t border-base-300 pt-2">
            <button class="btn btn-sm w-full btn-ghost justify-start" @click="emit('logout')">Logout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
