"use client";

import { Integration } from "@/lib/api";
import { Trash2, Check, AlertCircle, Power } from "lucide-react";

interface IntegrationCardProps {
  integration: Integration;
  onUninstall?: (integration: Integration) => void;
  onToggle?: (integration: Integration) => void;
}

export function IntegrationCard({ integration, onUninstall, onToggle }: IntegrationCardProps) {
  return (
    <div className="group p-4 rounded-lg border border-gray-200 bg-white shadow-sm hover:border-slack-purple/30 transition-colors">
      <div className="flex items-start gap-3">
        {/* Icon */}
        <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
          {integration.icon_url ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={integration.icon_url}
              alt={integration.name}
              className="w-8 h-8 rounded-md object-contain"
            />
          ) : (
            <span className="text-lg font-bold text-slack-purple">
              {integration.name[0]?.toUpperCase() || "A"}
            </span>
          )}
        </div>

        {/* Info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-gray-800 truncate">{integration.name}</h3>
            <span
              className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${
                integration.enabled
                  ? "bg-slack-green/10 text-slack-green"
                  : "bg-gray-100 text-gray-400"
              }`}
            >
              {integration.enabled ? "Enabled" : "Disabled"}
            </span>
            {integration.configured === false && (
              <span className="text-[10px] px-2 py-0.5 rounded-full bg-slack-yellow/10 text-slack-yellow font-medium flex items-center gap-0.5">
                <AlertCircle size={9} />
                Needs config
              </span>
            )}
          </div>

          {integration.description && (
            <p className="text-sm text-gray-500 mt-1 line-clamp-2">
              {integration.description}
            </p>
          )}

          {/* Scopes */}
          {integration.scopes && integration.scopes.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-2">
              {integration.scopes.map((scope) => (
                <span
                  key={scope}
                  className="inline-flex items-center text-[10px] px-2 py-0.5 rounded bg-gray-100 text-gray-500"
                >
                  <Check size={8} className="mr-0.5" />
                  {scope}
                </span>
              ))}
            </div>
          )}

          {integration.installed_at && (
            <p className="text-xs text-gray-400 mt-2">
              Installed {new Date(integration.installed_at).toLocaleDateString("en-US", {
                month: "short",
                day: "numeric",
                year: "numeric",
              })}
            </p>
          )}
        </div>

        {/* Actions */}
        <div className="flex items-center gap-1 flex-shrink-0">
          {onToggle && (
            <button
              onClick={() => onToggle(integration)}
              className="p-1.5 rounded text-gray-400 hover:text-slack-green hover:bg-gray-50 transition-colors"
              title={integration.enabled ? "Disable" : "Enable"}
            >
              <Power size={14} />
            </button>
          )}
          {onUninstall && (
            <button
              onClick={() => onUninstall(integration)}
              className="p-1.5 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-colors"
              title="Uninstall"
            >
              <Trash2 size={14} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default IntegrationCard;