'use client';
import { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useTranslation } from '@/lib/i18n';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

interface Task {
  id: string;
  title: string;
  scheduled_at: string | null;
  due_at: string | null;
  status: string;
  group_name: string;
  group_color: string;
}

const LOCALE_MAP: Record<string, string> = {
  cs: 'cs',
  he: 'he',
  ru: 'ru',
  ua: 'uk',
};

export default function CalendarPage() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const { t, locale } = useTranslation();

  useEffect(() => {
    fetch(`${API_URL}/api/v1/tasks?limit=100`)
      .then(r => r.json())
      .then(d => setTasks(d.data || []));
  }, []);

  const events = tasks
    .filter((t): t is Task & { scheduled_at: string } | Task & { due_at: string } =>
      t.scheduled_at !== null || t.due_at !== null
    )
    .map(t => ({
      id: t.id,
      title: t.title,
      start: (t.scheduled_at || t.due_at) as string,
      end: (t.due_at || t.scheduled_at) as string,
      backgroundColor: t.group_color || '#3B82F6',
      borderColor: t.group_color || '#3B82F6',
      extendedProps: { status: t.status, group: t.group_name }
    }));

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">{t('calendar.title')}</h1>
      <div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow">
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          initialView="timeGridWeek"
          headerToolbar={{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
          }}
          events={events}
          editable={true}
          selectable={true}
          locale={LOCALE_MAP[locale] || 'cs'}
          direction={locale === 'he' ? 'rtl' : 'ltr'}
          firstDay={1}
          height="auto"
          slotMinTime="06:00:00"
          slotMaxTime="23:00:00"
        />
      </div>
    </div>
  );
}