ERP-node/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx

"use client";

import React, { useMemo } from "react";
import { cn } from "@/lib/utils";
import { Resource, ScheduleItem, ZoomLevel, TimelineSchedulerConfig } from "../types";
import { ScheduleBar } from "./ScheduleBar";

interface ResourceRowProps {
  /** 리소스 */
  resource: Resource;
  /** 해당 리소스의 스케줄 목록 */
  schedules: ScheduleItem[];
  /** 시작 날짜 */
  startDate: Date;
  /** 종료 날짜 */
  endDate: Date;
  /** 줌 레벨 */
  zoomLevel: ZoomLevel;
  /** 행 높이 */
  rowHeight: number;
  /** 셀 너비 */
  cellWidth: number;
  /** 리소스 컬럼 너비 */
  resourceColumnWidth: number;
  /** 설정 */
  config: TimelineSchedulerConfig;
  /** 스케줄 클릭 */
  onScheduleClick?: (schedule: ScheduleItem) => void;
  /** 빈 셀 클릭 */
  onCellClick?: (resourceId: string, date: Date) => void;
  /** 드래그 시작 */
  onDragStart?: (schedule: ScheduleItem, e: React.MouseEvent) => void;
  /** 드래그 종료 */
  onDragEnd?: () => void;
  /** 리사이즈 시작 */
  onResizeStart?: (schedule: ScheduleItem, direction: "start" | "end", e: React.MouseEvent) => void;
  /** 리사이즈 종료 */
  onResizeEnd?: () => void;
}

/**
 * 날짜 차이 계산 (일수)
 */
const getDaysDiff = (start: Date, end: Date): number => {
  const startTime = new Date(start).setHours(0, 0, 0, 0);
  const endTime = new Date(end).setHours(0, 0, 0, 0);
  return Math.round((endTime - startTime) / (1000 * 60 * 60 * 24));
};

/**
 * 날짜 범위 내의 셀 개수 계산
 */
const getCellCount = (startDate: Date, endDate: Date): number => {
  return getDaysDiff(startDate, endDate) + 1;
};

export function ResourceRow({
  resource,
  schedules,
  startDate,
  endDate,
  zoomLevel,
  rowHeight,
  cellWidth,
  resourceColumnWidth,
  config,
  onScheduleClick,
  onCellClick,
  onDragStart,
  onDragEnd,
  onResizeStart,
  onResizeEnd,
}: ResourceRowProps) {
  // 총 셀 개수
  const totalCells = useMemo(() => getCellCount(startDate, endDate), [startDate, endDate]);

  // 총 그리드 너비
  const gridWidth = totalCells * cellWidth;

  // 오늘 날짜
  const today = useMemo(() => {
    const d = new Date();
    d.setHours(0, 0, 0, 0);
    return d;
  }, []);

  // 스케줄 바 위치 계산
  const schedulePositions = useMemo(() => {
    return schedules.map((schedule) => {
      const scheduleStart = new Date(schedule.startDate);
      const scheduleEnd = new Date(schedule.endDate);
      scheduleStart.setHours(0, 0, 0, 0);
      scheduleEnd.setHours(0, 0, 0, 0);

      // 시작 위치 계산
      const startOffset = getDaysDiff(startDate, scheduleStart);
      const left = Math.max(0, startOffset * cellWidth);

      // 너비 계산
      const durationDays = getDaysDiff(scheduleStart, scheduleEnd) + 1;
      const visibleStartOffset = Math.max(0, startOffset);
      const visibleEndOffset = Math.min(
        totalCells,
        startOffset + durationDays
      );
      const width = Math.max(cellWidth, (visibleEndOffset - visibleStartOffset) * cellWidth);

      return {
        schedule,
        position: {
          left: resourceColumnWidth + left,
          top: 0,
          width,
          height: rowHeight,
        },
      };
    });
  }, [schedules, startDate, cellWidth, resourceColumnWidth, rowHeight, totalCells]);

  // 그리드 셀 클릭 핸들러
  const handleGridClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!onCellClick) return;

    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const cellIndex = Math.floor(x / cellWidth);

    const clickedDate = new Date(startDate);
    clickedDate.setDate(clickedDate.getDate() + cellIndex);

    onCellClick(resource.id, clickedDate);
  };

  return (
    <div
      className="flex border-b hover:bg-muted/20"
      style={{ height: rowHeight }}
    >
      {/* 리소스 컬럼 */}
      <div
        className="flex-shrink-0 border-r bg-muted/30 flex items-center px-3 sticky left-0 z-10"
        style={{ width: resourceColumnWidth }}
      >
        <div className="truncate">
          <div className="font-medium text-sm truncate">{resource.name}</div>
          {resource.group && (
            <div className="text-xs text-muted-foreground truncate">
              {resource.group}
            </div>
          )}
        </div>
      </div>

      {/* 타임라인 그리드 */}
      <div
        className="relative flex-1"
        style={{ width: gridWidth }}
        onClick={handleGridClick}
      >
        {/* 배경 그리드 */}
        <div className="absolute inset-0 flex">
          {Array.from({ length: totalCells }).map((_, idx) => {
            const cellDate = new Date(startDate);
            cellDate.setDate(cellDate.getDate() + idx);
            const isWeekend = cellDate.getDay() === 0 || cellDate.getDay() === 6;
            const isToday = cellDate.getTime() === today.getTime();
            const isMonthStart = cellDate.getDate() === 1;

            return (
              <div
                key={idx}
                className={cn(
                  "border-r h-full",
                  isWeekend && "bg-muted/20",
                  isToday && "bg-primary/5",
                  isMonthStart && "border-l-2 border-l-primary/20"
                )}
                style={{ width: cellWidth }}
              />
            );
          })}
        </div>

        {/* 스케줄 바들 */}
        {schedulePositions.map(({ schedule, position }) => (
          <ScheduleBar
            key={schedule.id}
            schedule={schedule}
            position={{
              ...position,
              left: position.left - resourceColumnWidth, // 상대 위치
            }}
            config={config}
            draggable={config.draggable}
            resizable={config.resizable}
            onClick={() => onScheduleClick?.(schedule)}
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
            onResizeStart={onResizeStart}
            onResizeEnd={onResizeEnd}
          />
        ))}
      </div>
    </div>
  );
}