---
import Public from '../layouts/Public.astro';

interface ApiEvent {
  id: number;
  name: string;
  description: string;
  detail_link: string;
  price: number;
  is_online: boolean;
  is_deleted: boolean;
  location: string;
  start_date: string;
  end_date: string;
  created_at: string;
  updated_at: string;
}

let events: ApiEvent[] = [];
try {
  const res = await fetch('https://api.imphnen.dev/v1/landing/cms/events');
  const json = await res.json();
  events = (json.data || []).filter((e: ApiEvent) => !e.is_deleted);
} catch {
  events = [];
}

const sortedEvents = [...events].sort(
  (a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
);

function formatDate(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleDateString('id-ID', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
}

function formatTime(dateString: string) {
  const date = new Date(dateString);
  return date.toLocaleTimeString('id-ID', {
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'Asia/Jakarta',
  });
}

function getEventStatus(endDate: string) {
  const now = new Date();
  const end = new Date(endDate);
  return end > now ? 'upcoming' : 'past';
}
---

<Public title="Events - IMPHNEN">
  <section class="min-h-screen bg-background container py-10">
    {sortedEvents.length === 0 ? (
      <p class="text-center text-muted-foreground">
        Belum ada event tersedia.
      </p>
    ) : (
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {/* Featured event */}
        <div class="col-span-full">
          <div class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden bg-card">
            <div class="p-8 flex flex-col">
              <div class="flex items-center gap-2 mb-4">
                <span class="bg-primary/20 text-primary text-xs px-2.5 py-1 rounded-full">
                  Event Terbaru
                </span>
                <span
                  class:list={[
                    'px-2 py-1 rounded-full text-xs',
                    getEventStatus(sortedEvents[0].end_date) === 'upcoming'
                      ? 'bg-primary/20 text-primary'
                      : 'bg-muted text-muted-foreground',
                  ]}
                >
                  {getEventStatus(sortedEvents[0].end_date) === 'upcoming' ? 'Upcoming' : 'Selesai'}
                </span>
                <span
                  class:list={[
                    'px-2 py-1 rounded-full text-xs',
                    sortedEvents[0].is_online
                      ? 'bg-blue-100 text-blue-700'
                      : 'bg-green-100 text-green-700',
                  ]}
                >
                  {sortedEvents[0].is_online ? 'Online' : 'Onsite'}
                </span>
              </div>
              <h2 class="text-2xl font-bold mb-4 text-foreground">
                {sortedEvents[0].name}
              </h2>
              <div class="space-y-3 mb-6 text-sm text-muted-foreground">
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                  <span>{formatDate(sortedEvents[0].start_date)}</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                  <span>
                    {formatTime(sortedEvents[0].start_date)} - {formatTime(sortedEvents[0].end_date)} WIB
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                  <span>
                    {sortedEvents[0].is_online ? 'Online' : sortedEvents[0].location}
                  </span>
                </div>
                {sortedEvents[0].price > 0 && (
                  <div class="mt-1 font-medium">
                    Rp {sortedEvents[0].price.toLocaleString('id-ID')}
                  </div>
                )}
              </div>
              <p class="text-muted-foreground mb-6 line-clamp-4">
                {sortedEvents[0].description}
              </p>
              <a
                href={sortedEvents[0].detail_link}
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center rounded-lg border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors mt-auto w-full md:w-fit"
              >
                Lihat Detail
              </a>
            </div>
          </div>
        </div>

        {/* Other events */}
        {sortedEvents.slice(1).map((event) => (
          <div class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 bg-card">
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <span
                  class:list={[
                    'px-2 py-1 rounded-full text-xs',
                    getEventStatus(event.end_date) === 'upcoming'
                      ? 'bg-primary/20 text-primary'
                      : 'bg-muted text-muted-foreground',
                  ]}
                >
                  {getEventStatus(event.end_date) === 'upcoming' ? 'Upcoming' : 'Selesai'}
                </span>
                <span
                  class:list={[
                    'px-2 py-1 rounded-full text-xs',
                    event.is_online
                      ? 'bg-blue-100 text-blue-700'
                      : 'bg-green-100 text-green-700',
                  ]}
                >
                  {event.is_online ? 'Online' : 'Onsite'}
                </span>
              </div>
              <h3 class="text-lg font-semibold mb-3 text-foreground">
                {event.name}
              </h3>
              <div class="space-y-2 mb-4 text-sm text-muted-foreground">
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                  <span>{formatDate(event.start_date)}</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                  <span>{event.is_online ? 'Online' : event.location}</span>
                </div>
                {event.price > 0 && (
                  <div class="font-medium">
                    Rp {event.price.toLocaleString('id-ID')}
                  </div>
                )}
              </div>
              <p class="text-muted-foreground text-sm mb-4 line-clamp-3">
                {event.description}
              </p>
              <a
                href={event.detail_link}
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-center rounded-lg border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors w-full"
              >
                Lihat Detail
              </a>
            </div>
          </div>
        ))}
      </div>
    )}
  </section>
</Public>
