'use client';

import { cn } from '@/components/ui/utils';
import type { DayBadge } from './types';
import { BADGE_COLORS } from './types';
import { format } from 'date-fns';

interface DayCellProps {
  date: Date;
  isCurrentMonth: boolean;
  isToday: boolean;
  isSelected: boolean;
  isSaturday: boolean;
  isSunday: boolean;
  isHoliday?: boolean;
  holidayName?: string | null;
  isPast: boolean;
  badge?: DayBadge;
  onClick: (date: Date) => void;
}

/**
 * 일자 셀 컴포넌트
 * - 날짜 숫자 표시
 * - 뱃지 숫자 표시 (빨간 원)
 * - 클릭 이벤트 처리
 * - 선택/오늘 상태 스타일
 */
export function DayCell({
  date,
  isCurrentMonth,
  isToday,
  isSelected,
  isSaturday,
  isSunday,
  isHoliday = false,
  holidayName,
  isPast,
  badge,
  onClick,
}: DayCellProps) {
  const dayNumber = format(date, 'd');
  const badgeColor = badge?.color || 'red';
  const isRedDay = isSunday || isHoliday; // 일요일 또는 공휴일 → 빨간색
  const isBlueDay = isSaturday && !isHoliday; // 토요일(공휴일 아닌 경우) → 파란색

  return (
    <button
      type="button"
      onClick={() => onClick(date)}
      title={holidayName || undefined}
      className={cn(
        'relative w-full h-8 flex items-center justify-center',
        'text-sm font-medium transition-colors rounded-md',
        'hover:bg-primary/10',
        // 현재 월 여부
        isCurrentMonth ? 'text-foreground' : 'text-muted-foreground/40',
        // 지난 일자 - 더 명확한 회색 (현재 월에서만)
        isPast && isCurrentMonth && !isToday && !isSelected && 'text-gray-400',
        // 일요일/공휴일 색상 (지난 일자가 아닌 경우만) → 빨간색
        isRedDay && isCurrentMonth && !isPast && 'text-red-500',
        // 토요일 색상 (지난 일자가 아닌 경우만) → 파란색
        isBlueDay && isCurrentMonth && !isPast && 'text-blue-500',
        // 지난 일요일/공휴일 - 연한 색상
        isRedDay && isCurrentMonth && isPast && !isToday && !isSelected && 'text-red-300',
        // 지난 토요일 - 연한 파란색
        isBlueDay && isCurrentMonth && isPast && !isToday && !isSelected && 'text-blue-300',
        // 오늘 - 굵은 글씨 (외곽선은 부모 셀에 적용) - 보라색
        isToday && !isSelected && 'font-bold text-purple-600',
        // 선택됨 - 배경색 하이라이트 - 보라색
        isSelected && 'bg-purple-500 text-white hover:bg-purple-600'
      )}
    >
      {/* 날짜 숫자 */}
      <span>{dayNumber}</span>

      {/* 뱃지 */}
      {badge && badge.count > 0 && (
        <span
          className={cn(
            'absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1',
            'flex items-center justify-center',
            'text-[10px] font-bold rounded-full',
            BADGE_COLORS[badgeColor] || BADGE_COLORS.red
          )}
        >
          {badge.count > 99 ? '99+' : badge.count}
        </span>
      )}
    </button>
  );
}
