"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export type CalendarViewMode = "month" | "week" | "day";

interface CalendarHeaderProps {
  currentDate: Date;
  viewMode: CalendarViewMode;
  onViewModeChange: (mode: CalendarViewMode) => void;
  onPrev: () => void;
  onNext: () => void;
  onToday: () => void;
}

export function CalendarHeader({
  currentDate,
  viewMode,
  onViewModeChange,
  onPrev,
  onNext,
  onToday,
}: CalendarHeaderProps) {
  const label = (() => {
    if (viewMode === "month") {
      return new Intl.DateTimeFormat("de-DE", {
        month: "long",
        year: "numeric",
      }).format(currentDate);
    }
    if (viewMode === "day") {
      return new Intl.DateTimeFormat("de-DE", {
        weekday: "short",
        day: "numeric",
        month: "short",
        year: "numeric",
      }).format(currentDate);
    }
    // week
    const weekStart = new Date(currentDate);
    const day = weekStart.getDay();
    const diff = day === 0 ? 6 : day - 1;
    weekStart.setDate(weekStart.getDate() - diff);
    const weekEnd = new Date(weekStart);
    weekEnd.setDate(weekEnd.getDate() + 6);

    const startMonth = new Intl.DateTimeFormat("de-DE", { month: "short" }).format(weekStart);
    const endMonth = new Intl.DateTimeFormat("de-DE", { month: "short" }).format(weekEnd);

    if (weekStart.getMonth() === weekEnd.getMonth()) {
      return `${startMonth} ${weekStart.getDate()} – ${weekEnd.getDate()}, ${weekEnd.getFullYear()}`;
    }
    return `${startMonth} ${weekStart.getDate()} – ${endMonth} ${weekEnd.getDate()}, ${weekEnd.getFullYear()}`;
  })();

  return (
    <div className="flex items-center justify-between gap-3 flex-wrap">
      <div className="flex items-center gap-2">
        <h2 className="text-[15px] font-semibold text-white/85 min-w-[180px]">{label}</h2>
        <div className="flex items-center gap-0.5">
          <button
            onClick={onPrev}
            className="flex h-8 w-8 items-center justify-center rounded-lg text-white/40 transition-all hover:bg-white/[0.04] hover:text-white/70"
          >
            <ChevronLeft className="h-4 w-4" />
          </button>
          <button
            onClick={onNext}
            className="flex h-8 w-8 items-center justify-center rounded-lg text-white/40 transition-all hover:bg-white/[0.04] hover:text-white/70"
          >
            <ChevronRight className="h-4 w-4" />
          </button>
        </div>
        <button
          onClick={onToday}
          className="rounded-lg border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-[12px] font-semibold text-white/40 transition-all hover:bg-white/[0.06] hover:text-white/65"
        >
          Heute
        </button>
      </div>

      <div className="flex items-center gap-1 rounded-xl border border-white/[0.08] bg-white/[0.03] p-1">
        {(["month", "week", "day"] as const).map((mode) => (
          <button
            key={mode}
            onClick={() => onViewModeChange(mode)}
            className={cn(
              "px-4 py-1.5 rounded-lg text-[12px] font-semibold transition-all",
              viewMode === mode
                ? "bg-white/[0.10] text-white shadow-sm"
                : "text-white/35 hover:text-white/65"
            )}
          >
            {mode === "month" ? "Monat" : mode === "week" ? "Woche" : "Tag"}
          </button>
        ))}
      </div>
    </div>
  );
}