---
import { Building2, CalendarDays, Mic2 } from 'lucide-react';

import { VISITORS, type VisitorEntry } from '@/data/visitors';
import DefaultLayout from '@/layouts/DefaultLayout.astro';

const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const formatDate = (date: string) => {
  const [year, month, day] = date.split('-');
  return `${Number(day)} ${monthNames[Number(month) - 1]} ${year}`;
};

const byYear = VISITORS.reduce<Record<string, VisitorEntry[]>>((groups, visitor) => {
  const year = visitor.date.slice(0, 4);
  groups[year] = [...(groups[year] ?? []), visitor];
  return groups;
}, {});

const yearGroups = Object.entries(byYear).sort(
  ([yearA], [yearB]) => Number(yearB) - Number(yearA),
);
---

<DefaultLayout
  title="Visitors"
  description="Visitors, seminar speakers, and invited talks hosted by CSE at IIT Gandhinagar"
>
  <section class="from-primary/5 border-b bg-gradient-to-b to-transparent py-16 md:py-20">
    <div class="container">
      <p class="text-secondary text-sm font-medium uppercase tracking-wider">
        People
      </p>
      <div class="mt-3 max-w-3xl">
        <h1 class="text-3xl font-semibold md:text-5xl">
          Visitors
        </h1>
        <p class="text-muted-foreground mt-4 max-w-2xl text-lg leading-relaxed">
          Recent seminar visitors and invited speakers hosted by the
          department.
        </p>
      </div>
    </div>
  </section>

  <section class="section-padding">
    <div class="container">
      <div class="space-y-10">
        {
          yearGroups.map(([year, visitors]) => (
            <section class="scroll-mt-24">
              <div class="mb-4 flex flex-wrap items-end justify-between gap-3 border-b pb-3">
                <div>
                  <h3 class="text-xl font-semibold">{year}</h3>
                  <p class="text-muted-foreground mt-1 text-sm">
                    {visitors.length} {visitors.length === 1 ? 'visitor' : 'visitors'}
                  </p>
                </div>
              </div>

              <div class="overflow-hidden rounded-lg border bg-background shadow-sm">
                <div class="bg-muted/50 hidden grid-cols-[8rem_minmax(0,1fr)_minmax(0,1.35fr)] gap-5 border-b px-5 py-3 text-xs font-medium uppercase tracking-wide text-muted-foreground md:grid">
                  <div>Date</div>
                  <div>Visitor</div>
                  <div>Talk</div>
                </div>
                <div class="divide-y">
                  {visitors.map((visitor) => (
                    <article class="grid gap-4 px-5 py-5 md:grid-cols-[8rem_minmax(0,1fr)_minmax(0,1.35fr)] md:gap-5">
                      <div class="flex items-center gap-2 text-sm md:block">
                        <CalendarDays className="size-4 text-secondary md:mb-2" aria-hidden="true" />
                        <p class="font-medium">{formatDate(visitor.date)}</p>
                      </div>

                      <div>
                        <div class="flex items-start gap-2">
                          <Mic2 className="mt-0.5 size-4 shrink-0 text-secondary" aria-hidden="true" />
                          <div class="min-w-0">
                            <h4 class="font-semibold leading-snug">
                              {visitor.speaker}
                            </h4>
                            <p class="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
                              <Building2 className="size-3.5 shrink-0" aria-hidden="true" />
                              {visitor.affiliation}
                            </p>
                          </div>
                        </div>
                      </div>

                      <p class="text-muted-foreground leading-relaxed">
                        {visitor.title}
                      </p>
                    </article>
                  ))}
                </div>
              </div>
            </section>
          ))
        }
      </div>
    </div>
  </section>
</DefaultLayout>
