'use client';

import { useState } from 'react';
import { ProScheduler } from 'calendarkit-prov2';
import type { CalendarEvent, ViewType } from 'calendarkit-prov2';
import 'calendarkit-prov2/calendarkit.css';

export default function MyCalendar() {
  const [events, setEvents] = useState<CalendarEvent[]>([]);
  const [view, setView] = useState<ViewType>('week');
  const [date, setDate] = useState(new Date());

  return (
    <div className="h-[700px] border rounded-lg overflow-hidden">
      <ProScheduler
        events={events}
        view={view}
        onViewChange={setView}
        date={date}
        onDateChange={setDate}
        onEventCreate={(e) =>
          setEvents((prev) => [...prev, { ...e, id: crypto.randomUUID() } as CalendarEvent])
        }
        onEventUpdate={(updated) =>
          setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)))
        }
        onEventDelete={(id) =>
          setEvents((prev) => prev.filter((e) => e.id !== id))
        }
      />
    </div>
  );
}

'use client';

import { useState, useMemo } from 'react';
import {
  ProScheduler,
  DATE_FNS_LOCALES,
} from 'calendarkit-prov2';
import type { CalendarEvent, ViewType, Resource, EventType, LanguageCode } from 'calendarkit-prov2';
import 'calendarkit-prov2/calendarkit.css';
import { addDays, addHours, startOfWeek } from 'date-fns';

// --- Sample data helpers ---
const weekStart = startOfWeek(new Date());

const sampleEvents: CalendarEvent[] = [
  {
    id: '1',
    title: 'Team Standup',
    start: addHours(addDays(weekStart, 1), 9),
    end:   addHours(addDays(weekStart, 1), 9.5),
    calendarId: 'work',
    color: '#3b82f6',
    resourceId: 'room-a',
  },
  {
    id: '2',
    title: 'Client Call',
    start: addHours(addDays(weekStart, 2), 11),
    end:   addHours(addDays(weekStart, 2), 12),
    calendarId: 'work',
    color: '#3b82f6',
  },
  {
    id: '3',
    title: 'Gym',
    start: addHours(addDays(weekStart, 3), 18),
    end:   addHours(addDays(weekStart, 3), 19),
    calendarId: 'personal',
    color: '#10b981',
    recurrence: { freq: 'WEEKLY', interval: 1 },
  },
];

const calendars = [
  { id: 'work',     label: 'Work',     color: '#3b82f6', active: true },
  { id: 'personal', label: 'Personal', color: '#10b981', active: true },
];

const resources: Resource[] = [
  { id: 'room-a', label: 'Conference Room A', color: '#3b82f6' },
  { id: 'room-b', label: 'Conference Room B', color: '#10b981' },
];

const eventTypes: EventType[] = [
  { id: 'meeting', label: 'Meeting',    color: '#3b82f6' },
  { id: 'focus',   label: 'Focus Time', color: '#8b5cf6' },
];

// --- Main component ---
export default function FullCalendar() {
  const [events,    setEvents]   = useState<CalendarEvent[]>(sampleEvents);
  const [view,      setView]     = useState<ViewType>('week');
  const [date,      setDate]     = useState(new Date());
  const [isDark,    setIsDark]   = useState(false);
  const [language,  setLanguage] = useState<LanguageCode>('en');
  const [timezone,  setTimezone] = useState('Europe/Istanbul');
  const [cals,      setCals]     = useState(calendars);

  // Filter events by active calendars
  const filteredEvents = useMemo(() => {
    const activeIds = cals.filter((c) => c.active).map((c) => c.id);
    return events.filter((e) => !e.calendarId || activeIds.includes(e.calendarId));
  }, [events, cals]);

  const handleCreate = (e: Partial<CalendarEvent>) => {
    setEvents((prev) => [
      ...prev,
      { ...e, id: crypto.randomUUID(), title: e.title ?? 'New Event' } as CalendarEvent,
    ]);
  };

  const handleUpdate = (updated: CalendarEvent) =>
    setEvents((prev) => prev.map((e) => (e.id === updated.id ? updated : e)));

  const handleDelete = (id: string) =>
    setEvents((prev) => prev.filter((e) => e.id !== id));

  const handleDrop = (event: CalendarEvent, start: Date, end: Date) =>
    setEvents((prev) => prev.map((e) => (e.id === event.id ? { ...e, start, end } : e)));

  return (
    <div className={isDark ? 'dark' : ''}>
      <div className="h-[750px] border rounded-xl overflow-hidden">
        <ProScheduler
          events={filteredEvents}
          view={view}
          onViewChange={setView}
          date={date}
          onDateChange={setDate}

          // Event handlers
          onEventCreate={handleCreate}
          onEventUpdate={handleUpdate}
          onEventDelete={handleDelete}
          onEventDrop={handleDrop}

          // Multi-calendar
          calendars={cals}
          onCalendarToggle={(id, active) =>
            setCals((prev) => prev.map((c) => (c.id === id ? { ...c, active } : c)))
          }

          // Resources
          resources={resources}
          eventTypes={eventTypes}

          // i18n
          language={language}
          onLanguageChange={setLanguage}
          locale={DATE_FNS_LOCALES[language]}

          // Timezone
          timezone={timezone}
          onTimezoneChange={setTimezone}

          // Theme
          isDarkMode={isDark}
          onThemeToggle={() => setIsDark(!isDark)}

          // Scroll to 9 AM on mount
          initialScrollHour={9}
        />
      </div>
    </div>
  );
}