ocdp-go/frontend/src/features/configuration/registries/components/RegistryList.tsx

/**
 * Registry Configuration List
 * Display all registry configurations
 */
import React from "react";
import { Edit2, Trash2, Database, ExternalLink } from "lucide-react";
import type { AppRegistry } from "@/core/types";
import { EmptyStateSimple } from "@/shared/components";
import { LoadingText, EmptyText } from "@/shared/constants";
import type { User } from "@/app/providers/AuthContext";
import { canUseResourceAction, getVisibilityLabel, type ResourceWithAccess } from "@/app/providers/auth-model";

interface RegistryListProps {
  registries: AppRegistry[];
  loading: boolean;
  onEdit: (registry: AppRegistry) => void;
  onDelete: (registry: AppRegistry) => void;
  user?: User | null;
}

export const RegistryList: React.FC<RegistryListProps> = ({
  registries,
  loading,
  onEdit,
  onDelete,
  user,
}) => {
  if (loading) {
    return (
      <div className="text-center py-12 text-slate-500">
        {LoadingText.LOADING_REGISTRIES}
      </div>
    );
  }

  if (registries.length === 0) {
    return (
      <EmptyStateSimple
        title={EmptyText.NO_REGISTRIES}
        description={EmptyText.NO_REGISTRIES_DESC}
        Icon={Database}
      />
    );
  }

  return (
    <div className="space-y-4">
      {registries.map((registry) => {
        const access = registry as AppRegistry & ResourceWithAccess;
        const canEdit = canUseResourceAction(access, "update", user);
        const canDelete = canUseResourceAction(access, "delete", user);

        return (
          <div
            key={registry.id}
            className="p-4 bg-slate-50 border border-slate-200 rounded-lg hover:border-slate-300 transition"
          >
          <div className="flex items-start justify-between">
            {/* Left: Basic Info */}
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <Database className="w-5 h-5 text-blue-600 flex-shrink-0" />
                <h3 className="text-lg font-semibold text-slate-900">
                  {registry.name}
                </h3>
                <span className="rounded border border-slate-200 bg-white px-1.5 py-0.5 text-[11px] font-medium text-slate-500">
                  {getVisibilityLabel(access.visibility)}
                </span>
                {registry.insecure && (
                  <span className="px-2 py-0.5 bg-yellow-900/30 text-yellow-400 text-xs rounded">
                    Insecure
                  </span>
                )}
              </div>

              <div className="ml-8 space-y-1">
                <div className="flex items-center gap-2 text-sm text-slate-500">
                  <ExternalLink className="w-4 h-4" />
                  <a
                    href={registry.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="hover:text-blue-600 transition"
                  >
                    {registry.url}
                  </a>
                </div>

                {registry.description && (
                  <p className="text-sm text-slate-500">{registry.description}</p>
                )}

                {registry.username && (
                  <p className="text-sm text-slate-500">
                    Username: <span className="text-slate-500">{registry.username}</span>
                  </p>
                )}
              </div>
            </div>

            {/* Right: Action Buttons */}
            <div className="flex items-center gap-2 ml-4">
              <button
                onClick={() => onEdit(registry)}
                disabled={!canEdit}
                className="p-2 text-slate-500 hover:text-blue-400 hover:bg-white rounded-lg transition disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-slate-500"
                title={canEdit ? "Edit" : "Read-only"}
              >
                <Edit2 className="w-4 h-4" />
              </button>
              <button
                onClick={() => onDelete(registry)}
                disabled={!canDelete}
                className="p-2 text-slate-500 hover:text-red-400 hover:bg-white rounded-lg transition disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-slate-500"
                title={canDelete ? "Delete" : "Read-only"}
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
          </div>
        );
      })}
    </div>
  );
};