<script setup lang="ts">
import { useStaffTime } from '~/composables/useStaffTime'
import { useAuthStore } from '~/stores/auth'
import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";

definePageMeta({
  layout: "default",
})

const { list, start, stop, submit, approve } = useStaffTime()
const auth = useAuthStore()
const router = useRouter()
// MOBILE DETECTION
const platformIsNative = useCapacitor().getIsNative()
// LIST + ACTIVE
const entries = ref([])
const active = computed(() => entries.value.find(e => !e.stopped_at && e.user_id === auth.user.id))

const loading = ref(false)
const showModal = ref(false)
const editEntry = ref(null)

// 👥 Nutzer-Filter (nur für Berechtigte)
const users = ref([])
const selectedUser = ref(platformIsNative ? auth.user.id : null)

const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))

const typeLabel = {
  work: "Arbeitszeit",
  vacation: "Urlaub",
  sick: "Krankheit",
  holiday: "Feiertag",
  other: "Sonstiges"
}

const typeColor = {
  work: "gray",
  vacation: "yellow",
  sick: "rose",
  holiday: "blue",
  other: "gray"
}


async function loadUsers() {
  if (!canViewAll.value) return
  // Beispiel: User aus Supabase holen
  const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
  users.value = res
}


// LOAD ENTRIES (only own entries on mobile)
async function load() {
  entries.value = await list(
      canViewAll.value && selectedUser.value ? { user_id: selectedUser.value } : undefined
  )

}

async function handleStart() {
  loading.value = true
  await start("Arbeitszeit gestartet")
  await load()
  loading.value = false
}

async function handleStop() {
  if (!active.value) return
  loading.value = true
  await stop(active.value.id)
  await load()
  loading.value = false
}

function handleEdit(entry: any) {
  editEntry.value = entry
  showModal.value = true
}

async function handleSubmit(entry: any) {
  await submit(entry.id)
  await load()
}

async function handleApprove(entry: any) {
  await approve(entry.id)
  await load()
}



onMounted(async () => {
  await load()
  await loadUsers()
  setPageLayout(platformIsNative ? 'mobile' : 'default')
})


</script>

<template>
  <!-- ============================= -->
  <!-- DESKTOP VERSION -->
  <!-- ============================= -->
  <template v-if="!platformIsNative">
    <UDashboardNavbar title="Zeiterfassung" :badge="entries.length" />

    <UDashboardToolbar>
      <template #left>
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-clock" class="text-primary-500" />
          <span v-if="active" class="text-primary-600 font-medium">
            Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
          </span>
          <span v-else class="text-gray-500">Keine aktive Zeit</span>
        </div>
      </template>

      <template #right>
        <UButton
            v-if="active"
            color="red"
            icon="i-heroicons-stop"
            :loading="loading"
            label="Stoppen"
            @click="handleStop"
        />
        <UButton
            v-else
            color="green"
            icon="i-heroicons-play"
            :loading="loading"
            label="Starten"
            @click="handleStart"
        />
        <UButton
            color="primary"
            icon="i-heroicons-plus"
            label="Zeit"
            @click="() => { editEntry = null; showModal = true }"
        />
      </template>
    </UDashboardToolbar>
    <UDashboardToolbar>
      <template #left>
        <!-- 👥 User-Filter (nur bei Berechtigung) -->
        <div v-if="canViewAll" class="flex items-center gap-2">
          <USelectMenu
              v-model="selectedUser"
              :options="[
          { label: 'Alle Benutzer', value: null },
          ...users.map(u => ({ label: u.full_name || u.email, value: u.user_id }))
        ]"
              placeholder="Benutzer auswählen"
              value-attribute="value"
              option-attribute="label"
              class="min-w-[220px]"
              @change="load"
          />

          <!-- 🔹 Button zur Auswertung -->
          <UTooltip
              :text="selectedUser ? 'Anwesenheiten des Mitarbeiters auswerten' : 'Mitarbeiter für die Auswertung auswählen'"
          >
            <UButton
                :disabled="!selectedUser"
                color="gray"
                icon="i-heroicons-chart-bar"
                label="Auswertung"
                variant="soft"
                @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
            />
          </UTooltip>

        </div>
      </template>
    </UDashboardToolbar>


    <UDashboardPanelContent>
      <UTable
          :rows="entries"
          :columns="[
          { key: 'actions', label: '' },
          { key: 'state', label: 'Status' },
          { key: 'started_at', label: 'Start' },
          { key: 'stopped_at', label: 'Ende' },
          { key: 'duration_minutes', label: 'Dauer' },
          { key: 'user', label: 'Mitarbeiter' },
          { key: 'type', label: 'Typ' },
          { key: 'description', label: 'Beschreibung' },
          ]"
      >
        <template #state-data="{ row }">
          <span v-if="row.state === 'approved'" class="text-primary-500">Genehmigt</span>
          <span v-else-if="row.state === 'submitted'" class="text-cyan-500">Eingereicht</span>
          <span v-else-if="row.state === 'draft'" class="text-red-500">Entwurf</span>
        </template>
        <template #type-data="{ row }">
          <UBadge :color="typeColor[row.type] || 'gray'">
            {{ typeLabel[row.type] || row.type }}
          </UBadge>
        </template>

        <!-- START -->
        <template #started_at-data="{ row }">
          <!-- Urlaub / Krankheit → nur Tag -->
          <span v-if="row.type === 'vacation' || row.type === 'sick'">
            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY") }}
          </span>

          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
          <span v-else>
            {{ useNuxtApp().$dayjs(row.started_at).format("DD.MM.YY HH:mm") }}
          </span>
        </template>


        <!-- ENDE -->
        <template #stopped_at-data="{ row }">
          <span v-if="!row.stopped_at" class="text-primary-500 font-medium">
            läuft...
          </span>

          <!-- Urlaub / Krankheit → nur Tag -->
          <span v-else-if="row.type === 'vacation' || row.type === 'sick'">
            {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY") }}
          </span>

          <!-- Arbeitszeit / andere → Datum + Uhrzeit -->
          <span v-else>
            {{ useNuxtApp().$dayjs(row.stopped_at).format("DD.MM.YY HH:mm") }}
          </span>
        </template>

        <template #duration_minutes-data="{ row }">

          <!-- Urlaub / Krankheit → Tage anzeigen -->
          <span v-if="row.type === 'vacation' || row.type === 'sick'">
<!--            {{ useFormatDurationDays(row.startet_at, row.stopped_at) }}-->--
          </span>

          <!-- Arbeitszeit / andere → Minutenformat -->
          <span v-else>
            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : "-" }}
          </span>

        </template>

        <template #actions-data="{ row }">
          <UTooltip text="Zeit genehmigen" v-if="row.state === 'submitted'">
            <UButton
                variant="ghost"
                icon="i-heroicons-check-circle"
                @click="handleApprove(row)"
            />
          </UTooltip>
          <UTooltip text="Zeit einreichen" v-if="row.state === 'draft'">
            <UButton
                variant="ghost"
                icon="i-heroicons-arrow-right-end-on-rectangle"
                @click="handleSubmit(row)"
            />
          </UTooltip>
          <UTooltip text="Zeit bearbeiten" v-if="row.state === 'draft'">
            <UButton
                variant="ghost"
                icon="i-heroicons-pencil-square"
                @click="handleEdit(row)"
            />
          </UTooltip>
        </template>
        <template #user-data="{ row }">
          {{users.find(i => i.user_id === row.user_id) ? users.find(i => i.user_id === row.user_id).full_name : ""}}
        </template>
        <template #description-data="{ row }">
          <span v-if="row.type === 'vacation'">{{row.vacation_reason}}</span>
          <span v-else-if="row.type === 'sick'">{{row.sick_reason}}</span>
          <span v-else>{{row.description}}</span>
        </template>
      </UTable>
    </UDashboardPanelContent>
  </template>

  <!-- ============================= -->
  <!-- MOBILE VERSION -->
  <!-- ============================= -->
  <template v-else>
    <UDashboardNavbar title="Zeiterfassung" />

    <div class="relative flex flex-col h-[100dvh] overflow-hidden">

      <!-- 🔥 FIXED ACTIVE TIMER -->
      <div class="p-4 bg-white dark:bg-gray-900 border-b sticky top-0 z-20 shadow-sm">
        <UCard class="p-3">
          <div class="flex items-center justify-between">

            <div>
              <p class="text-gray-500 text-sm">Aktive Zeit</p>

              <p v-if="active" class="text-primary-600 font-semibold">
                Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
              </p>
              <p v-else class="text-gray-600">Keine aktive Zeit</p>
            </div>

            <UButton
                v-if="active"
                color="red"
                icon="i-heroicons-stop"
                :loading="loading"
                @click="handleStop"
            />
            <UButton
                v-else
                color="green"
                icon="i-heroicons-play"
                :loading="loading"
                @click="handleStart"
            />
          </div>
        </UCard>
      </div>

      <div class="px-3 mt-3">
        <UButton
            color="gray"
            icon="i-heroicons-chart-bar"
            label="Eigene Auswertung"
            class="w-full"
            variant="soft"
            @click="router.push(`/staff/time/${auth.user.id}/evaluate`)"
        />
      </div>

      <!-- 📜 SCROLLABLE CONTENT -->
      <UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">

        <!-- ZEIT-CARDS -->
        <UCard
            v-for="row in entries"
            :key="row.id"
            class="p-4 border rounded-xl active:scale-[0.98] transition cursor-pointer"
            @click="handleEdit(row)"
        >
          <div class="flex justify-between items-center">
            <div class="font-semibold flex items-center gap-2">
              <span>{{ row.description || 'Keine Beschreibung' }}</span>

              <UBadge
                  :color="typeColor[row.type]"
                  class="text-xs"
              >
                {{ typeLabel[row.type] }}
              </UBadge>
            </div>

            <UBadge
                :color="{
    approved: 'primary',
    submitted: 'cyan',
    draft: 'red'
  }[row.state]"
            >
              {{
                {
                  approved: 'Genehmigt',
                  submitted: 'Eingereicht',
                  draft: 'Entwurf'
                }[row.state] || row.state
              }}
            </UBadge>

          </div>

          <p class="text-sm text-gray-500 mt-1">
            Start: {{ useNuxtApp().$dayjs(row.started_at).format('DD.MM.YY HH:mm') }}
          </p>

          <p class="text-sm text-gray-500">
            Ende:
            <span v-if="row.stopped_at">
            {{ useNuxtApp().$dayjs(row.stopped_at).format('DD.MM.YY HH:mm') }}
          </span>
            <span v-else class="text-primary-500 font-medium">läuft...</span>
          </p>

          <p class="text-sm text-gray-500">
            Dauer:
            {{ row.duration_minutes ? useFormatDuration(row.duration_minutes) : '-' }}
          </p>

          <!-- ACTION-BUTTONS -->
          <div class="flex gap-2 mt-3">
            <UButton
                v-if="row.state === 'draft'"
                color="gray"
                icon="i-heroicons-arrow-right-end-on-rectangle"
                label="Einreichen"
                variant="soft"
                @click.stop="handleSubmit(row)"
            />

<!--            <UButton
                v-if="row.state === 'submitted'"
                color="primary"
                icon="i-heroicons-check"
                label="Genehmigen"
                variant="soft"
                @click.stop="handleApprove(row)"
            />-->
          </div>
        </UCard>

      </UDashboardPanelContent>

      <!-- ➕ FLOATING ACTION BUTTON -->
      <FloatingActionButton
          icon="i-heroicons-plus"
          class="!fixed bottom-6 right-6 z-50"
          color="primary"
          @click="() => { editEntry = null; showModal = true }"
      />

    </div>
  </template>

  <!-- MODAL -->
  <StaffTimeEntryModal
      v-model="showModal"
      :entry="editEntry"
      @saved="load"
      :users="users"
      :can-select-user="canViewAll"
      :default-user-id="selectedUser"
  />
</template>
