'use client';

import { useRouter } from 'next/navigation';
import { LayoutGrid } from 'lucide-react';
import { IssueCardItem, CollapsibleDashboardCard } 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;

  return (
    <CollapsibleDashboardCard
      icon={<LayoutGrid style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="현황판"
      subtitle="주요 현황 요약"
    >
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 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>
    </CollapsibleDashboardCard>
  );
}