"use client"

import { useMemo } from "react"
import type { CalendarEvent } from "@/lib/types"
import { getRoomColor } from "@/lib/room-theme"
import {
  addDays,
  isSameDay,
  parseDateTime,
  WEEKDAY_LABELS,
} from "@/lib/date-utils"

const HOUR_HEIGHT = 64 // px per hour

interface WeekViewProps {
  weekStart: Date
  events: CalendarEvent[]
  showRoomColors: boolean
  onEventClick: (event: CalendarEvent) => void
}

interface PositionedEvent {
  event: CalendarEvent
  start: Date
  end: Date
  top: number
  height: number
  lane: number
  lanes: number
}

// Assign overlapping events to side-by-side lanes within a single day.
function layoutDayEvents(
  events: { event: CalendarEvent; start: Date; end: Date }[],
  hoursStart: number,
): PositionedEvent[] {
  const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime())
  const result: PositionedEvent[] = []
  let cluster: typeof sorted = []
  let clusterEnd = 0

  const flush = () => {
    if (cluster.length === 0) return
    // Greedy lane assignment within the cluster.
    const laneEnds: number[] = []
    const withLanes = cluster.map((item) => {
      let lane = laneEnds.findIndex((end) => end <= item.start.getTime())
      if (lane === -1) {
        lane = laneEnds.length
        laneEnds.push(item.end.getTime())
      } else {
        laneEnds[lane] = item.end.getTime()
      }
      return { ...item, lane }
    })
    const lanes = laneEnds.length
    for (const item of withLanes) {
      const startHrs = item.start.getHours() + item.start.getMinutes() / 60
      const endHrs = item.end.getHours() + item.end.getMinutes() / 60
      const safeEnd = Math.max(endHrs, startHrs + 0.5)
      result.push({
        event: item.event,
        start: item.start,
        end: item.end,
        top: (startHrs - hoursStart) * HOUR_HEIGHT,
        height: (safeEnd - startHrs) * HOUR_HEIGHT,
        lane: item.lane,
        lanes,
      })
    }
    cluster = []
    clusterEnd = 0
  }

  for (const item of sorted) {
    if (cluster.length === 0 || item.start.getTime() < clusterEnd) {
      cluster.push(item)
      clusterEnd = Math.max(clusterEnd, item.end.getTime())
    } else {
      flush()
      cluster.push(item)
      clusterEnd = item.end.getTime()
    }
  }
  flush()
  return result
}

export function WeekView({ weekStart, events, showRoomColors, onEventClick }: WeekViewProps) {
  const days = useMemo(
    () => Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)),
    [weekStart],
  )

  // Determine visible hour range from events (clamped to a sensible default).
  const { hoursStart, hoursEnd } = useMemo(() => {
    let min = 8
    let max = 18
    for (const e of events) {
      const s = parseDateTime(e.start_time)
      const en = parseDateTime(e.end_time)
      if (!isNaN(s.getTime())) min = Math.min(min, s.getHours())
      if (!isNaN(en.getTime())) {
        const endHr = en.getMinutes() > 0 ? en.getHours() + 1 : en.getHours()
        max = Math.max(max, endHr)
      }
    }
    return { hoursStart: Math.max(0, min), hoursEnd: Math.min(24, Math.max(max, min + 6)) }
  }, [events])

  const timeSlots = useMemo(
    () => Array.from({ length: hoursEnd - hoursStart }, (_, i) => hoursStart + i),
    [hoursStart, hoursEnd],
  )

  const positionedByDay = useMemo(() => {
    return days.map((day) => {
      const dayEvents = events
        .map((event) => ({
          event,
          start: parseDateTime(event.start_time),
          end: parseDateTime(event.end_time),
        }))
        .filter((x) => !isNaN(x.start.getTime()) && isSameDay(x.start, day))
      return layoutDayEvents(dayEvents, hoursStart)
    })
  }, [days, events, hoursStart])

  const today = new Date()
  const gridHeight = (hoursEnd - hoursStart) * HOUR_HEIGHT

  const formatHour = (h: number) => {
    if (h === 0) return "12 AM"
    if (h === 12) return "12 PM"
    return h > 12 ? `${h - 12} PM` : `${h} AM`
  }

  return (
    <div className="h-full overflow-auto rounded-xl border border-white/20 bg-white/20 shadow-xl backdrop-blur-lg">
      {/* Week Header */}
      <div className="sticky top-0 z-10 grid grid-cols-[4rem_repeat(7,1fr)] border-b border-white/20 bg-white/10 backdrop-blur-lg">
        <div className="p-2" />
        {days.map((date, i) => {
          const isToday = isSameDay(date, today)
          return (
            <div key={i} className="border-l border-white/20 p-2 text-center">
              <div className="text-xs font-medium text-white/70">{WEEKDAY_LABELS[i]}</div>
              <div
                className={`mx-auto mt-1 flex h-8 w-8 items-center justify-center text-lg font-medium text-white ${
                  isToday ? "rounded-full bg-blue-500" : ""
                }`}
              >
                {date.getDate()}
              </div>
            </div>
          )
        })}
      </div>

      {/* Time grid */}
      <div className="grid grid-cols-[4rem_repeat(7,1fr)]">
        {/* Time labels */}
        <div>
          {timeSlots.map((hour) => (
            <div
              key={hour}
              className="border-b border-white/10 pr-2 text-right text-xs text-white/70"
              style={{ height: HOUR_HEIGHT }}
            >
              {formatHour(hour)}
            </div>
          ))}
        </div>

        {/* Day columns */}
        {days.map((day, dayIndex) => (
          <div
            key={dayIndex}
            className="relative border-l border-white/20"
            style={{ height: gridHeight }}
          >
            {timeSlots.map((hour) => (
              <div
                key={hour}
                className="border-b border-white/10"
                style={{ height: HOUR_HEIGHT }}
              />
            ))}

            {positionedByDay[dayIndex].map((pe, i) => {
              const color = showRoomColors ? getRoomColor(pe.event.room_id) : { bg: "bg-blue-500" }
              const cancelled = pe.event.status === "cancelled"
              const tentative = pe.event.status === "draft" || pe.event.status === "proposed"
              const widthPct = 100 / pe.lanes
              return (
                <button
                  key={pe.event.id + "-" + i}
                  onClick={() => onEventClick(pe.event)}
                  className={`absolute overflow-hidden rounded-md p-1.5 text-left text-xs text-white shadow-md transition-all duration-150 ease-in-out hover:z-20 hover:-translate-y-0.5 hover:shadow-lg ${color.bg} ${
                    cancelled ? "opacity-50 line-through" : ""
                  } ${tentative ? "border border-dashed border-white/70" : ""}`}
                  style={{
                    top: pe.top,
                    height: pe.height,
                    left: `calc(${pe.lane * widthPct}% + 2px)`,
                    width: `calc(${widthPct}% - 4px)`,
                  }}
                >
                  <div className="truncate font-medium">{pe.event.title}</div>
                  {pe.height > 34 && (
                    <div className="mt-0.5 truncate text-[10px] opacity-80">
                      {pe.start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                      {" – "}
                      {pe.end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                    </div>
                  )}
                </button>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )
}