ERP-node/frontend/components/admin/BatchCard.tsx

"use client";

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Play, Pause, Edit, Trash2, RefreshCw, Clock, Database, Calendar, Activity, Settings } from "lucide-react";
import { BatchConfig } from "@/lib/api/batch";

interface BatchCardProps {
  batch: BatchConfig;
  executingBatch: number | null;
  onExecute: (batchId: number) => void;
  onToggleStatus: (batchId: number, currentStatus: string) => void;
  onEdit: (batchId: number) => void;
  onDelete: (batchId: number, batchName: string) => void;
  getMappingSummary: (mappings: any[]) => string;
}

export default function BatchCard({
  batch,
  executingBatch,
  onExecute,
  onToggleStatus,
  onEdit,
  onDelete,
  getMappingSummary,
}: BatchCardProps) {
  // 상태에 따른 스타일 결정
  const isExecuting = executingBatch === batch.id;
  const isActive = batch.is_active === "Y";

  return (
    <Card className="bg-card hover:bg-muted/50 rounded-lg border shadow-sm transition-colors">
      <CardContent className="p-4">
        {/* 헤더 */}
        <div className="mb-4 flex items-start justify-between">
          <div className="min-w-0 flex-1">
            <div className="mb-1 flex items-center gap-2">
              <Settings className="text-muted-foreground h-4 w-4 flex-shrink-0" />
              <h3 className="truncate text-base font-semibold">{batch.batch_name}</h3>
            </div>
            <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{batch.description || "설명 없음"}</p>
          </div>
          <Badge variant={isActive ? "default" : "secondary"} className="ml-2 flex-shrink-0">
            {isExecuting ? "실행 중" : isActive ? "활성" : "비활성"}
          </Badge>
        </div>

        {/* 정보 */}
        <div className="space-y-2 border-t pt-4">
          {/* 스케줄 정보 */}
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground flex items-center gap-2">
              <Clock className="h-4 w-4" />
              스케줄
            </span>
            <span className="ml-2 truncate font-medium">{batch.cron_schedule}</span>
          </div>

          {/* 생성일 정보 */}
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground flex items-center gap-2">
              <Calendar className="h-4 w-4" />
              생성일
            </span>
            <span className="font-medium">{new Date(batch.created_date).toLocaleDateString("ko-KR")}</span>
          </div>

          {/* 매핑 정보 */}
          {batch.batch_mappings && batch.batch_mappings.length > 0 && (
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground flex items-center gap-2">
                <Database className="h-4 w-4" />
                매핑
              </span>
              <span className="font-medium">{batch.batch_mappings.length}개</span>
            </div>
          )}
        </div>

        {/* 실행 중 프로그레스 */}
        {isExecuting && (
          <div className="mt-4 space-y-2 border-t pt-4">
            <div className="text-primary flex items-center gap-2 text-sm">
              <Activity className="h-4 w-4 animate-pulse" />
              <span>실행 중...</span>
            </div>
            <div className="bg-secondary h-2 w-full overflow-hidden rounded-full">
              <div className="bg-primary h-full animate-pulse rounded-full" style={{ width: "45%" }} />
            </div>
          </div>
        )}

        {/* 액션 버튼 */}
        <div className="mt-4 grid grid-cols-2 gap-2 border-t pt-4">
          {/* 실행 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onExecute(batch.id)}
            disabled={isExecuting}
            className="h-9 flex-1 gap-2 text-sm"
          >
            {isExecuting ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
            실행
          </Button>

          {/* 활성화/비활성화 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onToggleStatus(batch.id, batch.is_active)}
            className="h-9 flex-1 gap-2 text-sm"
          >
            {isActive ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
            {isActive ? "비활성" : "활성"}
          </Button>

          {/* 수정 버튼 */}
          <Button variant="outline" size="sm" onClick={() => onEdit(batch.id)} className="h-9 flex-1 gap-2 text-sm">
            <Edit className="h-4 w-4" />
            수정
          </Button>

          {/* 삭제 버튼 */}
          <Button
            variant="destructive"
            size="sm"
            onClick={() => onDelete(batch.id, batch.batch_name)}
            className="h-9 flex-1 gap-2 text-sm"
          >
            <Trash2 className="h-4 w-4" />
            삭제
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}