import React, { useState, useMemo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  ShoppingBag,
  Search,
  Star,
  Download,
  Zap,
  Filter,
  X,
  CheckCircle,
  Mail,
  BarChart3,
  Users,
  Calendar,
  Link as LinkIcon,
  Bot,
  Package,
  Eye,
  ChevronDown,
  AlertTriangle,
  Clock,
  Settings,
  ArrowRight
} from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import api from '../api/client';
import { PluginTemplate, PluginCategory } from '../types';

// Category icon mapping
const categoryIcons: Record<PluginCategory, React.ReactNode> = {
  EMAIL: <Mail className="h-4 w-4" />,
  REPORTS: <BarChart3 className="h-4 w-4" />,
  CUSTOMER: <Users className="h-4 w-4" />,
  BOOKING: <Calendar className="h-4 w-4" />,
  INTEGRATION: <LinkIcon className="h-4 w-4" />,
  AUTOMATION: <Bot className="h-4 w-4" />,
  OTHER: <Package className="h-4 w-4" />,
};

// Category colors
const categoryColors: Record<PluginCategory, string> = {
  EMAIL: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
  REPORTS: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
  CUSTOMER: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
  BOOKING: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
  INTEGRATION: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300',
  AUTOMATION: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300',
  OTHER: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
};

// Helper function to detect platform-only code
const detectPlatformOnlyCode = (code: string): { hasPlatformCode: boolean; warnings: string[] } => {
  const warnings: string[] = [];

  if (code.includes('{{PLATFORM:')) {
    warnings.push('This code uses platform-only features that require special permissions');
  }

  if (code.includes('{{WHITELIST:')) {
    warnings.push('This code requires whitelisting by platform administrators');
  }

  if (code.includes('{{SUPERUSER:')) {
    warnings.push('This code requires superuser privileges to execute');
  }

  if (code.includes('{{SYSTEM:')) {
    warnings.push('This code accesses system-level features');
  }

  return {
    hasPlatformCode: warnings.length > 0,
    warnings
  };
};

const PluginMarketplace: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<PluginCategory | 'ALL'>('ALL');
  const [selectedPlugin, setSelectedPlugin] = useState<PluginTemplate | null>(null);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [showCode, setShowCode] = useState(false);
  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
  const [showWhatsNextModal, setShowWhatsNextModal] = useState(false);
  const [installedPluginId, setInstalledPluginId] = useState<string | null>(null);

  // Fetch marketplace plugins
  const { data: plugins = [], isLoading, error } = useQuery<PluginTemplate[]>({
    queryKey: ['plugin-templates', 'marketplace'],
    queryFn: async () => {
      const { data } = await api.get('/plugin-templates/?view=marketplace');
      return data.map((p: any) => ({
        id: String(p.id),
        name: p.name,
        description: p.description,
        category: p.category,
        version: p.version,
        author: p.author_name,
        rating: parseFloat(p.rating_average || 0),
        ratingCount: parseInt(p.rating_count || 0),
        installCount: parseInt(p.install_count || 0),
        isVerified: p.visibility === 'PLATFORM',
        isFeatured: p.is_featured || false,
        createdAt: p.created_at,
        updatedAt: p.updated_at,
        logoUrl: p.logo_url,
        pluginCode: p.plugin_code,
      }));
    },
  });

  // Fetch installed plugins to check which are already installed
  const { data: installedPlugins = [] } = useQuery<{ template: number }[]>({
    queryKey: ['plugin-installations'],
    queryFn: async () => {
      const { data } = await api.get('/plugin-installations/');
      return data;
    },
  });

  // Create a set of installed template IDs for quick lookup
  const installedTemplateIds = useMemo(() => {
    return new Set(installedPlugins.map(p => String(p.template)));
  }, [installedPlugins]);

  // Install plugin mutation
  const installMutation = useMutation({
    mutationFn: async (templateId: string) => {
      const { data } = await api.post('/plugin-installations/', {
        template: templateId,
      });
      return data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ['plugin-installations'] });
      setShowDetailsModal(false);
      // Show What's Next modal
      setInstalledPluginId(data.id);
      setShowWhatsNextModal(true);
    },
  });

  // Filter plugins
  const filteredPlugins = useMemo(() => {
    let result = plugins;

    // Filter by category
    if (selectedCategory !== 'ALL') {
      result = result.filter(p => p.category === selectedCategory);
    }

    // Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      result = result.filter(p =>
        p.name.toLowerCase().includes(query) ||
        p.description.toLowerCase().includes(query) ||
        p.author.toLowerCase().includes(query)
      );
    }

    return result;
  }, [plugins, selectedCategory, searchQuery]);

  // Sort: Featured first, then by rating, then by install count
  const sortedPlugins = useMemo(() => {
    return [...filteredPlugins].sort((a, b) => {
      if (a.isFeatured && !b.isFeatured) return -1;
      if (!a.isFeatured && b.isFeatured) return 1;
      if (a.rating !== b.rating) return b.rating - a.rating;
      return b.installCount - a.installCount;
    });
  }, [filteredPlugins]);

  const handleInstall = async (plugin: PluginTemplate) => {
    setSelectedPlugin(plugin);
    setShowDetailsModal(true);
    setShowCode(false);

    // Fetch full plugin details including plugin_code
    setIsLoadingDetails(true);
    try {
      const { data } = await api.get(`/plugin-templates/${plugin.id}/`);
      setSelectedPlugin({
        ...plugin,
        pluginCode: data.plugin_code,
        logoUrl: data.logo_url,
      });
    } catch (error) {
      console.error('Failed to fetch plugin details:', error);
    } finally {
      setIsLoadingDetails(false);
    }
  };

  const confirmInstall = () => {
    if (selectedPlugin) {
      installMutation.mutate(selectedPlugin.id);
    }
  };

  if (isLoading) {
    return (
      <div className="p-8">
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-8">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <p className="text-red-800 dark:text-red-300">
            {t('common.error')}: {error instanceof Error ? error.message : 'Unknown error'}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-8 space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <ShoppingBag className="h-7 w-7 text-brand-600" />
            {t('plugins.marketplace', 'Plugin Marketplace')}
          </h2>
          <p className="text-gray-500 dark:text-gray-400 mt-1">
            {t('plugins.marketplaceDescription', 'Extend your business with powerful plugins')}
          </p>
        </div>
      </div>

      {/* Search and Filters */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 shadow-sm">
        <div className="flex flex-col lg:flex-row gap-4">
          {/* Search Bar */}
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={t('plugins.searchPlugins', 'Search plugins...')}
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
            />
          </div>

          {/* Category Filter */}
          <div className="flex items-center gap-2">
            <Filter className="h-5 w-5 text-gray-400" />
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value as PluginCategory | 'ALL')}
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
            >
              <option value="ALL">{t('plugins.allCategories', 'All Categories')}</option>
              <option value="EMAIL">{t('plugins.categoryEmail', 'Email')}</option>
              <option value="REPORTS">{t('plugins.categoryReports', 'Reports')}</option>
              <option value="CUSTOMER">{t('plugins.categoryCustomer', 'Customer')}</option>
              <option value="BOOKING">{t('plugins.categoryBooking', 'Booking')}</option>
              <option value="INTEGRATION">{t('plugins.categoryIntegration', 'Integration')}</option>
              <option value="AUTOMATION">{t('plugins.categoryAutomation', 'Automation')}</option>
              <option value="OTHER">{t('plugins.categoryOther', 'Other')}</option>
            </select>
          </div>
        </div>

        {/* Active Filters Summary */}
        {(searchQuery || selectedCategory !== 'ALL') && (
          <div className="flex items-center gap-2 mt-4">
            <span className="text-sm text-gray-500 dark:text-gray-400">
              {t('plugins.showingResults', 'Showing')} {sortedPlugins.length} {t('plugins.results', 'results')}
            </span>
            {(searchQuery || selectedCategory !== 'ALL') && (
              <button
                onClick={() => {
                  setSearchQuery('');
                  setSelectedCategory('ALL');
                }}
                className="text-sm text-brand-600 dark:text-brand-400 hover:underline"
              >
                {t('common.clearAll', 'Clear all')}
              </button>
            )}
          </div>
        )}
      </div>

      {/* Plugin Grid */}
      {sortedPlugins.length === 0 ? (
        <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
          <ShoppingBag className="h-12 w-12 mx-auto text-gray-400 mb-4" />
          <p className="text-gray-500 dark:text-gray-400">
            {searchQuery || selectedCategory !== 'ALL'
              ? t('plugins.noPluginsFound', 'No plugins found matching your criteria')
              : t('plugins.noPluginsAvailable', 'No plugins available yet')}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {sortedPlugins.map((plugin) => (
            <div
              key={plugin.id}
              className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col"
            >
              {/* Plugin Card Header */}
              <div className="p-6 flex-1">
                <div className="flex items-start gap-3 mb-3">
                  {/* Logo */}
                  {plugin.logoUrl ? (
                    <img
                      src={plugin.logoUrl}
                      alt={`${plugin.name} logo`}
                      className="w-12 h-12 rounded-lg object-cover flex-shrink-0"
                    />
                  ) : (
                    <div className="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                      <Package className="h-6 w-6 text-gray-400" />
                    </div>
                  )}

                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex items-center gap-2 flex-wrap">
                        <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${categoryColors[plugin.category]}`}>
                          {categoryIcons[plugin.category]}
                          {plugin.category}
                        </span>
                        {plugin.isFeatured && (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
                            <Zap className="h-3 w-3" />
                            Featured
                          </span>
                        )}
                        {installedTemplateIds.has(plugin.id) && (
                          <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
                            <CheckCircle className="h-3 w-3" />
                            Installed
                          </span>
                        )}
                      </div>
                      {plugin.isVerified && (
                        <CheckCircle className="h-5 w-5 text-blue-500 flex-shrink-0" title="Verified" />
                      )}
                    </div>
                  </div>
                </div>

                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {plugin.name}
                </h3>

                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
                  {plugin.description}
                </p>

                {/* Stats */}
                <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                  <div className="flex items-center gap-1">
                    <Star className="h-4 w-4 text-amber-500 fill-amber-500" />
                    <span className="font-medium">{plugin.rating.toFixed(1)}</span>
                    <span className="text-xs">({plugin.ratingCount})</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Download className="h-4 w-4" />
                    <span>{plugin.installCount.toLocaleString()}</span>
                  </div>
                </div>

                <div className="mt-3 text-xs text-gray-400 dark:text-gray-500">
                  by {plugin.author} • v{plugin.version}
                </div>
              </div>

              {/* Plugin Card Actions */}
              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700">
                <button
                  onClick={() => handleInstall(plugin)}
                  className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium text-sm"
                >
                  <Eye className="h-4 w-4" />
                  {t('plugins.view', 'View')}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Plugin Details Modal */}
      {showDetailsModal && selectedPlugin && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
            {/* Modal Header */}
            <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
              <div className="flex items-center gap-3">
                {/* Logo in modal header */}
                {selectedPlugin.logoUrl ? (
                  <img
                    src={selectedPlugin.logoUrl}
                    alt={`${selectedPlugin.name} logo`}
                    className="w-10 h-10 rounded-lg object-cover flex-shrink-0"
                  />
                ) : (
                  <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
                    <Package className="h-5 w-5 text-gray-400" />
                  </div>
                )}
                <div className="flex items-center gap-2">
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    {selectedPlugin.name}
                  </h3>
                  {selectedPlugin.isVerified && (
                    <CheckCircle className="h-5 w-5 text-blue-500" title="Verified" />
                  )}
                </div>
              </div>
              <button
                onClick={() => {
                  setShowDetailsModal(false);
                  setSelectedPlugin(null);
                  setShowCode(false);
                }}
                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            {/* Modal Body */}
            <div className="p-6 space-y-6 overflow-y-auto flex-1">
              {isLoadingDetails ? (
                <div className="flex items-center justify-center py-12">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-600"></div>
                </div>
              ) : (
                <>
                  <div className="flex items-center gap-2">
                    <span className={`inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium ${categoryColors[selectedPlugin.category]}`}>
                      {categoryIcons[selectedPlugin.category]}
                      {selectedPlugin.category}
                    </span>
                    {selectedPlugin.isFeatured && (
                      <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
                        <Zap className="h-4 w-4" />
                        Featured
                      </span>
                    )}
                  </div>

                  <div>
                    <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                      {t('plugins.description', 'Description')}
                    </h4>
                    <p className="text-gray-600 dark:text-gray-400">
                      {selectedPlugin.description}
                    </p>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        {t('plugins.version', 'Version')}
                      </h4>
                      <p className="text-gray-600 dark:text-gray-400">{selectedPlugin.version}</p>
                    </div>
                    <div>
                      <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                        {t('plugins.author', 'Author')}
                      </h4>
                      <p className="text-gray-600 dark:text-gray-400">{selectedPlugin.author}</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-6 text-sm">
                    <div className="flex items-center gap-2">
                      <Star className="h-5 w-5 text-amber-500 fill-amber-500" />
                      <span className="font-semibold text-gray-900 dark:text-white">
                        {selectedPlugin.rating.toFixed(1)}
                      </span>
                      <span className="text-gray-500 dark:text-gray-400">
                        ({selectedPlugin.ratingCount} {t('plugins.ratings', 'ratings')})
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Download className="h-5 w-5 text-gray-400" />
                      <span className="text-gray-600 dark:text-gray-400">
                        {selectedPlugin.installCount.toLocaleString()} {t('plugins.installs', 'installs')}
                      </span>
                    </div>
                  </div>

                  {/* Code Viewer Section */}
                  {selectedPlugin.pluginCode && (
                    <div className="space-y-3">
                      <button
                        onClick={() => setShowCode(!showCode)}
                        className="flex items-center justify-between w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                      >
                        <span className="font-semibold text-gray-900 dark:text-white">
                          {t('plugins.viewCode', 'View Code')}
                        </span>
                        <ChevronDown
                          className={`h-5 w-5 text-gray-600 dark:text-gray-400 transition-transform ${showCode ? 'rotate-180' : ''}`}
                        />
                      </button>

                      {showCode && (
                        <div className="space-y-3">
                          {/* Platform-only code warnings */}
                          {(() => {
                            const { hasPlatformCode, warnings } = detectPlatformOnlyCode(selectedPlugin.pluginCode || '');
                            return hasPlatformCode ? (
                              <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
                                <div className="flex items-start gap-3">
                                  <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
                                  <div className="flex-1">
                                    <h5 className="font-semibold text-amber-900 dark:text-amber-200 mb-2">
                                      {t('plugins.platformOnlyWarning', 'Platform-Only Features Detected')}
                                    </h5>
                                    <ul className="space-y-1 text-sm text-amber-800 dark:text-amber-300">
                                      {warnings.map((warning, idx) => (
                                        <li key={idx} className="flex items-start gap-2">
                                          <span className="text-amber-600 dark:text-amber-400 mt-0.5">•</span>
                                          <span>{warning}</span>
                                        </li>
                                      ))}
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            ) : null;
                          })()}

                          {/* Code display with syntax highlighting */}
                          <div className="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
                            <SyntaxHighlighter
                              language="javascript"
                              style={vscDarkPlus}
                              customStyle={{
                                margin: 0,
                                borderRadius: 0,
                                fontSize: '0.875rem',
                                maxHeight: '400px'
                              }}
                              showLineNumbers
                            >
                              {selectedPlugin.pluginCode}
                            </SyntaxHighlighter>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </>
              )}
            </div>

            {/* Modal Footer */}
            <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
              <button
                onClick={() => {
                  setShowDetailsModal(false);
                  setSelectedPlugin(null);
                  setShowCode(false);
                }}
                className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-medium"
              >
                {installedTemplateIds.has(selectedPlugin.id) ? t('common.close', 'Close') : t('common.cancel', 'Cancel')}
              </button>
              {installedTemplateIds.has(selectedPlugin.id) ? (
                <button
                  onClick={() => {
                    setShowDetailsModal(false);
                    setSelectedPlugin(null);
                    setShowCode(false);
                    navigate('/plugins/my-plugins');
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium"
                >
                  <CheckCircle className="h-4 w-4" />
                  {t('plugins.viewInstalled', 'View in My Plugins')}
                </button>
              ) : (
                <button
                  onClick={confirmInstall}
                  disabled={installMutation.isPending || isLoadingDetails}
                  className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
                >
                  {installMutation.isPending ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                      {t('plugins.installing', 'Installing...')}
                    </>
                  ) : (
                    <>
                      <Download className="h-4 w-4" />
                      {t('plugins.install', 'Install')}
                    </>
                  )}
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {/* What's Next Modal - shown after successful install */}
      {showWhatsNextModal && selectedPlugin && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div className="bg-white dark:bg-gray-800 rounded-xl max-w-lg w-full shadow-2xl overflow-hidden">
            {/* Success Header */}
            <div className="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-8 text-center">
              <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-10 h-10 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-white mb-2">
                Plugin Installed!
              </h2>
              <p className="text-green-100">
                {selectedPlugin.name} is ready to use
              </p>
            </div>

            {/* What's Next Options */}
            <div className="p-6 space-y-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                What would you like to do?
              </h3>

              {/* Schedule Task Option */}
              <button
                onClick={() => {
                  setShowWhatsNextModal(false);
                  setSelectedPlugin(null);
                  navigate('/tasks');
                }}
                className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors text-left group"
              >
                <div className="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                  <Clock className="w-6 h-6 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-gray-900 dark:text-white">
                    Schedule it
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Run automatically on a schedule (hourly, daily, etc.)
                  </p>
                </div>
                <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
              </button>

              {/* Configure Option */}
              <button
                onClick={() => {
                  setShowWhatsNextModal(false);
                  setSelectedPlugin(null);
                  navigate('/plugins/my-plugins');
                }}
                className="w-full flex items-center gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 dark:hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors text-left group"
              >
                <div className="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                  <Settings className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-gray-900 dark:text-white">
                    Configure settings
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Set up plugin options and customize behavior
                  </p>
                </div>
                <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" />
              </button>

              {/* Done Option */}
              <button
                onClick={() => {
                  setShowWhatsNextModal(false);
                  setSelectedPlugin(null);
                }}
                className="w-full p-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors text-center"
              >
                Done for now
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default PluginMarketplace;