"use client";

import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { CheckCircle2, XCircle, Clock, Layers, CalendarDays, RotateCcw, XSquare } from "lucide-react";
import api from "@/lib/api";
import { toast } from "sonner";

const STATUS_LABEL: Record<string, string> = {
  processing: "Diproses",
  completed: "Selesai",
};

const BATCH_TYPE_LABEL: Record<string, string> = {
  test: "Test Email",
  bulk: "Bulk / Massal",
  single: "Single Email",
};

interface EmailBatchCompactCardProps {
  batch: any;
  showEventGroup?: boolean;
  onRetryComplete?: () => void;
}

export function EmailBatchCompactCard({ batch, showEventGroup = false, onRetryComplete }: EmailBatchCompactCardProps) {
  const [isRetrying, setIsRetrying] = useState(false);
  const [isCancelling, setIsCancelling] = useState(false);
  const sent = batch.stats?.sent || 0;
  const failed = batch.stats?.failed || 0;
  const queued = batch.stats?.queued || 0;
  const sending = batch.stats?.sending || 0;
  const total = batch.total_jobs || 1;
  const percent = Math.round((sent / total) * 100);
  const isDone = batch.status === "completed";
  const isProcessing = batch.status === "processing";
  const canRetry = failed > 0 && isDone;

  const handleRetry = async () => {
    if (!canRetry || isRetrying) return;
    setIsRetrying(true);
    try {
      const res = await api.post<{ data: { retried: number } }>(`/email-batches/${batch.id}/retry-failed`);
      toast.success(`${res.data.retried} email gagal berhasil di-queue ulang`);
      onRetryComplete?.();
    } catch (err: any) {
      const message = err?.response?.data?.error || "Gagal mengirim ulang email";
      toast.error(message);
    } finally {
      setIsRetrying(false);
    }
  };

  const handleCancel = async () => {
    if (!isProcessing || isCancelling) return;
    setIsCancelling(true);
    try {
      const res = await api.post<{ data: { cancelled: number } }>(`/email-batches/${batch.id}/cancel`);
      toast.success(`Batch dibatalkan. ${res.data.cancelled} email dibatalkan.`);
      onRetryComplete?.();
    } catch (err: any) {
      const message = err?.response?.data?.error || "Gagal membatalkan batch";
      toast.error(message);
    } finally {
      setIsCancelling(false);
    }
  };

  return (
    <div className="border rounded-xl p-4 space-y-3 bg-white">
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <div className="flex items-center gap-2 flex-wrap">
          <Badge>{BATCH_TYPE_LABEL[batch.type] || batch.type}</Badge>
          {showEventGroup && (
            <span className="text-xs text-gray-500 font-medium flex items-center gap-1">
              <Layers className="w-3.5 h-3.5" />
              {batch.event_group
                ? batch.event_group.name
                : batch.type === "test"
                ? "Global (Test)"
                : "Tanpa Grup"}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {isProcessing && (
            <Button
              variant="outline"
              size="sm"
              onClick={handleCancel}
              disabled={isCancelling}
              className="text-red-600 border-red-300 hover:bg-red-50 h-7 text-xs"
            >
              <XSquare className={`w-3.5 h-3.5 mr-1 ${isCancelling ? "animate-pulse" : ""}`} />
              {isCancelling ? "Membatalkan..." : "Batal Kirim"}
            </Button>
          )}
          {canRetry && (
            <Button
              variant="outline"
              size="sm"
              onClick={handleRetry}
              disabled={isRetrying}
              className="text-orange-600 border-orange-300 hover:bg-orange-50 h-7 text-xs"
            >
              <RotateCcw className={`w-3.5 h-3.5 mr-1 ${isRetrying ? "animate-spin" : ""}`} />
              {isRetrying ? "Mengirim Ulang..." : "Kirim Ulang Gagal"}
            </Button>
          )}
          <Badge variant={isDone ? "default" : "secondary"}>
            {STATUS_LABEL[batch.status] || batch.status}
          </Badge>
        </div>
      </div>

      <div>
        <div className="flex justify-between text-xs text-gray-500 mb-1">
          <span>Progress Pengiriman</span>
          <span>{percent}% ({sent}/{total})</span>
        </div>
        <Progress value={percent} className="h-2" />
      </div>

      <div className="flex items-center justify-between text-xs text-gray-500 flex-wrap gap-2">
        <span className="flex items-center gap-1">
          <CheckCircle2 className="w-3.5 h-3.5 text-green-500" /> {sent} Terkirim
        </span>
        <span className="flex items-center gap-1">
          <XCircle className="w-3.5 h-3.5 text-red-500" /> {failed} Gagal
        </span>
        <span className="flex items-center gap-1">
          <Clock className="w-3.5 h-3.5 text-blue-500" /> {queued + sending} Antrean
        </span>
        <span className="flex items-center gap-1">
          <CalendarDays className="w-3.5 h-3.5" />
          {new Date(batch.created_at).toLocaleString("id-ID", {
            day: "numeric", month: "short", year: "numeric",
            hour: "2-digit", minute: "2-digit"
          })}
        </span>
      </div>
    </div>
  );
}