---
import { Icon } from 'astro-icon/components'
import { actions, isInputError } from 'astro:actions'
import { z } from 'astro:schema'

import { adminAnnouncementActions } from '../../../actions/admin/announcement'
import Button from '../../../components/Button.astro'
import InputCardGroup from '../../../components/InputCardGroup.astro'
import InputSubmitButton from '../../../components/InputSubmitButton.astro'
import InputText from '../../../components/InputText.astro'
import InputTextArea from '../../../components/InputTextArea.astro'
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
import TimeFormatted from '../../../components/TimeFormatted.astro'
import Tooltip from '../../../components/Tooltip.astro'
import {
  announcementTypes,
  getAnnouncementTypeInfo,
  zodAnnouncementTypesById,
} from '../../../constants/announcementTypes'
import BaseLayout from '../../../layouts/BaseLayout.astro'
import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
import { prisma } from '../../../lib/prisma'

import type { AnnouncementType, Prisma } from '@prisma/client'

const { data: filters } = zodParseQueryParamsStoringErrors(
  {
    'sort-by': z
      .enum(['title', 'type', 'startDate', 'endDate', 'isActive', 'createdAt'])
      .default('createdAt'),
    'sort-order': z.enum(['asc', 'desc']).default('desc'),
    search: z.string().optional(),
    type: zodAnnouncementTypesById.optional(),
    status: z.enum(['active', 'inactive']).optional(),
  },
  Astro
)

// Set up Prisma orderBy with correct typing
const prismaOrderBy = {
  [filters['sort-by']]: filters['sort-order'] === 'asc' ? 'asc' : 'desc',
} as const satisfies Prisma.AnnouncementOrderByWithRelationInput

// Build where clause based on filters
const whereClause: Prisma.AnnouncementWhereInput = {}

if (filters.search) {
  whereClause.OR = [{ content: { contains: filters.search, mode: 'insensitive' } }]
}

if (filters.type) {
  whereClause.type = filters.type as AnnouncementType
}

if (filters.status) {
  whereClause.isActive = filters.status === 'active'
}

// Retrieve announcements from the database
const announcements = await prisma.announcement.findMany({
  where: whereClause,
  orderBy: prismaOrderBy,
})

// Helper for generating sort URLs
const makeSortUrl = (slug: NonNullable<(typeof filters)['sort-by']>) => {
  const currentSortBy = filters['sort-by']
  const currentSortOrder = filters['sort-order']
  const newSortOrder = currentSortBy === slug && currentSortOrder === 'asc' ? 'desc' : 'asc'
  const searchParams = new URLSearchParams(Astro.url.search)
  searchParams.set('sort-by', slug)
  searchParams.set('sort-order', newSortOrder)
  return `/admin/announcements?${searchParams.toString()}`
}

// Current date for form min values
const currentDate = new Date().toISOString().slice(0, 16) // Format: YYYY-MM-DDThh:mm

// Default new announcement
const newAnnouncement = {
  content: '',
  type: 'INFO' as const,
  link: null,
  linkText: null,
  startDate: currentDate,
  endDate: '',
  isActive: true as boolean,
} satisfies Prisma.AnnouncementCreateInput

// Get action results
const createResult = Astro.getActionResult(adminAnnouncementActions.create)
const updateResult = Astro.getActionResult(adminAnnouncementActions.update)
const deleteResult = Astro.getActionResult(adminAnnouncementActions.delete)
const toggleResult = Astro.getActionResult(adminAnnouncementActions.toggleActive)

const createInputErrors = isInputError(createResult?.error) ? createResult.error.fields : {}

// Add success messages to banners
Astro.locals.banners.addIfSuccess(createResult, 'Announcement created successfully!')
Astro.locals.banners.addIfSuccess(updateResult, 'Announcement updated successfully!')
Astro.locals.banners.addIfSuccess(deleteResult, 'Announcement deleted successfully!')
Astro.locals.banners.addIfSuccess(
  toggleResult,
  (data) => `Announcement ${data.updatedAnnouncement.isActive ? 'activated' : 'deactivated'} successfully!`
)

// Add error messages to banners
if (createResult?.error) {
  const err = createResult.error
  Astro.locals.banners.add({
    uiMessage: err.message,
    type: 'error',
    origin: 'action',
    error: err,
  })
}
if (updateResult?.error) {
  const err = updateResult.error
  Astro.locals.banners.add({
    uiMessage: err.message,
    type: 'error',
    origin: 'action',
    error: err,
  })
}
if (deleteResult?.error) {
  const err = deleteResult.error
  Astro.locals.banners.add({
    uiMessage: err.message,
    type: 'error',
    origin: 'action',
    error: err,
  })
}
if (toggleResult?.error) {
  const err = toggleResult.error
  Astro.locals.banners.add({
    uiMessage: err.message,
    type: 'error',
    origin: 'action',
    error: err,
  })
}
---

<BaseLayout pageTitle="Announcements" widthClassName="max-w-screen-xl">
  <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
    <h1 class="font-title text-2xl font-bold text-white">Announcements</h1>
    <div class="mt-2 flex items-center gap-4 sm:mt-0">
      <span class="text-sm text-zinc-400">{announcements.length} announcements</span>
    </div>
  </div>

  <div class="mb-6 rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg">
    <form method="GET" class="grid gap-3 md:grid-cols-3" autocomplete="off">
      <div>
        <label for="search" class="block text-xs font-medium text-zinc-400">Search</label>
        <input
          type="text"
          name="search"
          id="search"
          value={filters.search}
          placeholder="Search by title or content..."
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        />
      </div>
      <div>
        <label for="type-filter" class="block text-xs font-medium text-zinc-400">Type</label>
        <select
          name="type"
          id="type-filter"
          class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
        >
          <option value="" selected={!filters.type}>All Types</option>
          {
            announcementTypes.map((type) => (
              <option value={type.value} selected={filters.type === type.value}>
                {type.label}
              </option>
            ))
          }
        </select>
      </div>
      <div>
        <label for="status-filter" class="block text-xs font-medium text-zinc-400">Status</label>
        <div class="mt-1 flex">
          <select
            name="status"
            id="status-filter"
            class="w-full rounded-l-md border border-r-0 border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
          >
            <option value="" selected={!filters.status}>All Statuses</option>
            <option value="active" selected={filters.status === 'active'}>Active</option>
            <option value="inactive" selected={filters.status === 'inactive'}>Inactive</option>
          </select>
          <Button
            as="button"
            type="submit"
            color="info"
            variant="solid"
            size="md"
            iconOnly
            icon="ri:search-2-line"
            label="Search"
            class="rounded-l-none"
          />
        </div>
      </div>
    </form>
  </div>

  <!-- Create New Announcement Form -->
  <div class="mb-6">
    <Button
      as="button"
      id="toggle-new-announcement-form"
      color="success"
      variant="solid"
      size="md"
      icon="ri:add-line"
      label="Create"
      class="mb-4"
    />

    <div
      id="new-announcement-form"
      class="hidden rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg"
    >
      <h2 class="font-title mb-4 text-lg font-semibold text-blue-400">Create New Announcement</h2>
      <form method="POST" action={actions.admin.announcement.create} class="grid gap-4 md:grid-cols-2">
        <div class="space-y-3 md:col-span-2">
          <InputTextArea
            label="Content"
            name="content"
            error={createInputErrors.content}
            value={newAnnouncement.content}
            inputProps={{
              required: true,
              maxlength: 1000,
              rows: 3,
              placeholder: 'Announcement Content',
            }}
          />
        </div>

        <div class="space-y-3">
          <InputText
            label="Link"
            name="link"
            error={createInputErrors.link}
            inputProps={{
              type: 'url',
              placeholder: 'https://example.com',
            }}
          />
          <InputText
            label="Link Text "
            name="linkText"
            error={createInputErrors.linkText}
            inputProps={{
              placeholder: 'Link Text',
            }}
          />
        </div>

        <div class="space-y-3">
          <InputCardGroup
            label="Type"
            name="type"
            options={announcementTypes.map((type) => ({
              label: type.label,
              value: type.value,
              icon: type.icon,
            }))}
            cardSize="sm"
            required
            selectedValue={newAnnouncement.type}
          />

          <InputText
            label="Start Date & Time"
            name="startDate"
            error={createInputErrors.startDate}
            inputProps={{
              type: 'datetime-local',
              required: true,
              value: newAnnouncement.startDate,
            }}
          />

          <InputText
            label="End Date & Time"
            name="endDate"
            error={createInputErrors.endDate}
            inputProps={{
              type: 'datetime-local',
              value: newAnnouncement.endDate,
            }}
          />
        </div>

        <div class="space-y-3">
          <InputCardGroup
            name="isActive"
            label="Status"
            error={createInputErrors.isActive}
            options={[
              { label: 'Active', value: 'true' },
              { label: 'Inactive', value: 'false' },
            ]}
            selectedValue={newAnnouncement.isActive ? 'true' : 'false'}
            cardSize="sm"
          />

          <div class="pt-4">
            <InputSubmitButton label="Create Announcement" icon="ri:save-line" hideCancel />
            <Button
              as="button"
              type="button"
              id="cancel-create"
              color="gray"
              variant="faded"
              size="md"
              label="Cancel"
              class="ml-2"
            />
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- Delete Confirmation Modal -->
  <dialog
    id="delete-confirmation-modal"
    class="m-auto max-w-md rounded-lg border border-zinc-700 bg-zinc-800 p-0 backdrop:bg-black/70"
  >
    <div class="p-4">
      <div class="mb-4 flex items-center justify-between border-b border-zinc-700 pb-3">
        <h3 class="font-title text-lg font-semibold text-red-400">Confirm Deletion</h3>
        <button type="button" class="close-modal text-zinc-400 hover:text-zinc-200">
          <Icon name="ri:close-line" class="h-6 w-6" />
        </button>
      </div>

      <p class="mb-4 text-sm text-zinc-300">
        Are you sure you want to delete this announcement? This action cannot be undone.
      </p>

      <form method="POST" action={actions.admin.announcement.delete} id="delete-form">
        <input type="hidden" name="id" id="delete-id" />
        <div class="flex justify-end gap-2">
          <Button
            as="button"
            type="button"
            class="close-modal"
            color="gray"
            variant="faded"
            size="md"
            label="Cancel"
          />
          <Button
            as="button"
            type="submit"
            color="danger"
            variant="solid"
            size="md"
            icon="ri:delete-bin-line"
            label="Delete"
          />
        </div>
      </form>
    </div>
  </dialog>

  <!-- Announcements Table -->
  <div class="rounded-lg border border-zinc-700 bg-zinc-800/50 shadow-lg">
    <div class="sticky top-0 z-10 border-b border-zinc-700 bg-zinc-800/90 px-4 py-3 backdrop-blur-sm">
      <h2 class="font-title font-semibold text-blue-400">Announcements List</h2>
      <div class="mt-1 text-xs text-zinc-400 md:hidden">
        <span>Scroll horizontally to see more →</span>
      </div>
    </div>
    <div class="scrollbar-thin max-w-full overflow-x-auto">
      <div class="min-w-[1200px]">
        <table class="w-full divide-y divide-zinc-700">
          <thead class="bg-zinc-900/30">
            <tr>
              <th
                class="w-[20%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('title')} class="flex items-center hover:text-zinc-200">
                  Title
                  <SortArrowIcon active={filters['sort-by'] === 'title'} sortOrder={filters['sort-order']} />
                </a>
              </th>
              <th
                class="w-[10%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('type')} class="flex items-center hover:text-zinc-200">
                  Type
                  <SortArrowIcon active={filters['sort-by'] === 'type'} sortOrder={filters['sort-order']} />
                </a>
              </th>
              <th
                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('startDate')} class="flex items-center hover:text-zinc-200">
                  Start Date
                  <SortArrowIcon
                    active={filters['sort-by'] === 'startDate'}
                    sortOrder={filters['sort-order']}
                  />
                </a>
              </th>
              <th
                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('endDate')} class="flex items-center hover:text-zinc-200">
                  End Date
                  <SortArrowIcon
                    active={filters['sort-by'] === 'endDate'}
                    sortOrder={filters['sort-order']}
                  />
                </a>
              </th>
              <th
                class="w-[10%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a
                  href={makeSortUrl('isActive')}
                  class="flex items-center justify-center hover:text-zinc-200"
                >
                  Status
                  <SortArrowIcon
                    active={filters['sort-by'] === 'isActive'}
                    sortOrder={filters['sort-order']}
                  />
                </a>
              </th>
              <th
                class="w-[15%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                <a href={makeSortUrl('createdAt')} class="flex items-center hover:text-zinc-200">
                  Created At
                  <SortArrowIcon
                    active={filters['sort-by'] === 'createdAt'}
                    sortOrder={filters['sort-order']}
                  />
                </a>
              </th>
              <th
                class="w-[15%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
              >
                Actions
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-zinc-700 bg-zinc-800/10">
            {
              announcements.length === 0 && (
                <tr>
                  <td colspan="7" class="px-4 py-8 text-center text-zinc-400">
                    <Icon name="ri:information-line" class="mb-2 inline-block size-8" />
                    <p class="text-lg">No announcements found matching your criteria.</p>
                    <p class="text-sm">Try adjusting your search or filters, or create a new announcement.</p>
                  </td>
                </tr>
              )
            }
            {
              announcements.map((announcement) => {
                const announcementTypeInfo = getAnnouncementTypeInfo(announcement.type)

                return (
                  <>
                    <tr class="group hover:bg-zinc-700/30">
                      <td class="px-4 py-3 text-sm">
                        <div class="line-clamp-2 text-zinc-400">{announcement.content}</div>
                      </td>
                      <td class="px-4 py-3 text-left text-sm">
                        <span
                          class={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium ${announcementTypeInfo.classNames.badge}`}
                        >
                          <Icon name={announcementTypeInfo.icon} class="me-1 size-3" />
                          {announcementTypeInfo.label}
                        </span>
                      </td>
                      <td class="px-4 py-3 text-left text-sm text-zinc-300">
                        <TimeFormatted date={announcement.startDate} hourPrecision={false} prefix={false} />
                      </td>
                      <td class="px-4 py-3 text-left text-sm text-zinc-300">
                        {announcement.endDate ? (
                          <TimeFormatted date={announcement.endDate} hourPrecision={false} prefix={false} />
                        ) : (
                          <span class="text-zinc-500">—</span>
                        )}
                      </td>
                      <td class="px-4 py-3 text-center text-sm">
                        <span
                          class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${announcement.isActive ? 'bg-green-900/30 text-green-400' : 'bg-zinc-700/50 text-zinc-400'}`}
                        >
                          {announcement.isActive ? 'Active' : 'Inactive'}
                        </span>
                      </td>
                      <td class="px-4 py-3 text-left text-sm text-zinc-400">
                        <TimeFormatted
                          date={announcement.createdAt}
                          hourPrecision
                          hoursShort
                          prefix={false}
                        />
                      </td>
                      <td class="px-4 py-3">
                        <div class="flex justify-center gap-2">
                          <Tooltip text="Edit">
                            <Button
                              as="button"
                              type="button"
                              data-id={announcement.id}
                              class="edit-button"
                              color="info"
                              variant="faded"
                              size="sm"
                              iconOnly
                              icon="ri:edit-line"
                              label="Edit"
                              onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
                            />
                          </Tooltip>

                          <Tooltip text={announcement.isActive ? 'Deactivate' : 'Activate'}>
                            <form
                              method="POST"
                              action={actions.admin.announcement.toggleActive}
                              class="inline-block"
                              data-confirm={`Are you sure you want to ${announcement.isActive ? 'deactivate' : 'activate'} this announcement?`}
                            >
                              <input type="hidden" name="id" value={announcement.id} />
                              <input type="hidden" name="isActive" value={String(!announcement.isActive)} />
                              <Button
                                as="button"
                                type="submit"
                                color={announcement.isActive ? 'warning' : 'success'}
                                variant="faded"
                                size="sm"
                                iconOnly
                                icon={announcement.isActive ? 'ri:pause-circle-line' : 'ri:play-circle-line'}
                                label={announcement.isActive ? 'Deactivate' : 'Activate'}
                              />
                            </form>
                          </Tooltip>

                          <Tooltip text="Delete">
                            <form
                              method="POST"
                              action={actions.admin.announcement.delete}
                              class="inline-block"
                              data-confirm="Are you sure you want to delete this announcement?"
                            >
                              <input type="hidden" name="id" value={announcement.id} />
                              <Button
                                as="button"
                                type="submit"
                                color="danger"
                                variant="faded"
                                size="sm"
                                iconOnly
                                icon="ri:delete-bin-line"
                                label="Delete"
                              />
                            </form>
                          </Tooltip>
                        </div>
                      </td>
                    </tr>
                    <tr id={`edit-announcement-form-${announcement.id}`} class="hidden bg-zinc-700/20">
                      <td colspan="7" class="p-4">
                        <h3 class="font-title text-md mb-3 font-semibold text-blue-300">
                          Edit: {announcement.content}
                        </h3>
                        <form
                          method="POST"
                          action={actions.admin.announcement.update}
                          class="grid gap-4 md:grid-cols-2"
                        >
                          <input type="hidden" name="id" value={announcement.id} />

                          <div class="space-y-3 md:col-span-2">
                            <InputTextArea
                              label="Content"
                              name="content"
                              value={announcement.content}
                              inputProps={{
                                required: true,
                                maxlength: 1000,
                                rows: 3,
                              }}
                            />
                          </div>

                          <div class="space-y-3">
                            <InputText
                              label="Link"
                              name="link"
                              inputProps={{
                                type: 'url',
                                placeholder: 'https://example.com',
                                value: announcement.link,
                              }}
                            />
                            <InputText
                              label="Link Text"
                              name="linkText"
                              inputProps={{
                                placeholder: 'Link Text',
                                value: announcement.linkText,
                              }}
                            />
                          </div>

                          <div class="space-y-3">
                            <InputCardGroup
                              label="Type"
                              name="type"
                              options={announcementTypes.map((type) => ({
                                label: type.label,
                                value: type.value,
                                icon: type.icon,
                              }))}
                              cardSize="sm"
                              required
                              selectedValue={announcement.type}
                            />

                            <InputText
                              label="Start Date & Time"
                              name="startDate"
                              inputProps={{
                                type: 'datetime-local',
                                required: true,
                                value: new Date(announcement.startDate).toISOString().slice(0, 16),
                              }}
                            />
                            <InputText
                              label="End Date & Time"
                              name="endDate"
                              inputProps={{
                                type: 'datetime-local',
                                value: announcement.endDate
                                  ? new Date(announcement.endDate).toISOString().slice(0, 16)
                                  : '',
                              }}
                            />
                          </div>

                          <div class="space-y-3">
                            <InputCardGroup
                              name="isActive"
                              label="Status"
                              options={[
                                { label: 'Active', value: 'true' },
                                { label: 'Inactive', value: 'false' },
                              ]}
                              selectedValue={announcement.isActive ? 'true' : 'false'}
                              cardSize="sm"
                            />
                            <div class="pt-4">
                              <InputSubmitButton label="Save Changes" icon="ri:save-line" hideCancel />
                              <Button
                                as="button"
                                type="button"
                                label="Cancel"
                                color="gray"
                                variant="faded"
                                size="md"
                                onclick={`document.getElementById('edit-announcement-form-${announcement.id}').classList.toggle('hidden')`}
                                class="ml-2"
                              />
                            </div>
                          </div>
                        </form>
                      </td>
                    </tr>
                  </>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </div>
  </div>
</BaseLayout>

<style>
  .text-2xs {
    font-size: 0.6875rem;
    line-height: 1rem;
  }
  .scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.2);
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.5);
    border-radius: 3px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
  }
  @media (max-width: 768px) {
    .scrollbar-thin {
      scrollbar-width: thin;
      scrollbar-color: rgba(75, 85, 99, 0.5) rgba(30, 41, 59, 0.2);
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Fix for date input appearance in dark mode */
  input[type='date'] {
    color-scheme: dark;
  }
  input[type='datetime-local'] {
    color-scheme: dark;
  }
</style>

<script>
  // Toggle Create Form
  const toggleFormBtn = document.getElementById('toggle-new-announcement-form')
  const newAnnouncementForm = document.getElementById('new-announcement-form')
  const cancelCreateBtn = document.getElementById('cancel-create')

  toggleFormBtn?.addEventListener('click', () => {
    newAnnouncementForm?.classList.toggle('hidden')
  })

  cancelCreateBtn?.addEventListener('click', () => {
    newAnnouncementForm?.classList.add('hidden')
  })

  // Delete Modal functionality
  const deleteModal = document.getElementById('delete-confirmation-modal') as HTMLDialogElement
  const deleteButtons = document.querySelectorAll('.delete-button')
  // const deleteForm = document.getElementById('delete-form') as HTMLFormElement // Not strictly needed if not manipulating it

  deleteButtons.forEach((button) => {
    button.addEventListener('click', () => {
      const id = button.getAttribute('data-id')
      const deleteIdInput = document.getElementById('delete-id') as HTMLInputElement
      if (deleteIdInput) {
        deleteIdInput.value = id || ''
      }
      deleteModal?.showModal()
    })
  })

  // Close Modal buttons
  const closeModalButtons = document.querySelectorAll('.close-modal')
  closeModalButtons.forEach((button) => {
    button.addEventListener('click', () => {
      const modal = button.closest('dialog')
      modal?.close()
    })
  })

  // Close modals when clicking outside
  const dialogs = document.querySelectorAll('dialog')
  dialogs.forEach((dialog) => {
    dialog.addEventListener('click', (e) => {
      const rect = dialog.getBoundingClientRect()
      const isInDialog =
        rect.top <= e.clientY &&
        e.clientY <= rect.top + rect.height &&
        rect.left <= e.clientX &&
        e.clientX <= rect.left + rect.width
      if (!isInDialog) {
        dialog.close()
      }
    })
  })
</script>