"use client";

import { useState } from "react";
import { MonthCalendar, type CalendarMarker } from "./MonthCalendar";
import { BookingCard } from "./BookingCard";
import { resolveDisplayStatus } from "./BookingStatusBadge";
import type { MeetingSetting } from "@/payload-types";
import type { CustomerBooking } from "@/lib/booking/customerView";
import { berlinDateKey } from "@/lib/calendar/timezone";
import { getBookingMeetingStatus } from "@/lib/booking/meetingAccess";

export function PersonalCalendar({ bookings, meetingSettings }: { bookings: CustomerBooking[]; meetingSettings: MeetingSetting }) {
  const [selectedDay, setSelectedDay] = useState<Date | null>(null);

  const markers: CalendarMarker[] = bookings.map((b) => ({
    date: new Date(b.date),
    status: resolveDisplayStatus(b.status, b.endTime) as CalendarMarker["status"],
  }));

  const selectedBookings = selectedDay
    ? bookings.filter((b) => berlinDateKey(new Date(b.date)) === berlinDateKey(selectedDay))
    : [];

  return (
    <div className="grid gap-8 lg:grid-cols-[minmax(0,360px)_1fr]">
      <MonthCalendar markers={markers} onSelectDay={setSelectedDay} selectedDay={selectedDay} />
      <div>
        {selectedDay ? (
          selectedBookings.length > 0 ? (
            <div className="space-y-4">
              {selectedBookings.map((b) => (
                <BookingCard key={b.id} booking={b} meetingStatus={getBookingMeetingStatus(b, meetingSettings)} />
              ))}
            </div>
          ) : (
            <p className="text-sm text-anouma-plum/70">An diesem Tag ist kein Termin von dir eingetragen.</p>
          )
        ) : (
          <p className="text-sm text-anouma-plum/70">Wähle einen Tag mit Markierung, um deine Termine zu sehen.</p>
        )}
      </div>
    </div>
  );
}