/**
 * Cluster Configuration List Component
 * Display cluster list with edit and delete actions
 */
import React from "react";
import { Server, Edit, Trash2, Key, ExternalLink, Activity } from "lucide-react";
import type { ClusterConfig } from "@/core/types";
import { LoadingText, EmptyText } from "@/shared/constants";
import type { User } from "@/app/providers/AuthContext";
import { canUseResourceAction, getVisibilityLabel, type ResourceWithAccess } from "@/app/providers/auth-model";

interface ClusterListProps {
  clusters: ClusterConfig[];
  loading: boolean;
  onEdit: (cluster: ClusterConfig) => void;
  onDelete: (cluster: ClusterConfig) => void;
  onHealthCheck?: (cluster: ClusterConfig) => void;
  user?: User | null;
}

export const ClusterList: React.FC<ClusterListProps> = ({
  clusters,
  loading,
  onEdit,
  onDelete,
  onHealthCheck,
  user,
}) => {
  if (loading) {
    return (
      <div className="text-center py-12">
        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div>
        <p className="text-slate-500 mt-4">{LoadingText.LOADING_CLUSTERS}</p>
      </div>
    );
  }

  if (clusters.length === 0) {
    return (
      <div className="text-center py-12">
        <Server className="w-16 h-16 text-slate-400 mx-auto mb-4" />
        <p className="text-slate-500 text-lg mb-2">{EmptyText.NO_CLUSTERS}</p>
        <p className="text-slate-500 text-sm">{EmptyText.NO_CLUSTERS_DESC}</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {clusters.map((cluster) => {
        const access = cluster as ClusterConfig & ResourceWithAccess;
        const canEdit = canUseResourceAction(access, "update", user);
        const canDelete = canUseResourceAction(access, "delete", user);
        const canTest = canUseResourceAction(access, "test", user);

        return (
          <div
            key={cluster.id}
            className="bg-white border border-slate-200 rounded-lg p-5 hover:bg-slate-50 hover:border-slate-300 transition group"
          >
          {/* Header */}
          <div className="flex items-start justify-between mb-4">
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2 mb-1">
                <Server className="w-5 h-5 text-blue-400" />
                {cluster.name}
                <span className="rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[11px] font-medium text-slate-500">
                  {getVisibilityLabel(access.visibility)}
                </span>
              </h3>
              {cluster.description && (
                <p className="text-sm text-slate-500">{cluster.description}</p>
              )}
            </div>
            <div className="flex gap-2 ml-4">
              {onHealthCheck && canTest && (
                <button
                  onClick={() => onHealthCheck(cluster)}
                  className="p-2 text-slate-500 hover:text-emerald-700 hover:bg-emerald-50 rounded-lg transition"
                  title="Test Connection"
                >
                  <Activity className="w-4 h-4" />
                </button>
              )}
              <button
                onClick={() => onEdit(cluster)}
                disabled={!canEdit}
                className="p-2 text-slate-500 hover:text-blue-400 hover:bg-blue-50 rounded-lg transition"
                title={canEdit ? "Edit" : "Read-only"}
              >
                <Edit className="w-4 h-4" />
              </button>
              <button
                onClick={() => onDelete(cluster)}
                disabled={!canDelete}
                className="p-2 text-slate-500 hover:text-red-400 hover:bg-red-50 rounded-lg transition disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-slate-500"
                title={canDelete ? "Delete" : "Read-only"}
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>

          {/* Server Info */}
          <div className="space-y-3">
            <div className="flex items-start gap-2">
              <ExternalLink className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <p className="text-xs text-slate-500 mb-0.5">API Server URL</p>
                <p className="text-sm text-slate-700 font-mono truncate" title={cluster.host}>
                  {cluster.host}
                </p>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-3">
              <div className="flex items-start gap-2">
                <Key className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-xs text-slate-500 mb-0.5">CA Certificate</p>
                  <p className={`text-xs ${cluster.hasCaData ? "text-green-400" : "text-slate-500"}`}>
                    {cluster.hasCaData ? "✓ Configured" : "✗ Not Configured"}
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-2">
                <Key className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-xs text-slate-500 mb-0.5">Client Cert</p>
                  <p className={`text-xs ${cluster.hasCertData ? "text-yellow-400" : "text-slate-500"}`}>
                    {cluster.hasCertData ? "✓ Configured" : "✗ Not Configured"}
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-2">
                <Key className="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-xs text-slate-500 mb-0.5">Client Key</p>
                  <p className={`text-xs ${cluster.hasKeyData ? "text-red-400" : "text-slate-500"}`}>
                    {cluster.hasKeyData ? "✓ Configured" : "✗ Not Configured"}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Footer */}
          {cluster.createdAt && (
            <div className="mt-4 pt-4 border-t border-slate-200">
              <p className="text-xs text-slate-500">
                Created: {new Date(cluster.createdAt).toLocaleString("en-US")}
              </p>
            </div>
          )}
          </div>
        );
      })}
    </div>
  );
};
