"use client";

import { useEffect, useState, useCallback } from "react";
import { getIntegrations, uninstallIntegration, Integration } from "@/lib/api";
import { IntegrationCard } from "./IntegrationCard";
import { RefreshCw, Puzzle } from "lucide-react";

interface IntegrationListProps {
  onBrowse?: () => void;
  refreshTrigger?: number;
}

export function IntegrationList({ onBrowse, refreshTrigger }: IntegrationListProps) {
  const [integrations, setIntegrations] = useState<Integration[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadIntegrations = useCallback(() => {
    setLoading(true);
    setError("");
    getIntegrations()
      .then((data) => setIntegrations(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load integrations:", err);
        setError("Failed to load integrations");
      })
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    loadIntegrations();
  }, [loadIntegrations, refreshTrigger]);

  const handleUninstall = (integration: Integration) => {
    if (!confirm(`Uninstall ${integration.name}?`)) return;
    uninstallIntegration(integration.id)
      .then(() => {
        setIntegrations((prev) => prev.filter((i) => i.id !== integration.id));
      })
      .catch((err) => console.error("Failed to uninstall:", err));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 py-12">
        <RefreshCw size={20} className="animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-slack-red py-12 text-sm">
        {error}
        <button
          onClick={loadIntegrations}
          className="ml-2 text-slack-purple hover:underline"
        >
          Retry
        </button>
      </div>
    );
  }

  if (integrations.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <Puzzle size={48} className="mb-3 opacity-50" />
        <p className="text-sm">No integrations installed.</p>
        {onBrowse && (
          <button
            onClick={onBrowse}
            className="mt-3 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors"
          >
            Browse App Directory
          </button>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {integrations.map((integration) => (
        <IntegrationCard
          key={integration.id}
          integration={integration}
          onUninstall={handleUninstall}
        />
      ))}
    </div>
  );
}

export default IntegrationList;