"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,
  ArrowRight,
  Globe,
  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 getStatusColor = () => {
    if (executingBatch === batch.id) return "bg-blue-50 border-blue-200";
    if (batch.is_active === 'Y') return "bg-green-50 border-green-200";
    return "bg-gray-50 border-gray-200";
  };

  const getStatusBadge = () => {
    if (executingBatch === batch.id) {
      return <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs px-1.5 py-0.5 h-5">실행 중</Badge>;
    }
    return (
      <Badge variant={batch.is_active === 'Y' ? 'default' : 'secondary'} className="text-xs px-1.5 py-0.5 h-5">
        {batch.is_active === 'Y' ? '활성' : '비활성'}
      </Badge>
    );
  };

  return (
    <Card className={`transition-all duration-200 hover:shadow-md ${getStatusColor()} h-fit`}>
      <CardContent className="p-3">
        {/* 헤더 섹션 */}
        <div className="mb-1.5">
          <div className="flex items-center justify-between mb-1">
            <div className="flex items-center space-x-1 min-w-0 flex-1">
              <Settings className="h-2.5 w-2.5 text-gray-600 flex-shrink-0" />
              <h3 className="text-xs font-medium text-gray-900 truncate">{batch.batch_name}</h3>
            </div>
            {getStatusBadge()}
          </div>
          
          <p className="text-xs text-gray-500 line-clamp-1 leading-tight h-3 flex items-start">
            {batch.description || '\u00A0'}
          </p>
        </div>

        {/* 정보 섹션 */}
        <div className="space-y-1 mb-2">
          {/* 스케줄 정보 */}
          <div className="flex items-center space-x-1 text-xs">
            <Clock className="h-2.5 w-2.5 text-blue-600" />
            <span className="text-gray-600 truncate text-xs">{batch.cron_schedule}</span>
          </div>

          {/* 생성일 정보 */}
          <div className="flex items-center space-x-1 text-xs">
            <Calendar className="h-2.5 w-2.5 text-green-600" />
            <span className="text-gray-600 text-xs">
              {new Date(batch.created_date).toLocaleDateString('ko-KR')}
            </span>
          </div>
        </div>

        {/* 매핑 정보 섹션 */}
        {batch.batch_mappings && batch.batch_mappings.length > 0 && (
          <div className="mb-2 p-1.5 bg-white rounded border border-gray-100">
            <div className="flex items-center space-x-1 mb-1">
              <Database className="h-2.5 w-2.5 text-purple-600" />
              <span className="text-xs font-medium text-gray-700">
                매핑 ({batch.batch_mappings.length})
              </span>
            </div>
            <div className="text-xs text-gray-600 line-clamp-1">
              {getMappingSummary(batch.batch_mappings)}
            </div>
          </div>
        )}

        {/* 액션 버튼 섹션 */}
        <div className="grid grid-cols-2 gap-1 pt-2 border-t border-gray-100">
          {/* 실행 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onExecute(batch.id)}
            disabled={executingBatch === batch.id}
            className="flex items-center justify-center space-x-1 bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 text-xs h-6"
          >
            {executingBatch === batch.id ? (
              <RefreshCw className="h-2.5 w-2.5 animate-spin" />
            ) : (
              <Play className="h-2.5 w-2.5" />
            )}
            <span>실행</span>
          </Button>
          
          {/* 활성화/비활성화 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onToggleStatus(batch.id, batch.is_active)}
            className={`flex items-center justify-center space-x-1 text-xs h-6 ${
              batch.is_active === 'Y' 
                ? 'bg-orange-50 hover:bg-orange-100 text-orange-700 border-orange-200'
                : 'bg-green-50 hover:bg-green-100 text-green-700 border-green-200'
            }`}
          >
            {batch.is_active === 'Y' ? (
              <Pause className="h-2.5 w-2.5" />
            ) : (
              <Play className="h-2.5 w-2.5" />
            )}
            <span>{batch.is_active === 'Y' ? '비활성' : '활성'}</span>
          </Button>
          
          {/* 수정 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onEdit(batch.id)}
            className="flex items-center justify-center space-x-1 bg-gray-50 hover:bg-gray-100 text-gray-700 border-gray-200 text-xs h-6"
          >
            <Edit className="h-2.5 w-2.5" />
            <span>수정</span>
          </Button>
          
          {/* 삭제 버튼 */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => onDelete(batch.id, batch.batch_name)}
            className="flex items-center justify-center space-x-1 bg-red-50 hover:bg-red-100 text-red-700 border-red-200 text-xs h-6"
          >
            <Trash2 className="h-2.5 w-2.5" />
            <span>삭제</span>
          </Button>
        </div>

        {/* 실행 중일 때 프로그레스 표시 */}
        {executingBatch === batch.id && (
          <div className="mt-2 pt-2 border-t border-blue-100">
            <div className="flex items-center space-x-1 text-xs text-blue-600">
              <Activity className="h-3 w-3 animate-pulse" />
              <span>실행 중...</span>
            </div>
            <div className="mt-1 w-full bg-blue-100 rounded-full h-1">
              <div className="bg-blue-600 h-1 rounded-full animate-pulse" style={{ width: '45%' }}></div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}