import { HubFocusTaskList } from './HubFocusTaskList';
import { ROUTINE_CATEGORIES } from '../../lib/routineCategories';
import type { RoutineCategoryFocus } from '../../hooks/useRoutineCategoryMilestones';

interface HubRoutineFocusPanelProps {
  activeIndex: number;
  onActiveIndexChange: (index: number) => void;
  categories: RoutineCategoryFocus[];
  onSelectMilestone?: (milestoneId: string) => void;
}

export function HubRoutineFocusPanel({
  activeIndex,
  onActiveIndexChange,
  categories,
  onSelectMilestone,
}: HubRoutineFocusPanelProps) {
  const safeIndex = Math.max(0, Math.min(activeIndex, ROUTINE_CATEGORIES.length - 1));
  const active = categories[safeIndex];

  return (
    <div className="hub-routine-focus">
      <div className="hub-focus-dots" role="tablist" aria-label="상시업무 대분류">
        {ROUTINE_CATEGORIES.map((label, index) => (
          <button
            key={label}
            type="button"
            role="tab"
            aria-selected={index === safeIndex}
            aria-label={label}
            title={label}
            className={`hub-focus-dot${index === safeIndex ? ' is-active' : ''}`}
            onClick={() => onActiveIndexChange(index)}
          />
        ))}
      </div>

      <div className="hub-routine-focus-body">
        <HubFocusTaskList
          milestones={active?.milestones ?? []}
          isLoading={!!active?.isLoading}
          categoryKey={ROUTINE_CATEGORIES[safeIndex]}
          onSelectMilestone={onSelectMilestone}
        />
      </div>
    </div>
  );
}
