'use client';

import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { SectionTitle, IssueCardItem } from '../components';
import type { TodayIssueItem, TodayIssueSettings } from '../types';

// 라벨 → 설정키 매핑
const LABEL_TO_SETTING_KEY: Record<string, keyof TodayIssueSettings> = {
  '수주': 'orders',
  '채권 추심': 'debtCollection',
  '안전 재고': 'safetyStock',
  '세금 신고': 'taxReport',
  '신규 업체 등록': 'newVendor',
  '연차': 'annualLeave',
  '지각': 'lateness',
  '결근': 'absence',
  '발주': 'purchase',
  '결재 요청': 'approvalRequest',
};

interface StatusBoardSectionProps {
  items: TodayIssueItem[];
  itemSettings?: TodayIssueSettings;
}

export function StatusBoardSection({ items, itemSettings }: StatusBoardSectionProps) {
  const router = useRouter();

  const handleItemClick = (path: string) => {
    router.push(path);
  };

  // 설정에 따라 항목 필터링
  const filteredItems = itemSettings
    ? items.filter((item) => {
        const settingKey = LABEL_TO_SETTING_KEY[item.label];
        return settingKey ? itemSettings[settingKey] : true;
      })
    : items;

  // 아이템 개수에 따른 동적 그리드 클래스 (xs: 344px Galaxy Fold 지원)
  const getGridColsClass = () => {
    const count = filteredItems.length;
    if (count <= 1) return 'grid-cols-1';
    if (count === 2) return 'grid-cols-1 xs:grid-cols-2';
    if (count === 3) return 'grid-cols-1 xs:grid-cols-2 md:grid-cols-3';
    // 4개 이상: 최대 4열, 넘치면 아래로
    return 'grid-cols-1 xs:grid-cols-2 md:grid-cols-4';
  };

  return (
    <Card>
      <CardContent className="p-6">
        <SectionTitle title="현황판" badge="warning" />

        <div className={`grid ${getGridColsClass()} gap-3`}>
          {filteredItems.map((item) => (
            <IssueCardItem
              key={item.id}
              label={item.label}
              count={item.count}
              subLabel={item.subLabel}
              isHighlighted={item.isHighlighted}
              onClick={() => handleItemClick(item.path)}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  );
}