"use client";

import React from "react";
import ComponentCard from "@/components/common/ComponentCard";
import { useTranslations } from "next-intl";

interface CdnManagementCardProps {
  onSync: (type: "all" | "crt" | "installers" | "bundles", mode: "latest" | "archive" | "both") => void;
  activeSync: string | null;
  disabled: boolean;
}

export default function CdnManagementCard({ onSync, activeSync, disabled }: CdnManagementCardProps) {
  const t = useTranslations("RootCA");

  const SyncButton = ({ 
    type,
    mode,
    label, 
    desc, 
    variant = "blue" 
  }: { 
    type: "all" | "crt" | "installers" | "bundles";
    mode: "latest" | "archive" | "both";
    label: string; 
    desc: string; 
    variant?: "blue" | "purple" | "indigo" | "gray" | "success" | "warning";
  }) => {
    const syncKey = `${type}-${mode}`;
    const isLoading = activeSync === syncKey;

    const variantClasses = {
      blue: "bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400",
      purple: "bg-purple-600 hover:bg-purple-700 disabled:bg-purple-400",
      indigo: "bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400",
      gray: "bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400",
      success: "bg-success-600 hover:bg-success-700 disabled:bg-success-400",
      warning: "bg-warning-500 hover:bg-warning-600 disabled:bg-warning-400",
    };

    return (
      <div className="flex flex-col gap-2 p-4 border border-gray-100 dark:border-white/[0.05] rounded-xl hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors h-full">
        <div className="flex items-center justify-between gap-4 h-full">
          <div className="flex flex-col flex-1">
            <span className="text-sm font-bold text-gray-800 dark:text-white/90">{label}</span>
            <p className="text-[11px] text-gray-500 dark:text-gray-400 leading-tight mt-1">{desc}</p>
          </div>
          <button
            onClick={() => onSync(type, mode)}
            disabled={disabled || activeSync !== null}
            className={`flex items-center justify-center gap-2 px-4 py-2 ${variantClasses[variant]} text-white text-[11px] font-medium rounded-lg transition-all shadow-sm active:scale-95 whitespace-nowrap min-w-[100px]`}
          >
            {isLoading ? (
              <svg className="animate-spin h-3 w-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            ) : (
              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
              </svg>
            )}
            {isLoading ? t("syncing_label") : t("sync_now_btn")}
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
        {/* Specific Assets Column */}
        <ComponentCard
          title={t("cdn_group_assets")}
          desc={t("cdn_group_assets_desc")}
        >
          <div className="grid grid-cols-1 gap-4">
            <SyncButton
              type="crt"
              mode="both"
              label={t("label_update_crt")}
              desc={t("desc_update_crt")}
              variant="blue"
            />
            <SyncButton
              type="installers"
              mode="both"
              label={t("label_update_scripts")}
              desc={t("desc_update_scripts")}
              variant="purple"
            />
            <SyncButton
              type="bundles"
              mode="latest"
              label={t("label_update_bundles")}
              desc={t("desc_update_bundles")}
              variant="success"
            />
          </div>
        </ComponentCard>

        {/* Sync Modes Column */}
        <ComponentCard
          title={t("cdn_group_modes")}
          desc={t("cdn_group_modes_desc")}
        >
          <div className="grid grid-cols-1 gap-4">
            <SyncButton
              type="all"
              mode="both"
              label={t("label_dual_sync")}
              desc={t("desc_dual_sync")}
              variant="indigo"
            />
            <SyncButton
              type="all"
              mode="latest"
              label={t("label_latest_sync")}
              desc={t("desc_latest_sync")}
              variant="blue"
            />
            <SyncButton
              type="all"
              mode="archive"
              label={t("label_archive_sync")}
              desc={t("desc_archive_sync")}
              variant="gray"
            />
          </div>
        </ComponentCard>
      </div>
    </div>
  );
}
