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

'use client';

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 { IntegratedListTemplateV2, TabOption, TableColumn } from '@/components/templates/IntegratedListTemplateV2';
import { MobileCard } from '@/components/molecules/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';

// 테이블 컬럼 정의
const tableColumns: TableColumn[] = [
  { 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' },
];

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

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

  // 상태
  const [processes, setProcesses] = useState<Process[]>(initialData);
  const [stats, setStats] = useState(initialStats ?? { total: 0, active: 0, inactive: 0 });
  const [activeTab, setActiveTab] = useState('all');
  const [searchValue, setSearchValue] = useState('');
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
  const itemsPerPage = 20;

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

      if (listResult.success && listResult.data) {
        setProcesses(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 filteredProcesses = useMemo(() => {
    return processes.filter((process) => {
      // 탭 필터
      if (activeTab !== 'all' && process.status !== activeTab) {
        return false;
      }
      // 검색 필터
      if (searchValue) {
        const search = searchValue.toLowerCase();
        return (
          process.processCode.toLowerCase().includes(search) ||
          process.processName.toLowerCase().includes(search) ||
          process.department.toLowerCase().includes(search)
        );
      }
      return true;
    });
  }, [processes, activeTab, searchValue]);

  // 페이지네이션
  const totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
  const paginatedData = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;
    return filteredProcesses.slice(start, start + itemsPerPage);
  }, [filteredProcesses, currentPage, itemsPerPage]);

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

  // 핸들러
  const handleTabChange = useCallback((value: string) => {
    setActiveTab(value);
    setCurrentPage(1);
  }, []);

  const handleSearchChange = useCallback((value: string) => {
    setSearchValue(value);
    setCurrentPage(1);
  }, []);

  const handleToggleSelection = useCallback((id: string) => {
    setSelectedItems((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(id)) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  }, []);

  const handleToggleSelectAll = useCallback(() => {
    if (selectedItems.size === paginatedData.length) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(paginatedData.map((p) => p.id)));
    }
  }, [selectedItems.size, paginatedData]);

  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(
    (e: React.MouseEvent, processId: string) => {
      e.stopPropagation();
      router.push(`/ko/master-data/process-management/${processId}/edit`);
    },
    [router]
  );

  const handleDeleteClick = useCallback((e: React.MouseEvent, processId: string) => {
    e.stopPropagation();
    setDeleteTargetId(processId);
    setDeleteDialogOpen(true);
  }, []);

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

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

  const handleBulkDelete = useCallback(async () => {
    if (selectedItems.size === 0) {
      toast.warning('삭제할 항목을 선택해주세요.');
      return;
    }

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

  const handleToggleStatus = useCallback(
    async (e: React.MouseEvent, processId: string) => {
      e.stopPropagation();
      setIsLoading(true);
      try {
        const result = await toggleProcessActive(processId);
        if (result.success && result.data) {
          toast.success('상태가 변경되었습니다.');
          setProcesses((prev) => prev.map((p) => (p.id === processId ? result.data! : p)));
          // 통계 업데이트
          const oldProcess = processes.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);
      }
    },
    [processes]
  );

  // 테이블 행 렌더링
  const renderTableRow = useCallback(
    (process: Process, index: number, globalIndex: number) => {
      const isSelected = selectedItems.has(process.id);

      return (
        <TableRow key={process.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleRowClick(process)}>
          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
            <Checkbox checked={isSelected} onCheckedChange={() => handleToggleSelection(process.id)} />
          </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={(e) => handleToggleStatus(e, process.id)}
            >
              {process.status}
            </Badge>
          </TableCell>
          <TableCell className="text-center">
            {isSelected && (
              <div className="flex items-center justify-center gap-2">
                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => handleEdit(e, process.id)}>
                  <Pencil className="h-4 w-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 text-destructive hover:text-destructive"
                  onClick={(e) => handleDeleteClick(e, process.id)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            )}
          </TableCell>
        </TableRow>
      );
    },
    [selectedItems, handleToggleSelection, handleRowClick, handleEdit, handleDeleteClick, handleToggleStatus]
  );

  // 모바일 카드 렌더링
  const renderMobileCard = useCallback(
    (process: Process, index: number, globalIndex: number, isSelected: boolean, onToggle: () => void) => {
      return (
        <MobileCard
          title={process.processName}
          subtitle={process.processCode}
          description={process.description}
          badge={process.status}
          badgeVariant={process.status === '사용중' ? 'default' : 'secondary'}
          isSelected={isSelected}
          onToggle={onToggle}
          onClick={() => handleRowClick(process)}
          details={[
            { label: '구분', value: process.processType },
            { label: '담당부서', value: process.department },
            { label: '인원', value: `${process.requiredWorkers}명` },
          ]}
        />
      );
    },
    [handleRowClick]
  );

  return (
    <>
      <IntegratedListTemplateV2
        title="공정 목록"
        icon={Wrench}
        headerActions={
          <div className="flex justify-end w-full gap-2">
            {selectedItems.size > 0 && (
              <Button variant="destructive" onClick={handleBulkDelete} disabled={isLoading}>
                {isLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
                선택 삭제 ({selectedItems.size})
              </Button>
            )}
            <Button onClick={handleCreate} className="gap-2">
              <Plus className="h-4 w-4" />
              공정 등록
            </Button>
          </div>
        }
        searchValue={searchValue}
        onSearchChange={handleSearchChange}
        searchPlaceholder="공정코드, 공정명, 담당부서 검색"
        tabs={tabOptions}
        activeTab={activeTab}
        onTabChange={handleTabChange}
        tableColumns={tableColumns}
        data={paginatedData}
        allData={filteredProcesses}
        selectedItems={selectedItems}
        onToggleSelection={handleToggleSelection}
        onToggleSelectAll={handleToggleSelectAll}
        getItemId={(item) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        pagination={{
          currentPage,
          totalPages,
          totalItems: filteredProcesses.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

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