"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { format } from "date-fns";
import { useCalendarContext } from "@/components/providers/CalendarProvider";
import type { PersonFilter } from "@/lib/types";
import { PERSON_COLORS } from "@/lib/types";

export default function CalendarHeader() {
  const {
    currentMonth,
    goToNextMonth,
    goToPrevMonth,
    goToToday,
    calendars,
    events,
    activeCalendarIds,
    toggleCalendar,
    activePersonFilters,
    togglePersonFilter,
  } = useCalendarContext();

  const people: PersonFilter[] = Array.from(
    new Set(events.flatMap((e) => e.people?.map((p) => p.person_name) ?? []))
  );

  return (
    <div className="flex flex-col gap-3 mb-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <h2 className="text-xl font-semibold">
            {format(currentMonth, "MMMM yyyy")}
          </h2>
          <div className="flex items-center gap-1">
            <button
              onClick={goToPrevMonth}
              className="p-1.5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <button
              onClick={goToToday}
              className="px-2.5 py-1 text-xs font-medium rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              Today
            </button>
            <button
              onClick={goToNextMonth}
              className="p-1.5 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-4 text-xs">
        {calendars.map((cal) => (
          <label key={cal.id} className="flex items-center gap-1.5 cursor-pointer">
            <input
              type="checkbox"
              checked={activeCalendarIds.has(cal.id)}
              onChange={() => toggleCalendar(cal.id)}
              className="rounded"
            />
            <span
              className="w-2.5 h-2.5 rounded-full"
              style={{ backgroundColor: cal.color }}
            />
            <span>{cal.name}</span>
          </label>
        ))}

        <span className="text-zinc-300 dark:text-zinc-600">|</span>

        {people.map((person) => (
          <label key={person} className="flex items-center gap-1.5 cursor-pointer">
            <input
              type="checkbox"
              checked={activePersonFilters.has(person)}
              onChange={() => togglePersonFilter(person)}
              className="rounded"
            />
            <span
              className="w-2.5 h-2.5 rounded-full"
              style={{ backgroundColor: PERSON_COLORS[person] }}
            />
            <span className="capitalize">{person}</span>
          </label>
        ))}
      </div>
    </div>
  );
}
