"use client";
import { useState } from "react";
import { PageCalendar, type CalendarEvent, type CalendarFilter } from "@g4rcez/components";

const d = (daysOffset: number, hour = 10): Date => {
  const today = new Date();
  const date = new Date(today);
  date.setDate(date.getDate() + daysOffset);
  date.setHours(hour, 0, 0, 0);
  return date;
};

// Three events at the exact same time to test overlap rendering
const mockEvents: CalendarEvent[] = [
  { id: "overlap-1", title: "Architecture sync", date: d(0, 10), filterId: "meeting" },
  { id: "overlap-2", title: "API design review", date: d(0, 10), filterId: "review" },
  { id: "overlap-3", title: "Hotfix deploy",     date: d(0, 10), filterId: "deploy" },
  { id: "overlap-4", title: "Urgent interview",  date: d(0, 10), filterId: "interview" },
  // ...100+ more events spread across -30 to +46 days
];

const mockFilters: CalendarFilter[] = [
  { id: "meeting",   label: "Meetings",   theme: "info",      enabled: true },
  { id: "review",    label: "Reviews",    theme: "secondary", enabled: true },
  { id: "deploy",    label: "Deploys",    theme: "warn",      enabled: true },
  { id: "interview", label: "Interviews", theme: "success",   enabled: true },
];

function PageCalendarDemo() {
  const [filters, setFilters] = useState(mockFilters);
  return (
    <PageCalendar
      filters={filters}
      events={mockEvents}
      onChangeFilters={setFilters}
      onAddEvent={() => console.log("Add event")}
      onSlotClick={(d) => console.log("Slot clicked:", d)}
      onEventClick={(e) => console.log("Event clicked:", e)}
    />
  );
}