sam-react-prod/src/components/business/juil/contract/ContractListClient.tsx

'use client';

import { useState, useMemo, useCallback, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { FileText, Clock, CheckCircle, Pencil, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { TableCell, TableRow } from '@/components/ui/table';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { MultiSelectCombobox, MultiSelectOption } from '@/components/ui/multi-select-combobox';
import { IntegratedListTemplateV2, TableColumn, StatCard } from '@/components/templates/IntegratedListTemplateV2';
import { MobileCard } from '@/components/molecules/MobileCard';
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
import { toast } from 'sonner';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import type { Contract, ContractStats } from './types';
import {
  CONTRACT_STATUS_OPTIONS,
  CONTRACT_SORT_OPTIONS,
  CONTRACT_STATUS_STYLES,
  CONTRACT_STATUS_LABELS,
} from './types';
import { getContractList, getContractStats, deleteContract, deleteContracts } from './actions';

// 테이블 컬럼 정의
// 순서: 체크박스, 번호, 계약번호, 거래처, 현장명, 계약담당자, 공사PM, 총 개소, 계약금액, 계약기간, 상태, 작업
const tableColumns: TableColumn[] = [
  { key: 'no', label: '번호', className: 'w-[60px] text-center' },
  { key: 'contractCode', label: '계약번호', className: 'w-[120px]' },
  { key: 'partnerName', label: '거래처', className: 'w-[100px]' },
  { key: 'projectName', label: '현장명', className: 'min-w-[150px]' },
  { key: 'contractManager', label: '계약담당자', className: 'w-[100px] text-center' },
  { key: 'constructionPM', label: '공사PM', className: 'w-[80px] text-center' },
  { key: 'totalLocations', label: '총 개소', className: 'w-[80px] text-center' },
  { key: 'contractAmount', label: '계약금액', className: 'w-[120px] text-right' },
  { key: 'contractPeriod', label: '계약기간', className: 'w-[180px] text-center' },
  { key: 'status', label: '상태', className: 'w-[80px] text-center' },
  { key: 'actions', label: '작업', className: 'w-[80px] text-center' },
];

// 목업 거래처 목록
const MOCK_PARTNERS: MultiSelectOption[] = [
  { value: '1', label: '통신공사' },
  { value: '2', label: '야사건설' },
  { value: '3', label: '여의건설' },
];

// 목업 계약담당자 목록
const MOCK_CONTRACT_MANAGERS: MultiSelectOption[] = [
  { value: 'hong', label: '홍길동' },
  { value: 'kim', label: '김철수' },
  { value: 'lee', label: '이영희' },
];

// 목업 공사PM 목록
const MOCK_CONSTRUCTION_PMS: MultiSelectOption[] = [
  { value: 'kim', label: '김PM' },
  { value: 'lee', label: '이PM' },
  { value: 'park', label: '박PM' },
];

// 금액 포맷팅
function formatAmount(amount: number): string {
  return new Intl.NumberFormat('ko-KR').format(amount);
}

// 날짜 포맷팅
function formatDate(dateStr: string | null): string {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  return date.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/\. /g, '-').replace('.', '');
}

// 계약기간 포맷팅
function formatPeriod(startDate: string | null, endDate: string | null): string {
  const start = formatDate(startDate);
  const end = formatDate(endDate);
  if (start === '-' && end === '-') return '-';
  return `${start} ~ ${end}`;
}

interface ContractListClientProps {
  initialData?: Contract[];
  initialStats?: ContractStats;
}

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

  // 상태
  const [contracts, setContracts] = useState<Contract[]>(initialData);
  const [stats, setStats] = useState<ContractStats | null>(initialStats || null);
  const [searchValue, setSearchValue] = useState('');
  const [partnerFilters, setPartnerFilters] = useState<string[]>([]);
  const [contractManagerFilters, setContractManagerFilters] = useState<string[]>([]);
  const [constructionPMFilters, setConstructionPMFilters] = useState<string[]>([]);
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [sortBy, setSortBy] = useState<string>('contractDateDesc');
  const [startDate, setStartDate] = useState<string>('');
  const [endDate, setEndDate] = useState<string>('');
  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 [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState(false);
  const [activeStatTab, setActiveStatTab] = useState<'all' | 'pending' | 'completed'>('all');
  const itemsPerPage = 20;

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

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

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

  // 필터링된 데이터
  const filteredContracts = useMemo(() => {
    return contracts.filter((contract) => {
      // 상태 탭 필터
      if (activeStatTab === 'pending' && contract.status !== 'pending') return false;
      if (activeStatTab === 'completed' && contract.status !== 'completed') return false;

      // 거래처 필터
      if (partnerFilters.length > 0) {
        if (!partnerFilters.includes(contract.partnerId)) return false;
      }

      // 계약담당자 필터
      if (contractManagerFilters.length > 0) {
        if (!contractManagerFilters.includes(contract.contractManagerId)) return false;
      }

      // 공사PM 필터
      if (constructionPMFilters.length > 0) {
        if (!constructionPMFilters.includes(contract.constructionPMId || '')) return false;
      }

      // 상태 필터
      if (statusFilter !== 'all' && contract.status !== statusFilter) return false;

      // 검색 필터
      if (searchValue) {
        const search = searchValue.toLowerCase();
        return (
          contract.projectName.toLowerCase().includes(search) ||
          contract.contractCode.toLowerCase().includes(search) ||
          contract.partnerName.toLowerCase().includes(search)
        );
      }
      return true;
    });
  }, [contracts, activeStatTab, partnerFilters, contractManagerFilters, constructionPMFilters, statusFilter, searchValue]);

  // 정렬
  const sortedContracts = useMemo(() => {
    const sorted = [...filteredContracts];
    switch (sortBy) {
      case 'contractDateDesc':
        sorted.sort((a, b) => {
          if (!a.contractStartDate) return 1;
          if (!b.contractStartDate) return -1;
          return new Date(b.contractStartDate).getTime() - new Date(a.contractStartDate).getTime();
        });
        break;
      case 'contractDateAsc':
        sorted.sort((a, b) => {
          if (!a.contractStartDate) return 1;
          if (!b.contractStartDate) return -1;
          return new Date(a.contractStartDate).getTime() - new Date(b.contractStartDate).getTime();
        });
        break;
      case 'partnerNameAsc':
        sorted.sort((a, b) => a.partnerName.localeCompare(b.partnerName, 'ko'));
        break;
      case 'partnerNameDesc':
        sorted.sort((a, b) => b.partnerName.localeCompare(a.partnerName, 'ko'));
        break;
      case 'projectNameAsc':
        sorted.sort((a, b) => a.projectName.localeCompare(b.projectName, 'ko'));
        break;
      case 'projectNameDesc':
        sorted.sort((a, b) => b.projectName.localeCompare(a.projectName, 'ko'));
        break;
      case 'amountDesc':
        sorted.sort((a, b) => b.contractAmount - a.contractAmount);
        break;
      case 'amountAsc':
        sorted.sort((a, b) => a.contractAmount - b.contractAmount);
        break;
    }
    return sorted;
  }, [filteredContracts, sortBy]);

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

  // 핸들러
  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((c) => c.id)));
    }
  }, [selectedItems.size, paginatedData]);

  const handleRowClick = useCallback(
    (contract: Contract) => {
      router.push(`/ko/juil/project/contract/${contract.id}`);
    },
    [router]
  );

  const handleEdit = useCallback(
    (e: React.MouseEvent, contractId: string) => {
      e.stopPropagation();
      router.push(`/ko/juil/project/contract/${contractId}/edit`);
    },
    [router]
  );

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

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

    setIsLoading(true);
    try {
      const result = await deleteContract(deleteTargetId);
      if (result.success) {
        toast.success('계약이 삭제되었습니다.');
        setContracts((prev) => prev.filter((c) => c.id !== deleteTargetId));
        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]);

  const handleBulkDeleteClick = useCallback(() => {
    if (selectedItems.size === 0) {
      toast.warning('삭제할 항목을 선택해주세요.');
      return;
    }
    setBulkDeleteDialogOpen(true);
  }, [selectedItems.size]);

  const handleBulkDeleteConfirm = useCallback(async () => {
    if (selectedItems.size === 0) return;

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

  // 테이블 행 렌더링
  // 순서: 체크박스, 번호, 계약번호, 거래처, 현장명, 계약담당자, 공사PM, 총 개소, 계약금액, 계약기간, 상태, 작업
  const renderTableRow = useCallback(
    (contract: Contract, index: number, globalIndex: number) => {
      const isSelected = selectedItems.has(contract.id);

      return (
        <TableRow
          key={contract.id}
          className="cursor-pointer hover:bg-muted/50"
          onClick={() => handleRowClick(contract)}
        >
          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
            <Checkbox
              checked={isSelected}
              onCheckedChange={() => handleToggleSelection(contract.id)}
            />
          </TableCell>
          <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
          <TableCell>{contract.contractCode}</TableCell>
          <TableCell>{contract.partnerName}</TableCell>
          <TableCell>{contract.projectName}</TableCell>
          <TableCell className="text-center">{contract.contractManagerName}</TableCell>
          <TableCell className="text-center">{contract.constructionPMName || '-'}</TableCell>
          <TableCell className="text-center">{contract.totalLocations}</TableCell>
          <TableCell className="text-right">{formatAmount(contract.contractAmount)}원</TableCell>
          <TableCell className="text-center">
            {formatPeriod(contract.contractStartDate, contract.contractEndDate)}
          </TableCell>
          <TableCell className="text-center">
            <span className={CONTRACT_STATUS_STYLES[contract.status]}>
              {CONTRACT_STATUS_LABELS[contract.status]}
            </span>
          </TableCell>
          <TableCell className="text-center">
            {isSelected && (
              <div className="flex items-center justify-center gap-1">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8"
                  onClick={(e) => handleEdit(e, contract.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, contract.id)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            )}
          </TableCell>
        </TableRow>
      );
    },
    [selectedItems, handleToggleSelection, handleRowClick, handleEdit, handleDeleteClick]
  );

  // 모바일 카드 렌더링
  const renderMobileCard = useCallback(
    (contract: Contract, index: number, globalIndex: number, isSelected: boolean, onToggle: () => void) => {
      return (
        <MobileCard
          title={contract.projectName}
          subtitle={contract.contractCode}
          badge={CONTRACT_STATUS_LABELS[contract.status]}
          badgeVariant="secondary"
          isSelected={isSelected}
          onToggle={onToggle}
          onClick={() => handleRowClick(contract)}
          details={[
            { label: '거래처', value: contract.partnerName },
            { label: '총 개소', value: `${contract.totalLocations}개` },
            { label: '계약금액', value: `${formatAmount(contract.contractAmount)}원` },
            { label: '계약담당자', value: contract.contractManagerName },
            { label: '공사PM', value: contract.constructionPMName || '-' },
          ]}
        />
      );
    },
    [handleRowClick]
  );

  // 헤더 액션 (날짜 필터만)
  const headerActions = (
    <DateRangeSelector
      startDate={startDate}
      endDate={endDate}
      onStartDateChange={setStartDate}
      onEndDateChange={setEndDate}
    />
  );

  // Stats 카드 데이터 (전체 계약, 계약대기, 계약완료)
  const statsCardsData: StatCard[] = [
    {
      label: '전체 계약',
      value: stats?.total ?? 0,
      icon: FileText,
      iconColor: 'text-blue-600',
      onClick: () => setActiveStatTab('all'),
      isActive: activeStatTab === 'all',
    },
    {
      label: '계약대기',
      value: stats?.pending ?? 0,
      icon: Clock,
      iconColor: 'text-orange-500',
      onClick: () => setActiveStatTab('pending'),
      isActive: activeStatTab === 'pending',
    },
    {
      label: '계약완료',
      value: stats?.completed ?? 0,
      icon: CheckCircle,
      iconColor: 'text-green-600',
      onClick: () => setActiveStatTab('completed'),
      isActive: activeStatTab === 'completed',
    },
  ];

  // 테이블 헤더 액션 (총 건수 + 필터들)
  const tableHeaderActions = (
    <div className="flex items-center gap-2 flex-wrap">
      <span className="text-sm text-muted-foreground whitespace-nowrap">
        총 {sortedContracts.length}건
      </span>

      {/* 거래처 필터 */}
      <MultiSelectCombobox
        options={MOCK_PARTNERS}
        value={partnerFilters}
        onChange={setPartnerFilters}
        placeholder="거래처"
        searchPlaceholder="거래처 검색..."
        className="w-[120px]"
      />

      {/* 계약담당자 필터 */}
      <MultiSelectCombobox
        options={MOCK_CONTRACT_MANAGERS}
        value={contractManagerFilters}
        onChange={setContractManagerFilters}
        placeholder="계약담당자"
        searchPlaceholder="계약담당자 검색..."
        className="w-[130px]"
      />

      {/* 공사PM 필터 */}
      <MultiSelectCombobox
        options={MOCK_CONSTRUCTION_PMS}
        value={constructionPMFilters}
        onChange={setConstructionPMFilters}
        placeholder="공사PM"
        searchPlaceholder="공사PM 검색..."
        className="w-[120px]"
      />

      {/* 상태 필터 */}
      <Select value={statusFilter} onValueChange={setStatusFilter}>
        <SelectTrigger className="w-[100px]">
          <SelectValue placeholder="상태" />
        </SelectTrigger>
        <SelectContent>
          {CONTRACT_STATUS_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {/* 정렬 */}
      <Select value={sortBy} onValueChange={setSortBy}>
        <SelectTrigger className="w-[160px]">
          <SelectValue placeholder="최신순 (계약일)" />
        </SelectTrigger>
        <SelectContent>
          {CONTRACT_SORT_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );

  return (
    <>
      <IntegratedListTemplateV2
        title="계약관리"
        description="계약 정보를 관리합니다"
        icon={FileText}
        headerActions={headerActions}
        stats={statsCardsData}
        tableHeaderActions={tableHeaderActions}
        searchValue={searchValue}
        onSearchChange={handleSearchChange}
        searchPlaceholder="계약번호, 거래처, 현장명 검색"
        tableColumns={tableColumns}
        data={paginatedData}
        allData={sortedContracts}
        getItemId={(item) => item.id}
        renderTableRow={renderTableRow}
        renderMobileCard={renderMobileCard}
        selectedItems={selectedItems}
        onToggleSelection={handleToggleSelection}
        onToggleSelectAll={handleToggleSelectAll}
        onBulkDelete={handleBulkDeleteClick}
        pagination={{
          currentPage,
          totalPages,
          totalItems: sortedContracts.length,
          itemsPerPage,
          onPageChange: setCurrentPage,
        }}
      />

      {/* 단일 삭제 다이얼로그 */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>계약 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              선택한 계약을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleDeleteConfirm}>삭제</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 일괄 삭제 다이얼로그 */}
      <AlertDialog open={bulkDeleteDialogOpen} onOpenChange={setBulkDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>계약 일괄 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              선택한 {selectedItems.size}개 계약을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleBulkDeleteConfirm}>삭제</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}