<script setup>
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, reject } = useStaffTime()
const auth = useAuthStore()
const router = useRouter()
const toast = useToast()
const { $dayjs } = useNuxtApp()

// MOBILE DETECTION
const platformIsNative = false

// STATE
const loading = ref(false)
const view = ref('list') // 'list' | 'timeline'

// MODAL STATES
const showEditModal = ref(false)
const entryToEdit = ref(null)

const showRejectModal = ref(false)
const entryToReject = ref(null)
const rejectReason = ref("")

// FILTER & USER
const users = ref([])
const selectedUser = ref(auth.user.id)
const canViewAll = computed(() => auth.permissions.includes('staff.time.read_all'))
const userItems = computed(() => users.value.map(u => ({
  label: u.full_name || u.email,
  value: u.user_id
})))

// DATA
const entries = ref([])
const active = computed(() => entries.value.find(e => !e.stopped_at))
const isViewingSelf = computed(() => selectedUser.value === auth.user.id)

// GROUPING
const groupedEntries = computed(() => {
  const groups = {}
  entries.value.forEach(entry => {
    const dateKey = $dayjs(entry.started_at).format('YYYY-MM-DD')
    if (!groups[dateKey]) groups[dateKey] = []
    groups[dateKey].push(entry)
  })
  return groups
})

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

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

// ACTIONS
async function loadUsers() {
  if (!canViewAll.value) return
  const res = (await useNuxtApp().$api("/api/tenant/profiles")).data
  users.value = res
}

async function load() {
  if (!selectedUser.value) return
  entries.value = await list({ user_id: selectedUser.value })
}

async function handleStart() {
  if (!isViewingSelf.value) return
  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) {
  entryToEdit.value = entry
  showEditModal.value = true
}

async function handleSubmit(entry) {
  loading.value = true
  await submit(entry)
  await load()
  loading.value = false
  toast.add({ title: 'Zeit eingereicht', color: 'green' })
}

async function handleApprove(entry) {
  loading.value = true
  await approve(entry)
  await load()
  loading.value = false
  toast.add({ title: 'Zeit genehmigt', color: 'green' })
}

function openRejectModal(entry) {
  entryToReject.value = entry
  rejectReason.value = ""
  showRejectModal.value = true
}

async function confirmReject() {
  if (!entryToReject.value) return
  loading.value = true
  try {
    await reject(entryToReject.value, rejectReason.value || "Vom Administrator abgelehnt")
    toast.add({ title: 'Zeit abgelehnt', color: 'green' })
    showRejectModal.value = false
    await load()
  } catch (e) {
    toast.add({ title: 'Fehler beim Ablehnen', description: e.message, color: 'error' })
  } finally {
    loading.value = false
    entryToReject.value = null
  }
}

watch(selectedUser, () => { load() })

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

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

    <UDashboardToolbar>
      <template #left>
        <div class="flex items-center gap-4">
          <div class="flex items-center gap-2 border-r pr-4 mr-2">
            <UIcon name="i-heroicons-clock" class="w-5 h-5" :class="active ? 'text-primary-500 animate-pulse' : 'text-gray-400'" />
            <div class="flex flex-col">
              <span class="text-xs text-gray-500 uppercase font-bold">Status</span>
              <span v-if="active" class="text-sm font-medium text-primary-600">
                 Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
               </span>
              <span v-else class="text-sm text-gray-600">Nicht aktiv</span>
            </div>
          </div>

          <div v-if="canViewAll" class="flex items-center gap-2">
            <USelectMenu
                v-model="selectedUser"
                :items="userItems"
                placeholder="Benutzer auswählen"
                value-key="value"
                label-key="label"
                class="min-w-[220px]"
                :clearable="false"
            />
            <UTooltip text="Anwesenheiten auswerten">
              <UButton
                  :disabled="!selectedUser"
                  color="gray"
                  icon="i-heroicons-chart-bar"
                  variant="ghost"
                  @click="router.push(`/staff/time/${selectedUser}/evaluate`)"
              />
            </UTooltip>
          </div>
        </div>
      </template>

      <template #right>
        <div class="flex gap-2 items-center">
          <div class="flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mr-2">
            <UTooltip text="Listenansicht">
              <UButton
                  size="xs"
                  :color="view === 'list' ? 'white' : 'gray'"
                  variant="ghost"
                  icon="i-heroicons-table-cells"
                  @click="view = 'list'"
              />
            </UTooltip>
            <UTooltip text="Zeitstrahl">
              <UButton
                  size="xs"
                  :color="view === 'timeline' ? 'white' : 'gray'"
                  variant="ghost"
                  icon="i-heroicons-list-bullet"
                  @click="view = 'timeline'"
              />
            </UTooltip>
          </div>

          <template v-if="isViewingSelf">
            <UButton v-if="active" color="error" 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" />
          </template>
          <template v-else-if="active && canViewAll">
            <UButton color="error" variant="soft" icon="i-heroicons-stop" :loading="loading" label="Mitarbeiter stoppen" @click="handleStop" />
          </template>

          <UButton color="gray" variant="solid" icon="i-heroicons-plus" label="Erfassen" @click="() => { entryToEdit = null; showEditModal = true }" />
        </div>
      </template>
    </UDashboardToolbar>

    <UDashboardPanelContent class="p-0 sm:p-4">

      <UCard v-if="view === 'list'" :ui="{ body: { padding: 'p-0 sm:p-0' } }">
        <UTable
            :data="entries"
            :columns="normalizeTableColumns([
              { key: 'actions', label: 'Aktionen', class: 'w-32' },
              { key: 'state', label: 'Status' },
              { key: 'started_at', label: 'Start' },
              { key: 'stopped_at', label: 'Ende' },
              { key: 'duration_minutes', label: 'Dauer' },
              { key: 'type', label: 'Typ' },
              { key: 'description', label: 'Beschreibung' },
            ])"
        >
          <template #state-cell="{ row }">
            <UBadge v-if="row.original.state === 'approved'" color="green" variant="subtle">Genehmigt</UBadge>
            <UBadge v-else-if="row.original.state === 'submitted'" color="cyan" variant="subtle">Eingereicht</UBadge>
            <UBadge v-else-if="row.original.state === 'rejected'" color="error" variant="subtle">Abgelehnt</UBadge>
            <UBadge v-else color="gray" variant="subtle">Entwurf</UBadge>
          </template>
          <template #type-cell="{ row }">
            <UBadge :color="typeColor[row.original.type] || 'gray'" variant="soft">{{ typeLabel[row.original.type] || row.original.type }}</UBadge>
          </template>
          <template #started_at-cell="{ row }">
            <span v-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY") }}</span>
            <span v-else>{{ useNuxtApp().$dayjs(row.original.started_at).format("DD.MM.YY HH:mm") }}</span>
          </template>
          <template #stopped_at-cell="{ row }">
            <span v-if="!row.original.stopped_at" class="text-primary-500 font-medium animate-pulse">läuft...</span>
            <span v-else-if="['vacation','sick'].includes(row.original.type)">{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY") }}</span>
            <span v-else>{{ useNuxtApp().$dayjs(row.original.stopped_at).format("DD.MM.YY HH:mm") }}</span>
          </template>
          <template #duration_minutes-cell="{ row }">
            {{ row.original.duration_minutes ? useFormatDuration(row.original.duration_minutes) : "-" }}
          </template>
          <template #actions-cell="{ row }">
            <div class="flex items-center gap-1">
              <UTooltip text="Einreichen" v-if="(row.original.state === 'draft' || row.original.state === 'factual') && row.original.stopped_at">
                <UButton size="xs" color="cyan" variant="ghost" icon="i-heroicons-paper-airplane" @click="handleSubmit(row.original)" :loading="loading" />
              </UTooltip>
              <UTooltip text="Genehmigen" v-if="row.original.state === 'submitted' && canViewAll">
                <UButton size="xs" color="green" variant="ghost" icon="i-heroicons-check" @click="handleApprove(row.original)" :loading="loading" />
              </UTooltip>
              <UTooltip text="Ablehnen" v-if="['draft', 'factual', 'submitted', 'approved'].includes(row.original.state) && canViewAll">
                <UButton size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" @click="openRejectModal(row.original)" :loading="loading" />
              </UTooltip>
              <UTooltip text="Bearbeiten" v-if="['draft', 'factual', 'submitted'].includes(row.original.state)">
                <UButton size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" @click="handleEdit(row.original)" />
              </UTooltip>
            </div>
          </template>
          <template #description-cell="{ row }">
            <span v-if="row.original.type === 'vacation'">{{ row.original.vacation_reason }}</span>
            <span v-else-if="row.original.type === 'sick'">{{ row.original.sick_reason }}</span>
            <span v-else>{{ row.original.description }}</span>
          </template>
          <template #empty>
            <TableEmptyState label="Keine Zeiten anzuzeigen" />
          </template>
        </UTable>
      </UCard>

      <div v-else class="max-w-5xl mx-auto pb-20">

        <div v-for="(group, date) in groupedEntries" :key="date" class="relative group/date">

          <div class="sticky top-0 z-10 bg-white dark:bg-gray-900 py-4 mb-4 border-b border-gray-200 dark:border-gray-800 flex items-center gap-3">
            <div class="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
            <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 capitalize">
              {{ useNuxtApp().$dayjs(date).format('dddd, DD. MMMM') }}
            </h3>
            <span class="text-xs text-gray-500 font-normal mt-0.5">
                {{ group.length }} Einträge
             </span>
          </div>

          <div class="absolute left-[5px] top-14 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-last/date:bottom-auto group-last/date:h-full"></div>

          <div class="space-y-6 pb-8">
            <div v-for="entry in group" :key="entry.id" class="relative pl-8">

              <div
                  class="absolute left-0 top-6 w-3 h-3 rounded-full border-2 border-white dark:border-gray-900 shadow-sm z-0"
                  :class="{
                  'bg-green-500 ring-4 ring-green-100 dark:ring-green-900/30': !entry.stopped_at,
                  'bg-gray-400': entry.stopped_at && entry.type === 'work',
                  'bg-yellow-400': entry.type === 'vacation',
                  'bg-red-400': entry.type === 'sick'
                }"
              ></div>

              <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">

                <div class="flex flex-wrap justify-between items-center p-4 border-b border-gray-100 dark:border-gray-700 bg-gray-50/30 dark:bg-gray-800">
                  <div class="flex items-center gap-3">
                    <div class="font-mono text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                      {{ useNuxtApp().$dayjs(entry.started_at).format('HH:mm') }}
                      <span class="text-gray-400 text-sm">bis</span>
                      <span v-if="entry.stopped_at">{{ useNuxtApp().$dayjs(entry.stopped_at).format('HH:mm') }}</span>
                      <span v-else class="text-primary-500 animate-pulse text-sm uppercase font-bold tracking-wider">Läuft</span>
                    </div>

                    <UBadge :color="typeColor[entry.type]" variant="soft" size="xs">{{ typeLabel[entry.type] }}</UBadge>
                  </div>

                  <div class="flex items-center gap-2">
                      <span v-if="entry.duration_minutes" class="text-sm font-medium text-gray-600 dark:text-gray-300">
                        {{ useFormatDuration(entry.duration_minutes) }}
                      </span>

                    <UBadge v-if="entry.state === 'approved'" color="green" size="xs" variant="solid">Genehmigt</UBadge>
                    <UBadge v-else-if="entry.state === 'submitted'" color="cyan" size="xs" variant="solid">Eingereicht</UBadge>
                    <UBadge v-else-if="entry.state === 'rejected'" color="error" size="xs" variant="solid">Abgelehnt</UBadge>
                    <UBadge v-else color="gray" size="xs" variant="subtle">Entwurf</UBadge>
                  </div>
                </div>

                <div class="p-4">
                  <p class="text-gray-700 dark:text-gray-300 text-sm whitespace-pre-wrap">
                    {{ entry.description || 'Keine Beschreibung angegeben.' }}
                  </p>
                  <p v-if="entry.type === 'vacation'" class="text-sm text-gray-500 italic mt-1">
                    Grund: {{ entry.vacation_reason }}
                  </p>
                </div>

                <div class="bg-gray-50 dark:bg-gray-900/30 px-4 py-2 flex justify-end gap-2 border-t border-gray-100 dark:border-gray-700">
                  <UButton
                      v-if="(entry.state === 'draft' || entry.state === 'factual') && entry.stopped_at"
                      size="xs" color="cyan" variant="solid" icon="i-heroicons-paper-airplane" label="Einreichen"
                      @click="handleSubmit(entry)" :loading="loading"
                  />

                  <UButton
                      v-if="entry.state === 'submitted' && canViewAll"
                      size="xs" color="green" variant="solid" icon="i-heroicons-check" label="Genehmigen"
                      @click="handleApprove(entry)" :loading="loading"
                  />

                  <UButton
                      v-if="['draft', 'factual', 'submitted', 'approved'].includes(entry.state) && canViewAll"
                      size="xs" color="error" variant="ghost" icon="i-heroicons-x-mark" label="Ablehnen"
                      @click="openRejectModal(entry)" :loading="loading"
                  />

                  <UButton
                      v-if="['draft', 'factual', 'submitted'].includes(entry.state)"
                      size="xs" color="gray" variant="ghost" icon="i-heroicons-pencil-square" label="Bearbeiten"
                      @click="handleEdit(entry)"
                  />
                </div>

              </div>
            </div>
          </div>
        </div>

        <div v-if="entries.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400">
          <UIcon name="i-heroicons-calendar" class="w-12 h-12 mb-2 opacity-50" />
          <p>Keine Einträge im gewählten Zeitraum.</p>
        </div>

      </div>
    </UDashboardPanelContent>
  </template>

  <template v-else>
    <UDashboardNavbar title="Zeiterfassung" />
    <div class="relative flex flex-col h-[100dvh] overflow-hidden">
      <div v-if="isViewingSelf" 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 animate-pulse">
                Läuft seit {{ useNuxtApp().$dayjs(active.started_at).format('HH:mm') }}
              </p>
              <p v-else class="text-gray-600">Keine aktive Zeit</p>
            </div>
            <div class="flex gap-2">
              <template v-if="isViewingSelf">
                <UButton v-if="active" color="error" icon="i-heroicons-stop" :loading="loading" @click="handleStop" />
                <UButton v-else color="green" icon="i-heroicons-play" :loading="loading" @click="handleStart" />
              </template>
            </div>
          </div>
        </UCard>
      </div>
      <div class="px-3 mt-3">
        <UButton color="gray" icon="i-heroicons-chart-bar" label="Auswertung" class="w-full" variant="soft" @click="router.push(`/staff/time/${selectedUser}/evaluate`)" />
      </div>
      <UDashboardPanelContent class="flex-1 overflow-y-auto p-3 space-y-4 pb-24">
        <UCard v-for="row in entries" :key="row.id" class="p-4 border rounded-xl" @click="handleEdit(row)">
          <div class="flex justify-between items-center">
            <div class="font-semibold flex items-center gap-2">
              <span class="truncate max-w-[150px]">{{ row.description || 'Keine Beschreibung' }}</span>
              <UBadge :color="typeColor[row.type]" class="text-xs">{{ typeLabel[row.type] }}</UBadge>
            </div>
            <UBadge v-if="row.state === 'approved'" color="green">Genehmigt</UBadge>
            <UBadge v-else-if="row.state === 'submitted'" color="cyan">Eingereicht</UBadge>
            <UBadge v-else-if="row.state === 'rejected'" color="error">Abgelehnt</UBadge>
            <UBadge v-else color="gray">Entwurf</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></p>
          <div class="flex gap-2 mt-3 justify-end">
            <UButton v-if="(row.state === 'draft' || row.state === 'factual') && row.stopped_at" color="cyan" size="sm" icon="i-heroicons-paper-airplane" label="Einreichen" variant="soft" @click.stop="handleSubmit(row)" :loading="loading" />
            <UButton v-if="row.state === 'submitted' && canViewAll" color="green" size="sm" icon="i-heroicons-check" label="Genehmigen" variant="soft" @click.stop="handleApprove(row)" :loading="loading" />
            <UButton v-if="['draft', 'factual', 'submitted', 'approved'].includes(row.state) && canViewAll" color="error" size="sm" icon="i-heroicons-x-mark" label="Ablehnen" variant="soft" @click.stop="openRejectModal(row)" :loading="loading" />
          </div>
        </UCard>
      </UDashboardPanelContent>
      <FloatingActionButton icon="i-heroicons-plus" class="!fixed bottom-6 right-6 z-50" color="primary" @click="() => { entryToEdit = null; showEditModal = true }" />
    </div>
  </template>

  <StaffTimeEntryModal
      v-model="showEditModal"
      :entry="entryToEdit"
      @saved="load"
      :default-user-id="selectedUser"
  />

  <UModal v-model:open="showRejectModal">
    <template #content>
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Zeiteintrag ablehnen
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showRejectModal = false" />
          </div>
        </template>
        <div class="space-y-4">
          <p class="text-sm text-gray-500">
            Der Eintrag wird als "Rejected" markiert und nicht mehr zur Arbeitszeit gezählt.
          </p>
          <UFormField label="Grund (optional)" name="reason">
            <UTextarea v-model="rejectReason" placeholder="Falsche Buchung, Doppelt, etc." autofocus />
          </UFormField>
        </div>
        <template #footer>
          <div class="flex justify-end gap-2">
            <UButton color="gray" variant="soft" @click="showRejectModal = false">Abbrechen</UButton>
            <UButton color="error" :loading="loading" @click="confirmReject">Bestätigen</UButton>
          </div>
        </template>
      </UCard>
    </template>
  </UModal>
</template>
