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, Pencil, Trash2, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
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 TabOption,
  type ListParams,
} from '@/components/templates/UniversalListPage';
import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
import { toast } from 'sonner';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-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 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}`);
  }, [router]);

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

  const handleEdit = useCallback((process: Process) => {
    router.push(`/ko/master-data/process-management/${process.id}/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]);

  // ===== 탭 옵션 =====
  const tabs: TabOption[] = useMemo(() => [
    { value: 'all', label: '전체', count: stats.total },
    { value: '사용중', label: '사용중', count: stats.active },
    { value: '미사용', label: '미사용', count: stats.inactive },
  ], [stats]);

  // ===== 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-[100px]' },
        { key: 'processName', label: '공정명', className: 'min-w-[250px]' },
        { key: 'processType', label: '구분', className: 'w-[80px] text-center' },
        { key: 'department', label: '담당부서', className: 'w-[120px]' },
        { key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
        { key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
        { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
      ],

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

      // 탭 필터 함수
      tabFilter: (item: Process, activeTab: string) => {
        if (activeTab === 'all') return true;
        return item.status === activeTab;
      },

      // 검색 필터 함수
      searchFilter: (item: Process, searchValue: string) => {
        const search = searchValue.toLowerCase();
        return (
          item.processCode.toLowerCase().includes(search) ||
          item.processName.toLowerCase().includes(search) ||
          item.department.toLowerCase().includes(search)
        );
      },

      // 탭 설정
      tabs,
      defaultTab: 'all',

      // 검색
      searchPlaceholder: '공정코드, 공정명, 담당부서 검색',

      // 헤더 액션
      headerActions: () => (
        <Button onClick={handleCreate} className="gap-2">
          <Plus className="h-4 w-4" />
          공정 등록
        </Button>
      ),

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

      // 테이블 행 렌더링
      renderTableRow: (
        process: Process,
        index: number,
        globalIndex: number,
        handlers: SelectionHandlers & RowClickHandlers<Process>
      ) => {
        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>
              <div>
                <div className="font-medium">{process.processName}</div>
                {process.description && (
                  <div className="text-sm text-muted-foreground">{process.description}</div>
                )}
              </div>
            </TableCell>
            <TableCell className="text-center">
              <Badge variant="secondary">{process.processType}</Badge>
            </TableCell>
            <TableCell>{process.department}</TableCell>
            <TableCell className="text-center">
              {process.classificationRules.length > 0 ? (
                <Badge variant="outline">{process.classificationRules.length}</Badge>
              ) : (
                <span className="text-muted-foreground">-</span>
              )}
            </TableCell>
            <TableCell className="text-center">{process.requiredWorkers}명</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>
            <TableCell className="text-center">
              {handlers.isSelected && (
                <div className="flex items-center justify-center gap-2">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEdit(process);
                    }}
                  >
                    <Pencil className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-destructive hover:text-destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteClick(process.id);
                    }}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              )}
            </TableCell>
          </TableRow>
        );
      },

      // 모바일 카드 렌더링
      renderMobileCard: (
        process: Process,
        index: number,
        globalIndex: number,
        handlers: SelectionHandlers & RowClickHandlers<Process>
      ) => {
        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.processType} />
                <InfoField label="담당부서" value={process.department} />
                <InfoField label="인원" value={`${process.requiredWorkers}명`} />
                <InfoField
                  label="분류규칙"
                  value={process.classificationRules.length > 0 ? `${process.classificationRules.length}개` : '-'}
                />
                {process.description && (
                  <div className="col-span-2">
                    <InfoField label="설명" value={process.description} />
                  </div>
                )}
              </div>
            }
            actions={
              handlers.isSelected ? (
                <div className="flex gap-2">
                  <Button
                    variant="default"
                    size="default"
                    className="flex-1 h-11"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEdit(process);
                    }}
                  >
                    <Pencil className="h-4 w-4 mr-2" />
                    수정
                  </Button>
                  <Button
                    variant="outline"
                    size="default"
                    className="flex-1 h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteClick(process.id);
                    }}
                  >
                    <Trash2 className="h-4 w-4 mr-2" />
                    삭제
                  </Button>
                </div>
              ) : undefined
            }
          />
        );
      },
    }),
    [tabs, handleCreate, handleRowClick, handleEdit, handleDeleteClick, handleToggleStatus, handleBulkDelete]
  );

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

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>공정 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              선택한 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isLoading}>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDeleteConfirm}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={isLoading}
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
                  삭제 중...
                </>
              ) : (
                '삭제'
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}