"use client";

import { getMonthDays, isSameDay, isToday } from "@/lib/calendar-utils";
import { cn } from "@/lib/utils";
import type { CalendarItem } from "@/hooks/use-events";
import { CheckSquare } from "lucide-react";

const WEEKDAYS = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];

interface MonthViewProps {
  year: number;
  month: number;
  items: CalendarItem[];
  onDayClick: (date: Date) => void;
  onEventClick: (item: CalendarItem) => void;
}

export function MonthView({
  year,
  month,
  items,
  onDayClick,
  onEventClick,
}: MonthViewProps) {
  const { days } = getMonthDays(year, month);

  function getItemsForDay(date: Date) {
    return items.filter((item) => isSameDay(item.start, date));
  }

  return (
    <div>
      {/* Weekday header */}
      <div className="grid grid-cols-7 border-b border-white/[0.05]">
        {WEEKDAYS.map((day) => (
          <div
            key={day}
            className="py-2.5 text-center text-[10px] font-semibold uppercase tracking-widest text-white/30"
          >
            {day}
          </div>
        ))}
      </div>

      {/* Day grid */}
      <div className="grid grid-cols-7">
        {days.map((date, i) => {
          const isCurrentMonth = date.getMonth() === month;
          const dayItems = getItemsForDay(date);
          const today = isToday(date);
          const visible = dayItems.slice(0, 3);
          const overflow = dayItems.length - 3;

          return (
            <div
              key={i}
              onClick={() => onDayClick(date)}
              className={cn(
                "min-h-[70px] cursor-pointer p-1 transition-colors border-r border-b border-white/[0.05] sm:min-h-[110px] sm:p-2",
                "hover:bg-white/[0.04]",
                !isCurrentMonth && "bg-white/[0.01]",
                // remove right border for last column
                (i + 1) % 7 === 0 && "border-r-0"
              )}
            >
              {/* Day number */}
              <span
                className={cn(
                  "inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold sm:h-6 sm:w-6 sm:text-[12px]",
                  today && "bg-violet-500 text-white",
                  !today && isCurrentMonth && "text-white/85",
                  !today && !isCurrentMonth && "text-white/20"
                )}
              >
                {date.getDate()}
              </span>

              {/* Events */}
              <div className="mt-1 space-y-0.5">
                {visible.map((item) => (
                  <button
                    key={item.id}
                    onClick={(e) => {
                      e.stopPropagation();
                      onEventClick(item);
                    }}
                    className="flex w-full items-center gap-1 truncate rounded-md px-1 py-0.5 text-[9px] font-medium transition-opacity hover:opacity-80 sm:px-1.5 sm:text-[11px]"
                    style={{
                      backgroundColor: (item.color || "#8b5cf6") + "20",
                      color: item.color || "#8b5cf6",
                    }}
                  >
                    {item.type === "task" && (
                      <CheckSquare className="h-2.5 w-2.5 shrink-0" />
                    )}
                    <span className="truncate">{item.title}</span>
                  </button>
                ))}
                {overflow > 0 && (
                  <span className="block px-1.5 text-[10px] text-white/25">
                    +{overflow} weitere
                  </span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}