---
import AdminLayout from '../../../layouts/AdminLayout.astro';
import Icon from '../../../components/ui/Icon.astro';
import { getDict, localizedPath } from '../../../lib/i18n';
import { getAdminEvents, titleFor } from '../../../lib/db';
import { formatDateTime } from '../../../lib/format';

const dict = getDict('ua');
const events = await getAdminEvents(Astro.locals.supabase);
---

<AdminLayout title={`${dict.admin.eventsTitle} — Devodytyji`} current="events">
  <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
    <div>
      <h1>{dict.admin.eventsTitle}</h1>
      <p class="text-muted">{events.length} record(s)</p>
    </div>
    <a class="btn btn--primary" href="/admin/events/new">{dict.admin.newEvent}</a>
  </div>

  {events.length === 0 ? (
    <div class="empty-state mt-6">
      <div class="empty-state__icon"><Icon name="tent" size={40} /></div>
      <p>{dict.admin.emptyEvents}</p>
    </div>
  ) : (
    <div class="table-wrap mt-6">
      <table class="table">
        <thead>
          <tr>
            <th>{dict.admin.eventTitleUa}</th>
            <th>{dict.admin.slug}</th>
            <th>{dict.admin.startsAt}</th>
            <th>{dict.admin.status}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {events.map((event) => {
            const isPublished = event.status === 'published';
            return (
              <tr>
                <td>
                  <strong>{titleFor('ua', event) || '—'}</strong>
                  {event.venue_name && <div class="text-muted">{event.venue_name}</div>}
                </td>
                <td>
                  <code>{event.slug}</code>
                </td>
                <td>{formatDateTime('ua', event.starts_at)}</td>
                <td>
                  <span class={`badge ${isPublished ? 'badge--published' : 'badge--draft'}`}>
                    {isPublished ? dict.common.published : dict.common.draft}
                  </span>
                </td>
                <td>
                  <div class="row-actions">
                    <a class="btn btn--sm btn--outline" href={`/admin/events/${event.id}/edit`}>
                      {dict.common.edit}
                    </a>
                    {isPublished && (
                      <a class="btn btn--sm btn--ghost" href={localizedPath('ua', `/events/${event.slug}`)} target="_blank">
                        {dict.admin.viewOnSite}
                      </a>
                    )}
                    <form
                      method="post"
                      action={`/api/admin/events/${event.id}`}
                      onsubmit="return confirm('Confirm publish toggle?')"
                    >
                      <input type="hidden" name="_action" value={isPublished ? 'unpublish' : 'publish'} />
                      <button class="btn btn--sm btn--outline" type="submit">
                        {isPublished ? dict.admin.unpublish : dict.admin.publish}
                      </button>
                    </form>
                    <form
                      method="post"
                      action={`/api/admin/events/${event.id}`}
                      onsubmit={`return confirm(${JSON.stringify(dict.admin.deleteEventConfirm)})`}
                    >
                      <input type="hidden" name="_action" value="delete" />
                      <button class="btn btn--sm btn--danger" type="submit">
                        {dict.common.delete}
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  )}
</AdminLayout>