import { useState, useEffect, Suspense } from 'react';
import { Button } from '@/components/ui/button';
import { SegmentedControl } from '@/components/ui/segmented-control';
import { ScreenLoader, LoadingSpinner } from './screen-loader';
import { LazyBotTrafficChart } from '@/lib/load-bot-traffic-chart';
import { trackTimeRangeChanged, trackViewModeChanged } from '../lib/mixpanel';
import { __, sprintf } from '../lib/i18n';

interface BotVisit {
  bot_name: string;
  date: string;
  visits: number;
}

interface BotSummary {
  bot_name: string;
  total_visits: number;
  logo: string;
}

interface BotStatRow {
  bot_name: string;
  impressions: number;
  clicks: number;
  ctr: number;
  trend: number;
}

// Time range options
type TimeRange = '7d' | '30d' | '90d';

const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
  { value: '7d', label: __('Last 7 days', 'llmagnet-llm-txt-generator') },
  { value: '30d', label: __('Last 30 days', 'llmagnet-llm-txt-generator') },
  { value: '90d', label: __('Last 90 days', 'llmagnet-llm-txt-generator') },
];

interface AnalyticsProps {
  apiRoot: string;
  apiNamespace: string;
}

export function Analytics({ apiRoot, apiNamespace }: AnalyticsProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [botVisits, setBotVisits] = useState<BotVisit[]>([]);
  const [botSummaries, setBotSummaries] = useState<BotSummary[]>([]);
  const [botStatsTable, setBotStatsTable] = useState<BotStatRow[]>([]);
  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table'); // Default to table
  const [timeRange, setTimeRange] = useState<TimeRange>('30d');

  // Bot logo mapping
  const botLogos: Record<string, string> = {
    'ChatGPT': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/chatgpt.svg`,
    'Claude': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/claude.svg`,
    'Gemini': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/gemini.svg`,
    'Bing': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/bing.svg`,
    'Perplexity': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/perplexity.svg`,
    'Llama': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/llama.svg`,
    'Mistral': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/mistral.svg`,
    'Grok': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/grok.svg`,
    'DeepSeek': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/deepseek.svg`,
    'Other LLM': `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/other-llm.svg`,
  };

  // Default logo for unknown bots
  const defaultLogo = `${window.llmagnetAnalyticsData.pluginUrl}assets/logos/other-llm.svg`;

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    if (!isLoading && botVisits.length > 0) {
      prepareSummaryData();
      fetchBotStatsTable();
    }
  }, [isLoading, botVisits]);

  // Placeholder data when API returns empty (must run before any conditional return — Rules of Hooks)
  useEffect(() => {
    if (botVisits.length === 0 && !isLoading && !error) {
      const placeholderData = [
        { bot_name: 'ChatGPT', date: '2025-09-01', visits: 0 },
        { bot_name: 'Claude', date: '2025-09-01', visits: 0 },
        { bot_name: 'Perplexity', date: '2025-09-01', visits: 0 },
        { bot_name: 'Gemini', date: '2025-09-01', visits: 0 },
        { bot_name: 'Grok', date: '2025-09-01', visits: 0 },
        { bot_name: 'DeepSeek', date: '2025-09-01', visits: 0 },
      ];
      setBotVisits(placeholderData);

      const placeholderSummaries = [
        { bot_name: 'ChatGPT', total_visits: 0, logo: botLogos['ChatGPT'] || defaultLogo },
        { bot_name: 'Claude', total_visits: 0, logo: botLogos['Claude'] || defaultLogo },
        { bot_name: 'Perplexity', total_visits: 0, logo: botLogos['Perplexity'] || defaultLogo },
        { bot_name: 'Gemini', total_visits: 0, logo: botLogos['Gemini'] || defaultLogo },
        { bot_name: 'Grok', total_visits: 0, logo: botLogos['Grok'] || defaultLogo },
        { bot_name: 'DeepSeek', total_visits: 0, logo: botLogos['DeepSeek'] || defaultLogo },
      ];
      setBotSummaries(placeholderSummaries);
    }
  }, [isLoading, error, botVisits.length]);

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const response = await fetch(`${apiRoot}${apiNamespace}/stats`, {
        headers: {
          'X-WP-Nonce': window.llmagnetAnalyticsData.nonce,
        },
      });

      if (!response.ok) {
        throw new Error(`Error fetching data: ${response.status}`);
      }

      const data = await response.json();
      setBotVisits(data);
      setError(null);
    } catch (err) {
      console.error('Error fetching analytics data:', err);
      setError(__('Failed to load analytics data. Please try again later.', 'llmagnet-llm-txt-generator'));
    } finally {
      setIsLoading(false);
    }
  };

  const prepareSummaryData = () => {
    // Group by bot name and sum visits
    const botMap = new Map<string, number>();
    
    botVisits.forEach(visit => {
      const currentTotal = botMap.get(visit.bot_name) || 0;
      botMap.set(visit.bot_name, currentTotal + parseInt(visit.visits.toString()));
    });
    
    // Convert to array of summaries
    const summaries: BotSummary[] = Array.from(botMap.entries()).map(([bot_name, total_visits]) => ({
      bot_name,
      total_visits,
      logo: botLogos[bot_name] || defaultLogo,
    }));
    
    // Sort by total visits descending
    summaries.sort((a, b) => b.total_visits - a.total_visits);
    
    setBotSummaries(summaries);
  };

  const fetchBotStatsTable = async () => {
    try {
      const response = await fetch(`${apiRoot}${apiNamespace}/bot-stats-table`, {
        headers: {
          'X-WP-Nonce': window.llmagnetAnalyticsData.nonce,
        },
      });

      if (!response.ok) {
        throw new Error(`Error fetching bot stats: ${response.status}`);
      }

      const data = await response.json();
      setBotStatsTable(data);
    } catch (err) {
      console.error('Error fetching bot stats table:', err);
    }
  };

  if (isLoading) {
    return <ScreenLoader variant="section" />;
  }

  if (error) {
    return (
      <div className="p-4 text-red-600">
        <p>{error}</p>
        <Button onClick={fetchData} className="mt-2">{__('Try Again', 'llmagnet-llm-txt-generator')}</Button>
      </div>
    );
  }

  // Always show the UI, even if there's no data
  if (botVisits.length === 0 && !isLoading) {
    // If we get here, the placeholder data wasn't set, so show a message
    console.log('No bot visits and not loading - showing placeholder message');
    return (
      <div className="p-4 bg-yellow-50 border border-yellow-200 rounded">
        <h3 className="font-bold text-lg">{__('No Bot Visits Yet', 'llmagnet-llm-txt-generator')}</h3>
        <p>{__('No LLM bot visits have been recorded yet.', 'llmagnet-llm-txt-generator')}</p>
        <p className="text-sm text-gray-500 mt-2">
          {__('Bot visits will be automatically logged when LLM crawlers access your site.', 'llmagnet-llm-txt-generator')}
        </p>
      </div>
    );
  }

  return (
    <div className="analytics-container" style={{ maxWidth: '1200px', margin: 'auto', padding: '0 1.5rem' }}>
      {/* Header with time range selector */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-2xl font-bold mb-2">{__('Bot Analytics', 'llmagnet-llm-txt-generator')}</h2>
          <p className="text-gray-600">
            {__('Track LLM bot visits and engagement with your content.', 'llmagnet-llm-txt-generator')}
          </p>
        </div>
        
        {/* Time Range Selector */}
        <div className="flex items-center gap-2">
          <SegmentedControl
            options={TIME_RANGE_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
            value={timeRange}
            onChange={(v) => { setTimeRange(v); trackTimeRangeChanged(v, 'analytics'); }}
            size="sm"
          />
        </div>
      </div>

      {/* Bot Traffic Chart */}
      <div className="bg-white border border-gray-200 shadow-sm rounded-lg p-6 mb-8">
        <Suspense fallback={<div className="min-h-[320px] flex items-center justify-center"><LoadingSpinner /></div>}>
          <LazyBotTrafficChart 
            apiRoot={apiRoot}
            apiNamespace={apiNamespace}
            timeRange={timeRange}
            renderHeader={({ botFilterIcons }) => (
              <>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <h3 className="text-xl font-semibold text-gray-900">{__('Bot Traffic', 'llmagnet-llm-txt-generator')}</h3>
                    <span className="text-sm text-gray-500">
                      {TIME_RANGE_OPTIONS.find(o => o.value === timeRange)?.label}
                    </span>
                  </div>
                  {botFilterIcons}
                </div>
              </>
            )}
          />
        </Suspense>
      </div>

      <h2 className="text-xl font-bold mb-4">{__('Bot Summaries', 'llmagnet-llm-txt-generator')}</h2>
      
      {/* View Mode Toggle */}
      <div className="mb-4">
        <SegmentedControl
          options={[
            { value: 'table', label: __('Table View', 'llmagnet-llm-txt-generator') },
            { value: 'cards', label: __('Card View', 'llmagnet-llm-txt-generator') },
          ]}
          value={viewMode}
          onChange={(v) => { setViewMode(v); trackViewModeChanged(v); }}
          size="sm"
        />
      </div>

      {/* Table View */}
      {viewMode === 'table' && (
        <div className="bg-white rounded-lg shadow overflow-hidden mb-8">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 border-b border-gray-200">
                  <th scope="col" className="px-6 py-3 text-left text-sm font-semibold text-gray-700">{__('LLM', 'llmagnet-llm-txt-generator')}</th>
                  <th scope="col" className="px-6 py-3 text-right text-sm font-semibold text-gray-700">{__('Impressions', 'llmagnet-llm-txt-generator')}</th>
                  <th scope="col" className="px-6 py-3 text-right text-sm font-semibold text-gray-700">{__('Clicks', 'llmagnet-llm-txt-generator')}</th>
                  <th scope="col" className="px-6 py-3 text-right text-sm font-semibold text-gray-700">{__('CTR', 'llmagnet-llm-txt-generator')}</th>
                  <th scope="col" className="px-6 py-3 text-center text-sm font-semibold text-gray-700">{__('Trend', 'llmagnet-llm-txt-generator')}</th>
                </tr>
              </thead>
              <tbody>
                {botStatsTable.length > 0 ? (
                  botStatsTable.map((row) => (
                    <tr key={row.bot_name} className="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                      <td className="px-6 py-4 flex items-center gap-3">
                        <img
                          src={botLogos[row.bot_name] || defaultLogo}
                          alt={row.bot_name}
                          className="h-8 w-8 object-contain rounded-full"
                          style={{ border: '0.5px solid #e8e3de' }}
                          onError={(e) => {
                            (e.target as HTMLImageElement).src = defaultLogo;
                          }}
                        />
                        <span className="font-medium text-gray-900">{row.bot_name}</span>
                      </td>
                      <td className="px-6 py-4 text-right text-gray-700">{row.impressions.toLocaleString()}</td>
                      <td className="px-6 py-4 text-right text-gray-700">{row.clicks.toLocaleString()}</td>
                      <td className="px-6 py-4 text-right text-gray-700">{row.ctr.toFixed(2)}%</td>
                      <td className="px-6 py-4 text-center">
                        <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
                          row.trend > 0
                            ? 'bg-green-100 text-green-700'
                            : row.trend < 0
                            ? 'bg-red-100 text-red-700'
                            : 'bg-gray-100 text-gray-700'
                        }`}>
                          {row.trend > 0 ? '📈' : row.trend < 0 ? '📉' : '→'} {Math.abs(row.trend).toFixed(1)}%
                        </span>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
                      {__('No bot data available yet', 'llmagnet-llm-txt-generator')}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Card View */}
      {viewMode === 'cards' && (
        <div className="bot-summaries grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
          {botSummaries.map((bot) => (
            <div key={bot.bot_name} className="overflow-hidden bg-white p-4 rounded-lg shadow">
              <div className="pb-2">
                <h3 className="text-lg font-bold">{bot.bot_name}</h3>
                <p className="text-sm text-gray-500">{sprintf(__('Total visits: %s', 'llmagnet-llm-txt-generator'), bot.total_visits)}</p>
              </div>
              <div className="pb-2">
                <div className="bot-logo flex justify-center">
                  <img 
                    src={bot.logo} 
                    alt={`${bot.bot_name} logo`} 
                    className="h-16 w-16 object-contain"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = defaultLogo;
                    }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

    </div>
  );
}