sam-react-prod/src/components/process-management/ProcessListClient.tsx

'use client';

/**
 * 공정 목록 - UniversalListPage 마이그레이션
 *
 * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
 * - 클라이언트 사이드 필터링 (탭별, 검색)
 * - 상태 토글 기능
 * - 삭제 다이얼로그
 */

import { useState, useMemo, useCallback, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Wrench, Plus } from 'lucide-react';
import { TableCell, TableRow } from '@/components/ui/table';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import {
  UniversalListPage,
  type UniversalListConfig,
  type SelectionHandlers,
  type RowClickHandlers,
  type ListParams,
} from '@/components/templates/UniversalListPage';
import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
import { toast } from 'sonner';
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
import type { Process } from '@/types/process';
import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats } from './actions';

interface ProcessListClientProps {
  initialData?: Process[];
  initialStats?: { total: number; active: number; inactive: number };
}

export default function ProcessListClient({ initialData = [], initialStats }: ProcessListClientProps) {
  const router = useRouter();

  // ===== 상태 =====
  const [allProcesses, setAllProcesses] = useState<Process[]>(initialData);
  const [stats, setStats] = useState(initialStats ?? { total: 0, active: 0, inactive: 0 });
  const [isLoading, setIsLoading] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);

  // 날짜 범위 상태
  const [startDate, setStartDate] = useState('2025-01-01');
  const [endDate, setEndDate] = useState('2025-12-31');

  // 검색어 상태
  const [searchQuery, setSearchQuery] = useState('');

  // ===== 데이터 로드 =====
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      const [listResult, statsResult] = await Promise.all([
        getProcessList({ size: 1000 }),
        getProcessStats(),
      ]);

      if (listResult.success && listResult.data) {
        setAllProcesses(listResult.data.items);
      }
      if (statsResult.success && statsResult.data) {
        setStats({
          total: statsResult.data.total,
          active: statsResult.data.active,
          inactive: statsResult.data.inactive,
        });
      }
    } catch {
      toast.error('데이터 로드에 실패했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, []);

  // 초기 데이터가 없으면 로드
  useEffect(() => {
    if (initialData.length === 0) {
      loadData();
    }
  }, [initialData.length, loadData]);

  // ===== 핸들러 =====
  const handleRowClick = useCallback((process: Process) => {
    router.push(`/ko/master-data/process-management/${process.id}?mode=view`);
  }, [router]);

  const handleCreate = useCallback(() => {
    router.push('/ko/master-data/process-management?mode=new');
  }, [router]);

  const handleEdit = useCallback((process: Process) => {
    router.push(`/ko/master-data/process-management/${process.id}?mode=edit`);
  }, [router]);

  const handleDeleteClick = useCallback((processId: string) => {
    setDeleteTargetId(processId);
    setDeleteDialogOpen(true);
  }, []);

  const handleDeleteConfirm = useCallback(async () => {
    if (!deleteTargetId) return;

    setIsLoading(true);
    try {
      const result = await deleteProcess(deleteTargetId);
      if (result.success) {
        toast.success('공정이 삭제되었습니다.');
        const deletedProcess = allProcesses.find((p) => p.id === deleteTargetId);
        setAllProcesses((prev) => prev.filter((p) => p.id !== deleteTargetId));
        setStats((prev) => ({
          ...prev,
          total: prev.total - 1,
          active: prev.active - (deletedProcess?.status === '사용중' ? 1 : 0),
          inactive: prev.inactive - (deletedProcess?.status === '미사용' ? 1 : 0),
        }));
      } else {
        toast.error(result.error || '삭제에 실패했습니다.');
      }
    } catch {
      toast.error('삭제 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
      setDeleteDialogOpen(false);
      setDeleteTargetId(null);
    }
  }, [deleteTargetId, allProcesses]);

  const handleBulkDelete = useCallback(async (selectedIds: string[]) => {
    if (selectedIds.length === 0) {
      toast.warning('삭제할 항목을 선택해주세요.');
      return;
    }

    setIsLoading(true);
    try {
      const result = await deleteProcesses(selectedIds);
      if (result.success) {
        toast.success(`${result.deletedCount}개 항목이 삭제되었습니다.`);
        await loadData();
      } else {
        toast.error(result.error || '일괄 삭제에 실패했습니다.');
      }
    } catch {
      toast.error('일괄 삭제 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, [loadData]);

  const handleToggleStatus = useCallback(async (processId: string) => {
    setIsLoading(true);
    try {
      const result = await toggleProcessActive(processId);
      if (result.success && result.data) {
        toast.success('상태가 변경되었습니다.');
        setAllProcesses((prev) => prev.map((p) => (p.id === processId ? result.data! : p)));
        const oldProcess = allProcesses.find((p) => p.id === processId);
        if (oldProcess) {
          const wasActive = oldProcess.status === '사용중';
          setStats((prev) => ({
            ...prev,
            active: wasActive ? prev.active - 1 : prev.active + 1,
            inactive: wasActive ? prev.inactive + 1 : prev.inactive - 1,
          }));
        }
      } else {
        toast.error(result.error || '상태 변경에 실패했습니다.');
      }
    } catch {
      toast.error('상태 변경 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, [allProcesses]);

  // ===== UniversalListPage Config =====
  const config: UniversalListConfig<Process> = useMemo(
    () => ({
      // 페이지 기본 정보
      title: '공정 목록',
      icon: Wrench,
      basePath: '/master-data/process-management',

      // ID 추출
      idField: 'id',

      // API 액션
      actions: {
        getList: async (params?: ListParams) => {
          try {
            const [listResult, statsResult] = await Promise.all([
              getProcessList({ size: 1000 }),
              getProcessStats(),
            ]);

            if (listResult.success && listResult.data) {
              setAllProcesses(listResult.data.items);

              if (statsResult.success && statsResult.data) {
                setStats({
                  total: statsResult.data.total,
                  active: statsResult.data.active,
                  inactive: statsResult.data.inactive,
                });
              }

              return {
                success: true,
                data: listResult.data.items,
                totalCount: listResult.data.items.length,
                totalPages: 1,
              };
            }
            return { success: false, error: '데이터 로드에 실패했습니다.' };
          } catch {
            return { success: false, error: '서버 오류가 발생했습니다.' };
          }
        },
        deleteItem: async (id: string) => {
          const result = await deleteProcess(id);
          return { success: result.success, error: result.error };
        },
        deleteBulk: async (ids: string[]) => {
          const result = await deleteProcesses(ids);
          return { success: result.success, error: result.error };
        },
      },

      // 테이블 컬럼
      columns: [
        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
        { key: 'processCode', label: '공정번호', className: 'w-[120px]' },
        { key: 'processName', label: '공정명', className: 'min-w-[200px]' },
        { key: 'department', label: '담당부서', className: 'w-[120px]' },
        { key: 'steps', label: '단계', className: 'w-[80px] text-center' },
        { key: 'items', label: '품목', className: 'w-[80px] text-center' },
        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
      ],

      // 클라이언트 사이드 필터링
      clientSideFiltering: true,
      itemsPerPage: 20,

      // 검색창 (공통 컴포넌트에서 자동 생성)
      hideSearch: true,
      searchValue: searchQuery,
      onSearchChange: setSearchQuery,

      // 날짜 범위 선택기
      dateRangeSelector: {
        enabled: true,
        showPresets: true,
        startDate,
        endDate,
        onStartDateChange: setStartDate,
        onEndDateChange: setEndDate,
      },

      // 필터 설정 (상태 필터)
      filterConfig: [
        {
          key: 'status',
          label: '상태',
          type: 'single' as const,
          options: [
            { value: '사용중', label: '사용' },
            { value: '미사용', label: '미사용' },
          ],
          allOptionLabel: '전체',
        },
      ],
      initialFilters: { status: '' },

      // 커스텀 필터 함수 (상태 필터)
      customFilterFn: (items: Process[], filterValues: Record<string, string | string[]>) => {
        const statusFilter = filterValues.status as string;
        if (!statusFilter) return items;
        return items.filter(item => item.status === statusFilter);
      },

      // 검색 필터
      searchFilter: (item, searchValue) => {
        if (!searchValue || !searchValue.trim()) return true;
        const search = searchValue.toLowerCase().trim();
        return (
          (item.processCode || '').toLowerCase().includes(search) ||
          (item.processName || '').toLowerCase().includes(search) ||
          (item.department || '').toLowerCase().includes(search)
        );
      },

      // 등록 버튼 (공통 컴포넌트에서 오른쪽에 렌더링)
      createButton: {
        label: '공정 등록',
        onClick: handleCreate,
        icon: Plus,
      },

      // 일괄 삭제 핸들러
      onBulkDelete: handleBulkDelete,

      // 테이블 행 렌더링
      renderTableRow: (
        process: Process,
        index: number,
        globalIndex: number,
        handlers: SelectionHandlers & RowClickHandlers<Process>
      ) => {
        const itemCount = process.classificationRules
          .filter(r => r.registrationType === 'individual')
          .reduce((sum, r) => sum + (r.items?.length || 0), 0);
        return (
          <TableRow
            key={process.id}
            className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
            onClick={() => handleRowClick(process)}
          >
            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
              <Checkbox
                checked={handlers.isSelected}
                onCheckedChange={handlers.onToggle}
              />
            </TableCell>
            <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
            <TableCell className="font-medium">{process.processCode}</TableCell>
            <TableCell>{process.processName}</TableCell>
            <TableCell>{process.department}</TableCell>
            <TableCell className="text-center">{process.steps?.length ?? 0}</TableCell>
            <TableCell className="text-center">{itemCount > 0 ? itemCount : '-'}</TableCell>
            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
              <Badge
                variant={process.status === '사용중' ? 'default' : 'secondary'}
                className="cursor-pointer"
                onClick={() => handleToggleStatus(process.id)}
              >
                {process.status === '사용중' ? '사용' : '미사용'}
              </Badge>
            </TableCell>
          </TableRow>
        );
      },

      // 모바일 카드 렌더링
      renderMobileCard: (
        process: Process,
        index: number,
        globalIndex: number,
        handlers: SelectionHandlers & RowClickHandlers<Process>
      ) => {
        const itemCount = process.classificationRules
          .filter(r => r.registrationType === 'individual')
          .reduce((sum, r) => sum + (r.items?.length || 0), 0);
        return (
          <ListMobileCard
            key={process.id}
            id={process.id}
            isSelected={handlers.isSelected}
            onToggleSelection={handlers.onToggle}
            onClick={() => handleRowClick(process)}
            headerBadges={
              <>
                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
                <Badge variant="outline" className="text-xs font-mono">{process.processCode}</Badge>
              </>
            }
            title={process.processName}
            statusBadge={
              <Badge
                variant={process.status === '사용중' ? 'default' : 'secondary'}
                className="cursor-pointer"
                onClick={(e) => {
                  e.stopPropagation();
                  handleToggleStatus(process.id);
                }}
              >
                {process.status === '사용중' ? '사용' : '미사용'}
              </Badge>
            }
            infoGrid={
              <div className="grid grid-cols-2 gap-x-4 gap-y-3">
                <InfoField label="담당부서" value={process.department} />
                <InfoField label="단계" value={`${process.steps?.length ?? 0}개`} />
                <InfoField label="품목" value={itemCount > 0 ? `${itemCount}개` : '-'} />
              </div>
            }
          />
        );
      },
    }),
    [handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery]
  );

  return (
    <>
      <UniversalListPage config={config} initialData={allProcesses} onSearchChange={setSearchQuery} />

      {/* 삭제 확인 다이얼로그 */}
      <DeleteConfirmDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        description="선택한 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
        loading={isLoading}
        onConfirm={handleDeleteConfirm}
      />
    </>
  );
}