"use client";

import { useState } from "react";
import { format } from "date-fns";
import { Plus } from "lucide-react";
import { useCalendarContext } from "@/components/providers/CalendarProvider";
import type { CalendarEvent } from "@/lib/types";
import EventModal from "./EventModal";

export default function DayPanel() {
  const { selectedDate, events, activeCalendarIds } = useCalendarContext();
  const [modalOpen, setModalOpen] = useState(false);
  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);

  if (!selectedDate) return null;

  const dayStr = format(selectedDate, "yyyy-MM-dd");
  const dayEvents = events
    .filter((e) => activeCalendarIds.has(e.calendar_id))
    .filter((e) => {
      const startDate = format(new Date(e.start_time), "yyyy-MM-dd");
      const endDate = format(new Date(e.end_time), "yyyy-MM-dd");
      return dayStr >= startDate && dayStr <= endDate;
    })
    .sort((a, b) => a.start_time.localeCompare(b.start_time));

  return (
    <div>
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-semibold">
          {format(selectedDate, "EEEE, MMMM d")}
        </h3>
        <button
          onClick={() => { setEditingEvent(null); setModalOpen(true); }}
          className="p-1 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800"
        >
          <Plus className="w-4 h-4" />
        </button>
      </div>
      {dayEvents.length === 0 ? (
        <p className="text-xs text-zinc-500">No events</p>
      ) : (
        <div className="flex flex-col gap-2">
          {dayEvents.map((event) => (
            <div
              key={event.id}
              onClick={() => { setEditingEvent(event); setModalOpen(true); }}
              className="p-2 rounded-md border border-zinc-200 dark:border-zinc-700 text-sm cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
            >
              <div className="font-medium">{event.title}</div>
              {!event.all_day && (
                <div className="text-xs text-zinc-500 mt-0.5">
                  {format(new Date(event.start_time), "h:mm a")} —{" "}
                  {format(new Date(event.end_time), "h:mm a")}
                </div>
              )}
              {event.all_day === 1 && (
                <div className="text-xs text-zinc-500 mt-0.5">All day</div>
              )}
              {event.location && (
                <div className="text-xs text-zinc-500 mt-0.5">{event.location}</div>
              )}
              {event.people.length > 0 && (
                <div className="text-xs text-zinc-500 mt-1">
                  {event.people.map((p) => p.person_name).join(", ")}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      <EventModal
        open={modalOpen}
        onClose={() => { setModalOpen(false); setEditingEvent(null); }}
        initialDate={selectedDate}
        editEvent={editingEvent ?? undefined}
      />
    </div>
  );
}
