ERP-node/frontend/app/(main)/admin/batchmng/page.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from "@/components/ui/table";
import { 
  Plus, 
  Search, 
  RefreshCw,
  Database
} from "lucide-react";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import {
  BatchAPI,
  BatchConfig,
  BatchMapping,
} from "@/lib/api/batch";
import BatchCard from "@/components/admin/BatchCard";

export default function BatchManagementPage() {
  const router = useRouter();
  
  // 상태 관리
  const [batchConfigs, setBatchConfigs] = useState<BatchConfig[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [executingBatch, setExecutingBatch] = useState<number | null>(null);
  const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);

  // 페이지 로드 시 배치 목록 조회
  useEffect(() => {
    loadBatchConfigs();
  }, [currentPage, searchTerm]);

  // 배치 설정 목록 조회
  const loadBatchConfigs = async () => {
    setLoading(true);
    try {
      const response = await BatchAPI.getBatchConfigs({
        page: currentPage,
        limit: 10,
        search: searchTerm || undefined,
      });
      
      if (response.success && response.data) {
        setBatchConfigs(response.data);
        if (response.pagination) {
          setTotalPages(response.pagination.totalPages);
        }
      } else {
        setBatchConfigs([]);
      }
    } catch (error) {
      console.error("배치 목록 조회 실패:", error);
      toast.error("배치 목록을 불러오는데 실패했습니다.");
      setBatchConfigs([]);
    } finally {
      setLoading(false);
    }
  };

  // 배치 수동 실행
  const executeBatch = async (batchId: number) => {
    setExecutingBatch(batchId);
    try {
      const response = await BatchAPI.executeBatchConfig(batchId);
      if (response.success) {
        toast.success(`배치가 성공적으로 실행되었습니다! (처리: ${response.data?.totalRecords}개, 성공: ${response.data?.successRecords}개)`);
      } else {
        toast.error("배치 실행에 실패했습니다.");
      }
    } catch (error) {
      console.error("배치 실행 실패:", error);
      toast.error("배치 실행 중 오류가 발생했습니다.");
    } finally {
      setExecutingBatch(null);
    }
  };

  // 배치 활성화/비활성화 토글
  const toggleBatchStatus = async (batchId: number, currentStatus: string) => {
    console.log("🔄 배치 상태 변경 시작:", { batchId, currentStatus });
    
    try {
      const newStatus = currentStatus === 'Y' ? 'N' : 'Y';
      console.log("📝 새로운 상태:", newStatus);
      
      const result = await BatchAPI.updateBatchConfig(batchId, { isActive: newStatus });
      console.log("✅ API 호출 성공:", result);
      
      toast.success(`배치가 ${newStatus === 'Y' ? '활성화' : '비활성화'}되었습니다.`);
      loadBatchConfigs(); // 목록 새로고침
    } catch (error) {
      console.error("❌ 배치 상태 변경 실패:", error);
      toast.error("배치 상태 변경에 실패했습니다.");
    }
  };

  // 배치 삭제
  const deleteBatch = async (batchId: number, batchName: string) => {
    if (!confirm(`'${batchName}' 배치를 삭제하시겠습니까?`)) {
      return;
    }

    try {
      await BatchAPI.deleteBatchConfig(batchId);
      toast.success("배치가 삭제되었습니다.");
      loadBatchConfigs(); // 목록 새로고침
    } catch (error) {
      console.error("배치 삭제 실패:", error);
      toast.error("배치 삭제에 실패했습니다.");
    }
  };

  // 검색 처리
  const handleSearch = (value: string) => {
    setSearchTerm(value);
    setCurrentPage(1); // 검색 시 첫 페이지로 이동
  };

  // 매핑 정보 요약 생성
  const getMappingSummary = (mappings: BatchMapping[]) => {
    if (!mappings || mappings.length === 0) {
      return "매핑 없음";
    }

    const tableGroups = new Map<string, number>();
    mappings.forEach(mapping => {
      const key = `${mapping.from_table_name} → ${mapping.to_table_name}`;
      tableGroups.set(key, (tableGroups.get(key) || 0) + 1);
    });

    const summaries = Array.from(tableGroups.entries()).map(([key, count]) => 
      `${key} (${count}개 컬럼)`
    );

    return summaries.join(", ");
  };

  // 배치 추가 버튼 클릭 핸들러
  const handleCreateBatch = () => {
    setIsBatchTypeModalOpen(true);
  };

  // 배치 타입 선택 핸들러
  const handleBatchTypeSelect = (type: 'db-to-db' | 'restapi-to-db') => {
    console.log("배치 타입 선택:", type);
    setIsBatchTypeModalOpen(false);
    
    if (type === 'db-to-db') {
      // 기존 DB → DB 배치 생성 페이지로 이동
      console.log("DB → DB 페이지로 이동:", '/admin/batchmng/create');
      router.push('/admin/batchmng/create');
    } else if (type === 'restapi-to-db') {
      // 새로운 REST API 배치 페이지로 이동
      console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
      try {
        router.push('/admin/batch-management-new');
        console.log("라우터 push 실행 완료");
      } catch (error) {
        console.error("라우터 push 오류:", error);
        // 대안: window.location 사용
        window.location.href = '/admin/batch-management-new';
      }
    }
  };

  return (
    <div className="container mx-auto p-4 space-y-2">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">배치 관리</h1>
          <p className="text-muted-foreground">데이터베이스 간 배치 작업을 관리합니다.</p>
        </div>
        <Button
          onClick={handleCreateBatch}
          className="flex items-center space-x-2"
        >
          <Plus className="h-4 w-4" />
          <span>배치 추가</span>
        </Button>
      </div>

      {/* 검색 및 필터 */}
      <Card>
        <CardContent className="py-2">
          <div className="flex items-center space-x-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="배치명 또는 설명으로 검색..."
                value={searchTerm}
                onChange={(e) => handleSearch(e.target.value)}
                className="pl-10"
              />
            </div>
            <Button
              variant="outline"
              onClick={loadBatchConfigs}
              disabled={loading}
              className="flex items-center space-x-2"
            >
              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
              <span>새로고침</span>
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 배치 목록 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <span>배치 목록 ({batchConfigs.length}개)</span>
            {loading && <RefreshCw className="h-4 w-4 animate-spin" />}
          </CardTitle>
        </CardHeader>
        <CardContent>
          {batchConfigs.length === 0 ? (
            <div className="text-center py-12">
              <Database className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-semibold mb-2">배치가 없습니다</h3>
              <p className="text-muted-foreground mb-4">
                {searchTerm ? "검색 결과가 없습니다." : "새로운 배치를 추가해보세요."}
              </p>
              {!searchTerm && (
                <Button
                  onClick={handleCreateBatch}
                  className="flex items-center space-x-2"
                >
                  <Plus className="h-4 w-4" />
                  <span>첫 번째 배치 추가</span>
                </Button>
              )}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3">
              {batchConfigs.map((batch) => (
                <BatchCard
                  key={batch.id}
                  batch={batch}
                  executingBatch={executingBatch}
                  onExecute={executeBatch}
                  onToggleStatus={(batchId, currentStatus) => {
                    console.log("🖱️ 비활성화/활성화 버튼 클릭:", { batchId, currentStatus });
                    toggleBatchStatus(batchId, currentStatus);
                  }}
                  onEdit={(batchId) => router.push(`/admin/batchmng/edit/${batchId}`)}
                  onDelete={deleteBatch}
                  getMappingSummary={getMappingSummary}
                />
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 페이지네이션 */}
      {totalPages > 1 && (
        <div className="flex justify-center space-x-2">
          <Button
            variant="outline"
            onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
            disabled={currentPage === 1}
          >
            이전
          </Button>
          
          <div className="flex items-center space-x-1">
            {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
              const pageNum = i + 1;
              return (
                <Button
                  key={pageNum}
                  variant={currentPage === pageNum ? "default" : "outline"}
                  size="sm"
                  onClick={() => setCurrentPage(pageNum)}
                >
                  {pageNum}
                </Button>
              );
            })}
          </div>
          
          <Button
            variant="outline"
            onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
            disabled={currentPage === totalPages}
          >
            다음
          </Button>
        </div>
      )}

      {/* 배치 타입 선택 모달 */}
      {isBatchTypeModalOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <Card className="w-full max-w-2xl mx-4">
            <CardHeader>
              <CardTitle className="text-center">배치 타입 선택</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* DB → DB */}
                <div
                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
                  onClick={() => handleBatchTypeSelect('db-to-db')}
                >
                  <div className="flex items-center justify-center mb-4">
                    <Database className="w-8 h-8 text-blue-600 mr-2" />
                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
                    <Database className="w-8 h-8 text-blue-600" />
                  </div>
                  <div className="text-center">
                    <div className="font-medium text-lg mb-2">DB → DB</div>
                    <div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
                  </div>
                </div>

                {/* REST API → DB */}
                <div
                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
                  onClick={() => handleBatchTypeSelect('restapi-to-db')}
                >
                  <div className="flex items-center justify-center mb-4">
                    <Globe className="w-8 h-8 text-green-600 mr-2" />
                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
                    <Database className="w-8 h-8 text-green-600" />
                  </div>
                  <div className="text-center">
                    <div className="font-medium text-lg mb-2">REST API → DB</div>
                    <div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
                  </div>
                </div>
              </div>

              <div className="flex justify-center pt-4">
                <Button
                  variant="outline"
                  onClick={() => setIsBatchTypeModalOpen(false)}
                >
                  취소
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}