"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="rounded-lg border bg-card shadow-sm transition-colors hover:bg-muted/50">
      <CardContent className="p-4">
        {/* 헤더 */}
        <div className="mb-4 flex items-start justify-between">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <Settings className="h-4 w-4 text-muted-foreground flex-shrink-0" />
              <h3 className="text-base font-semibold truncate">{batch.batch_name}</h3>
            </div>
            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
              {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="flex items-center gap-2 text-muted-foreground">
              <Clock className="h-4 w-4" />
              스케줄
            </span>
            <span className="font-medium truncate ml-2">{batch.cron_schedule}</span>
          </div>

          {/* 생성일 정보 */}
          <div className="flex justify-between text-sm">
            <span className="flex items-center gap-2 text-muted-foreground">
              <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="flex items-center gap-2 text-muted-foreground">
                <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="flex items-center gap-2 text-sm text-primary">
              <Activity className="h-4 w-4 animate-pulse" />
              <span>실행 중...</span>
            </div>
            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
              <div 
                className="h-full animate-pulse rounded-full bg-primary" 
                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>
  );
}