/**
 * Registry Tree Explorer Component
 * Display registries in a tree-like structure
 */
import React, { useState } from "react";
import { 
  Database, 
  ChevronRight, 
  ChevronDown, 
  Package, 
  Server, 
  ExternalLink,
  Shield,
  Globe
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import type { AppRegistry } from "@/core/types";

interface RegistryTreeExplorerProps {
  registries: AppRegistry[];
}

export const RegistryTreeExplorer: React.FC<RegistryTreeExplorerProps> = ({ registries }) => {
  const navigate = useNavigate();
  const [expandedRegistries, setExpandedRegistries] = useState<Set<string>>(new Set());
  const [hoveredRegistry, setHoveredRegistry] = useState<string | null>(null);

  const toggleRegistry = (registryId: string) => {
    const newExpanded = new Set(expandedRegistries);
    if (newExpanded.has(registryId)) {
      newExpanded.delete(registryId);
    } else {
      newExpanded.add(registryId);
    }
    setExpandedRegistries(newExpanded);
  };

  const handleRegistryClick = (registryId: string) => {
    navigate(`/artifact/registries/${registryId}`);
  };

  return (
    <div className="mt-6">
      <div className="relative bg-gradient-to-br from-slate-800/80 via-slate-800/50 to-slate-900/80 border border-slate-700/50 rounded-xl overflow-hidden shadow-2xl">
        {/* Decorative background effect */}
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500/5 via-transparent to-blue-500/5 pointer-events-none"></div>
        
        {/* Header with enhanced design */}
        <div className="relative p-6 border-b border-slate-700/50 bg-gradient-to-r from-purple-900/20 via-transparent to-blue-900/20 backdrop-blur-sm">
          <div className="flex items-center gap-3">
            <div className="p-3 bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-xl border border-purple-500/30 shadow-lg shadow-purple-500/20">
              <Database className="w-6 h-6 text-purple-400" />
            </div>
            <div>
              <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300">
                OCI Registries
              </h3>
              <p className="text-sm text-slate-400 mt-0.5">
                {registries.length} {registries.length === 1 ? 'registry' : 'registries'} configured
              </p>
            </div>
          </div>
        </div>
        
        {/* Registry List */}
        <div className="divide-y divide-slate-700/50">
          {registries.map((registry) => {
            const isExpanded = expandedRegistries.has(registry.id || '');
            const isHovered = hoveredRegistry === registry.id;
            
            return (
              <div 
                key={registry.id} 
                className="relative group transition-all duration-300"
                onMouseEnter={() => setHoveredRegistry(registry.id || '')}
                onMouseLeave={() => setHoveredRegistry(null)}
              >
                {/* Hover glow effect */}
                {isHovered && (
                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-cyan-500/10 pointer-events-none"></div>
                )}
                
                <div
                  className="relative flex items-center justify-between p-5 cursor-pointer hover:bg-slate-800/50 transition-colors"
                  onClick={() => toggleRegistry(registry.id || '')}
                >
                  <div className="flex items-center gap-4 flex-1">
                    {/* Expand/Collapse Icon */}
                    <div className="flex-shrink-0">
                      {isExpanded ? (
                        <ChevronDown className="w-5 h-5 text-purple-400 transition-transform duration-200" />
                      ) : (
                        <ChevronRight className="w-5 h-5 text-slate-400 group-hover:text-purple-400 transition-colors duration-200" />
                      )}
                    </div>
                    
                    {/* Registry Icon with glow */}
                    <div className={`relative p-3 rounded-xl border transition-all duration-300 ${
                      isExpanded 
                        ? 'bg-gradient-to-br from-purple-500/30 to-blue-500/30 border-purple-500/50 shadow-lg shadow-purple-500/30' 
                        : 'bg-gradient-to-br from-purple-500/10 to-blue-500/10 border-purple-500/30 group-hover:border-purple-500/50'
                    }`}>
                      <Server className={`w-6 h-6 transition-colors duration-300 ${
                        isExpanded ? 'text-purple-300' : 'text-purple-400'
                      }`} />
                    </div>
                    
                    {/* Registry Info */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-3">
                        <h4 className="text-base font-bold text-white group-hover:text-purple-300 transition-colors">
                          {registry.name || 'Unnamed Registry'}
                        </h4>
                        {registry.url && (
                          <div className="flex items-center gap-1.5 px-2.5 py-1 bg-slate-700/50 border border-slate-600/50 rounded-md">
                            <Globe className="w-3.5 h-3.5 text-cyan-400" />
                            <span className="text-xs text-cyan-400 font-medium">Connected</span>
                          </div>
                        )}
                      </div>
                      
                      {registry.description && (
                        <p className="text-sm text-slate-400 mt-1.5 line-clamp-1">
                          {registry.description}
                        </p>
                      )}
                      
                      {registry.url && (
                        <div className="flex items-center gap-2 mt-2">
                          <Shield className="w-3.5 h-3.5 text-slate-500" />
                          <p className="text-xs text-slate-500 font-mono truncate">
                            {registry.url}
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                  
                  {/* Browse Button */}
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleRegistryClick(registry.id || '');
                    }}
                    className="group/btn flex-shrink-0 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-blue-300 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 hover:from-blue-600/30 hover:to-cyan-600/30 border border-blue-500/40 hover:border-blue-400/60 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30"
                  >
                    <Package className="w-4 h-4 group-hover/btn:scale-110 transition-transform" />
                    Browse
                    <ExternalLink className="w-3.5 h-3.5 opacity-70 group-hover/btn:opacity-100 group-hover/btn:translate-x-0.5 group-hover/btn:-translate-y-0.5 transition-all" />
                  </button>
                </div>
                
                {/* Expanded Content */}
                {isExpanded && (
                  <div className="relative px-5 pb-5 pl-20 animate-in fade-in slide-in-from-top-2 duration-300">
                    <div className="relative bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-700/50 rounded-lg p-5 shadow-inner">
                      {/* Decorative corner accent */}
                      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-purple-500/10 to-transparent rounded-bl-full pointer-events-none"></div>
                      
                      <div className="relative flex items-start gap-3">
                        <div className="flex-shrink-0 p-2 bg-purple-500/10 border border-purple-500/30 rounded-lg">
                          <Package className="w-5 h-5 text-purple-400" />
                        </div>
                        <div className="flex-1">
                          <p className="text-sm font-semibold text-white mb-1">
                            Ready to explore
                          </p>
                          <p className="text-sm text-slate-400 leading-relaxed">
                            Click <span className="font-semibold text-blue-400">"Browse"</span> to view all repositories and artifacts available in this registry.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
