// frontend/components/calendar/WeekView.tsx — 주 뷰 (시간 그리드)
"use client";
import type { MouseEvent } from "react";
import { HOURS, topOf } from "@/lib/calendar/time";
import type { CalEvent, Calendar, FocusBlock as FocusBlockT } from "@/lib/calendar/types";
import { EvBlock } from "./EvBlock";
import { FocusBlock } from "./FocusBlock";

export function WeekView({
  events,
  focusBlocks,
  calMap,
  week,
  weekdays,
  today,
  onOpen,
}: {
  events: CalEvent[];
  focusBlocks: FocusBlockT[];
  calMap: Record<string, Calendar>;
  week: number[];
  weekdays: string[];
  today: number;
  onOpen: (ev: CalEvent, e: MouseEvent) => void;
}) {
  const nowTop = topOf("11:10"); // 오늘 6/8 가상 현재시각
  return (
    <div className="cpanel">
      <div className="wk-head">
        <div className="wk-corner" />
        {week.map((day, i) => (
          <div
            key={day}
            className={
              "wk-dh" + (day === today ? " today" : "") + (i === 0 || i === 6 ? " wknd" : "")
            }
          >
            <div className="wd">{weekdays[i]}</div>
            <div className="dn">{day}</div>
          </div>
        ))}
      </div>
      <div className="wk-body" role="region" aria-label="주간 시간표" tabIndex={0}>
        <div className="wk-times">
          {HOURS.map((h) => (
            <div key={h} className="wk-thour">
              <span>{h}:00</span>
            </div>
          ))}
        </div>
        {week.map((day, i) => {
          const dayEvents = events.filter((e) => e.day === day);
          const dayFocus = focusBlocks.filter((b) => b.day === day);
          return (
            <div key={day} className={"wk-col" + (i === 0 || i === 6 ? " wknd" : "")}>
              {HOURS.map((h) => (
                <div key={h} className="wk-hr" />
              ))}
              {day === today && <div className="wk-now" style={{ top: nowTop + "px" }} />}
              {dayFocus.map((b) => (
                <FocusBlock key={b.id} b={b} />
              ))}
              {dayEvents.map((ev) => (
                <EvBlock key={ev.id} ev={ev} cal={calMap[ev.cal]} onClick={onOpen} />
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}
