ServerDetailModal.tsx

/**
 * Server detail modal for viewing full server information.
 */

import type { ServerViewModel } from '../../types/registry';
import { ServerIcon } from '../../components/ServerIcon';

interface ServerDetailModalProps {
  server: ServerViewModel;
  onClose: () => void;
  onInstall: (id: string) => void;
  onUninstall: (id: string) => void;
  isLoading?: boolean;
}

export function ServerDetailModal({
  server,
  onClose,
  onInstall,
  onUninstall,
  isLoading,
}: ServerDetailModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="dropdown-menu relative w-full max-w-lg max-h-[90vh] overflow-hidden animate-in fade-in scale-in duration-150">
        {/* Header */}
        <div className="flex items-start gap-4 p-6 border-b border-[rgb(var(--border))]">
          <div className="flex-shrink-0 flex items-center justify-center">
            <ServerIcon icon={server.icon} className="w-12 h-12 object-contain rounded-lg" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h2 className="text-xl font-bold">
                {server.name}
              </h2>
              {server.publisher?.verified && (
                <span className="text-[rgb(var(--info))]" title="Verified Publisher">
                  ✓
                </span>
              )}
              {/* Badges */}
              {server.badges && server.badges.length > 0 && (
                <div className="flex gap-1.5">
                  {server.badges.includes('official') && (
                    <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/20 text-blue-600 dark:text-blue-400">
                      Official
                    </span>
                  )}
                  {server.badges.includes('verified') && (
                    <span className="px-2 py-0.5 text-xs rounded-full bg-green-500/20 text-green-600 dark:text-green-400">
                      ✓ Verified
                    </span>
                  )}
                  {server.badges.includes('featured') && (
                    <span className="px-2 py-0.5 text-xs rounded-full bg-amber-500/20 text-amber-600 dark:text-amber-400">
                      ⭐ Featured
                    </span>
                  )}
                  {server.badges.includes('sponsored') && (
                    <span className="px-2 py-0.5 text-xs rounded-full bg-yellow-500/20 text-yellow-600 dark:text-yellow-400">
                      Sponsored
                    </span>
                  )}
                  {server.badges.includes('popular') && (
                    <span className="px-2 py-0.5 text-xs rounded-full bg-red-500/20 text-red-600 dark:text-red-400">
                      🔥 Popular
                    </span>
                  )}
                </div>
              )}
            </div>
            {server.publisher?.name && (
              <p className="text-sm text-[rgb(var(--muted))]">
                by {server.publisher.name}
              </p>
            )}
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-[rgb(var(--surface-hover))] rounded-lg transition-colors"
          >
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Content */}
        <div className="p-6 overflow-y-auto max-h-[60vh] space-y-6">
          {/* Sponsored Banner */}
          {server.sponsored?.enabled && (
            <div className="flex items-center gap-3 p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/30">
              {server.sponsored.sponsor_logo && (
                <img src={server.sponsored.sponsor_logo} alt="Sponsor" className="w-8 h-8 rounded" />
              )}
              <div className="flex-1 text-sm">
                <span className="text-[rgb(var(--muted))]">Sponsored by </span>
                {server.sponsored.sponsor_url ? (
                  <a
                    href={server.sponsored.sponsor_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-medium hover:underline text-[rgb(var(--foreground))]"
                  >
                    {server.sponsored.sponsor_name}
                  </a>
                ) : (
                  <span className="font-medium">{server.sponsored.sponsor_name}</span>
                )}
              </div>
            </div>
          )}

          {/* Description */}
          <div>
            <h3 className="text-sm font-semibold mb-2">
              Description
            </h3>
            <p className="text-sm text-[rgb(var(--muted))]">
              {server.description}
            </p>
          </div>

          {/* Transport */}
          <div>
            <h3 className="text-sm font-semibold mb-2">
              Hosting
            </h3>
            <div className="flex items-center gap-2">
              <span
                className={`px-3 py-1 text-sm rounded-lg ${
                  (server.hosting_type || (server.transport.type === 'stdio' ? 'local' : 'remote')) === 'local'
                    ? 'bg-purple-500/20 text-purple-600 dark:text-purple-400'
                    : (server.hosting_type || 'remote') === 'remote'
                    ? 'bg-blue-500/20 text-blue-600 dark:text-blue-400'
                    : 'bg-indigo-500/20 text-indigo-600 dark:text-indigo-400'
                }`}
              >
                {(server.hosting_type || (server.transport.type === 'stdio' ? 'local' : 'remote')) === 'local'
                  ? '💻 Local Process'
                  : (server.hosting_type || 'remote') === 'remote'
                  ? '☁️ Remote Server'
                  : '🔄 Hybrid'}
              </span>
              <span className="text-xs text-[rgb(var(--muted))]">
                ({server.transport.type})
              </span>
            </div>
          </div>

          {/* Authentication */}
          <div>
            <h3 className="text-sm font-semibold mb-2">
              Authentication
            </h3>
            <div className="space-y-2">
              <span
                className={`px-3 py-1.5 text-sm font-medium rounded-lg inline-block ${
                  server.auth?.type === 'none'
                    ? 'bg-[rgb(var(--success))] text-white'
                    : server.auth?.type === 'api_key'
                    ? 'bg-[rgb(var(--warning))] text-white'
                    : server.auth?.type === 'optional_api_key'
                    ? 'bg-[rgb(var(--warning))]/80 text-white'
                    : 'bg-[rgb(var(--info))] text-white'
                }`}
              >
                {server.auth?.type === 'none'
                  ? '✅ No authentication required'
                  : server.auth?.type === 'api_key'
                  ? '🔑 API Key Required'
                  : server.auth?.type === 'optional_api_key'
                  ? '🔑 API Key (Optional)'
                  : '🔐 OAuth Authentication'}
              </span>
              {server.auth && 'instructions' in server.auth && server.auth.instructions && (
                <p className="text-sm text-[rgb(var(--muted))] mt-2">
                  {server.auth.instructions}
                </p>
              )}
            </div>
          </div>

          {/* Categories */}
          {server.categories.length > 0 && (
            <div>
              <h3 className="text-sm font-semibold mb-2">
                Categories
              </h3>
              <div className="flex flex-wrap gap-2">
                {server.categories.map((cat) => (
                  <span
                    key={cat}
                    className="px-3 py-1 text-sm rounded-lg bg-[rgb(var(--primary))]/20 text-[rgb(var(--primary))]"
                  >
                    {cat}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Capabilities */}
          {server.capabilities && (
            <div>
              <h3 className="text-sm font-semibold mb-2">
                Capabilities
              </h3>
              <div className="flex flex-wrap gap-2">
                {server.capabilities.tools && (
                  <span className="px-2 py-1 text-xs rounded-lg bg-[rgb(var(--surface-hover))] text-[rgb(var(--foreground))]">
                    🛠️ Tools
                  </span>
                )}
                {server.capabilities.resources && (
                  <span className="px-2 py-1 text-xs rounded-lg bg-[rgb(var(--surface-hover))] text-[rgb(var(--foreground))]">
                    📁 Resources
                  </span>
                )}
                {server.capabilities.prompts && (
                  <span className="px-2 py-1 text-xs rounded-lg bg-[rgb(var(--surface-hover))] text-[rgb(var(--foreground))]">
                    💬 Prompts
                  </span>
                )}
                {server.capabilities.read_only_mode && (
                  <span className="px-2 py-1 text-xs rounded-lg bg-green-500/20 text-green-600 dark:text-green-400">
                    🛡️ Read-Only (Safe)
                  </span>
                )}
              </div>
            </div>
          )}

          {/* Installation Info */}
          {server.installation && (
            <div className="bg-[rgb(var(--surface-hover))] rounded-lg p-4">
              <h3 className="text-sm font-semibold mb-3">Installation Info</h3>
              <div className="space-y-2 text-sm">
                {server.installation.difficulty && (
                  <div className="flex items-center gap-2">
                    <span className="text-[rgb(var(--muted))]">Difficulty:</span>
                    <span
                      className={`px-2 py-0.5 text-xs rounded-full ${
                        server.installation.difficulty === 'easy'
                          ? 'bg-green-500/20 text-green-600 dark:text-green-400'
                          : server.installation.difficulty === 'moderate'
                          ? 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400'
                          : 'bg-red-500/20 text-red-600 dark:text-red-400'
                      }`}
                    >
                      {server.installation.difficulty}
                    </span>
                  </div>
                )}
                {server.installation.estimated_time && (
                  <div className="flex items-center gap-2">
                    <span className="text-[rgb(var(--muted))]">Time:</span>
                    <span>{server.installation.estimated_time}</span>
                  </div>
                )}
                {server.installation.prerequisites && server.installation.prerequisites.length > 0 && (
                  <div>
                    <span className="text-[rgb(var(--muted))]">Prerequisites:</span>
                    <ul className="mt-1 ml-4 list-disc list-inside text-[rgb(var(--muted))]">
                      {server.installation.prerequisites.map((prereq, i) => (
                        <li key={i}>{prereq}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* License */}
          {server.license && (
            <div>
              <h3 className="text-sm font-semibold mb-2">License</h3>
              <div className="flex items-center gap-2">
                <span className="px-3 py-1 text-sm rounded-lg bg-[rgb(var(--surface-hover))] text-[rgb(var(--foreground))]">
                  {server.license}
                </span>
                {server.license_url && (
                  <a
                    href={server.license_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm text-[rgb(var(--primary))] hover:underline"
                  >
                    View License →
                  </a>
                )}
              </div>
            </div>
          )}

          {/* Screenshots */}
          {server.media?.screenshots && server.media.screenshots.length > 0 && (
            <div>
              <h3 className="text-sm font-semibold mb-2">Screenshots</h3>
              <div className="grid grid-cols-2 gap-2">
                {server.media.screenshots.map((url, i) => (
                  <img
                    key={i}
                    src={url}
                    alt={`Screenshot ${i + 1}`}
                    className="w-full h-32 object-cover rounded-lg border border-[rgb(var(--border))]"
                    loading="lazy"
                  />
                ))}
              </div>
            </div>
          )}

          {/* Links */}
          {(server.media?.demo_video || server.changelog_url) && (
            <div className="flex flex-col gap-2">
              {server.media?.demo_video && (
                <a
                  href={server.media.demo_video}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 text-sm text-[rgb(var(--primary))] hover:underline"
                >
                  🎥 Watch Demo Video →
                </a>
              )}
              {server.changelog_url && (
                <a
                  href={server.changelog_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 text-sm text-[rgb(var(--primary))] hover:underline"
                >
                  📝 View Changelog →
                </a>
              )}
            </div>
          )}

          {/* Source */}
          {server.source.type === 'Registry' && (
            <div>
              <h3 className="text-sm font-semibold mb-2">
                Source
              </h3>
              <p className="text-sm text-[rgb(var(--muted))]">
                {server.source.name}
              </p>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex justify-end gap-3 p-6 border-t border-[rgb(var(--border))]">
          <button
            onClick={onClose}
            className="px-4 py-2 text-sm rounded-lg border border-[rgb(var(--border))] hover:bg-[rgb(var(--surface-hover))] transition-colors"
          >
            Close
          </button>
          {server.is_installed ? (
            <button
              onClick={() => onUninstall(server.id)}
              disabled={isLoading}
              className="px-4 py-2 text-sm rounded-lg border border-[rgb(var(--error))]/30 text-[rgb(var(--error))] hover:bg-[rgb(var(--error))]/10 transition-colors disabled:opacity-50"
            >
              Uninstall
            </button>
          ) : (
            <button
              onClick={() => onInstall(server.id)}
              disabled={isLoading}
              className="px-4 py-2 text-sm rounded-lg bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))] hover:bg-[rgb(var(--primary-hover))] transition-colors disabled:opacity-50"
            >
              Install
            </button>
          )}
        </div>
      </div>
    </div>
  );
}