import { useState, useEffect } from 'react';
import { __ } from '../lib/i18n';
import { formatCompactNumber } from '../lib/utils';
import chatgptIcon from '../assets/images/chatgpt-icon.svg';
import claudeIcon from '../assets/images/claude-icon.svg';
import googleIcon from '../assets/images/google-icon.svg';
import grokIcon from '../assets/images/grok-icon.svg';

interface BotMention {
  bot_name: string;
  mentions: number;
  previousMentions: number;
  change: number; // percentage change
  percentage?: number;
}

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

// Bot logos mapping using local SVG assets
const botLogos: Record<string, string> = {
  'ChatGPT': chatgptIcon,
  'Gemini': googleIcon,
  'Grok': grokIcon,
  'Claude': claudeIcon,
};

// Component to render bot logo
const BotLogo = ({ botName }: { botName: string }) => {
  const logoUrl = botLogos[botName] || botLogos['ChatGPT'];
  const [useSvg, setUseSvg] = useState(false);
  
  const renderSvgLogo = () => {
    switch (botName) {
      case 'ChatGPT':
        return (
          <svg width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-[20.6px] w-[21.1px]">
            <rect width="36" height="36" rx="8" fill="#10a37f"/>
            <path d="M18 10C13.5817 10 10 13.5817 10 18C10 22.4183 13.5817 26 18 26C22.4183 26 26 22.4183 26 18C26 13.5817 22.4183 10 18 10ZM18 24C14.6863 24 12 21.3137 12 18C12 14.6863 14.6863 12 18 12C21.3137 12 24 14.6863 24 18C24 21.3137 21.3137 24 18 24Z" fill="white"/>
            <path d="M15 18C15 16.3431 16.3431 15 18 15C19.6569 15 21 16.3431 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18Z" fill="white"/>
          </svg>
        );
      case 'Gemini':
        return (
          <svg width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-[20.6px] w-[21.1px]">
            <rect width="36" height="36" rx="8" fill="#4285f4"/>
            <path d="M18 12L22 20H14L18 12Z" fill="white"/>
            <path d="M18 24L14 16H22L18 24Z" fill="white"/>
          </svg>
        );
      case 'Grok':
        return (
          <svg width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-[20.6px] w-[21.1px]">
            <rect width="36" height="36" rx="8" fill="#000000"/>
            <circle cx="18" cy="18" r="10" stroke="white" strokeWidth="2" fill="none"/>
            <path d="M10 10L26 26M26 10L10 26" stroke="white" strokeWidth="2" strokeLinecap="round"/>
          </svg>
        );
      case 'Claude':
        return (
          <svg width="40" height="40" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-[20.6px] w-[21.1px]">
            <rect width="36" height="36" rx="8" fill="#ff6b35"/>
            <circle cx="18" cy="18" r="8" fill="white"/>
            <circle cx="18" cy="18" r="4" fill="#ff6b35"/>
          </svg>
        );
      default:
        return null;
    }
  };

  if (useSvg) {
    return (
      <div className="h-[40px] w-[40px] flex-shrink-0">
        {renderSvgLogo()}
      </div>
    );
  }

  return (
    <img
      src={logoUrl}
      alt={botName}
      className="h-[40px] w-[40px] rounded object-contain"
      style={{ border: '0.5px solid #e8e3de' }}
      onError={() => setUseSvg(true)}
    />
  );
};

export function MentionsOverview({ apiRoot, apiNamespace }: MentionsOverviewProps) {
  const [mentions, setMentions] = useState<BotMention[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState<string | null>(null);

  useEffect(() => {
    const fetchMentions = async () => {
      try {
        setIsLoading(true);
        setFetchError(null);

        // Check for test mode flag in localStorage
        const isTestMode = typeof window !== 'undefined' && localStorage.getItem('llmagnet_test') === 'true';
        
        if (isTestMode) {
          // Generate dummy data for testing
          const dummyData: BotMention[] = [
            {
              bot_name: 'ChatGPT',
              mentions: 4482,
              previousMentions: 4075,
              change: 10, // 10% increase
              percentage: 38, // 38% of total
            },
            {
              bot_name: 'Gemini',
              mentions: 3242,
              previousMentions: 2947,
              change: 10, // 10% increase
              percentage: 27, // 27% of total
            },
            {
              bot_name: 'Grok',
              mentions: 2587,
              previousMentions: 2852,
              change: -9, // 9% decrease
              percentage: -22, // 22% of total
            },
            {
              bot_name: 'Claude',
              mentions: 1832,
              previousMentions: 1665,
              change: 0, // 10% increase
              percentage: 0, // 15% of total
            },
          ];

          // Sort by mentions descending
          dummyData.sort((a, b) => b.mentions - a.mentions);
          
          setMentions(dummyData);
          setIsLoading(false);
          return;
        }

        // Calculate date range for last 30 days (current period)
        const endDate = new Date();
        const startDate = new Date();
        startDate.setDate(endDate.getDate() - 30);

        // Calculate date range for previous 30 days (comparison period)
        const previousEndDate = new Date(startDate);
        previousEndDate.setDate(previousEndDate.getDate() - 1); // Day before current period starts
        const previousStartDate = new Date(previousEndDate);
        previousStartDate.setDate(previousStartDate.getDate() - 30);

        // Format dates in local time (not UTC) to avoid timezone issues
        const formatLocalDate = (date: Date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`;
        };
        
        const startDateStr = formatLocalDate(startDate);
        const endDateStr = formatLocalDate(endDate);
        const previousStartDateStr = formatLocalDate(previousStartDate);
        const previousEndDateStr = formatLocalDate(previousEndDate);

        // Fetch bot visits for current period (last 30 days)
        // Use the same endpoint format as dashboard-analytics
        const currentEndpoint = `${apiRoot}${apiNamespace}/stats?start_date=${encodeURIComponent(startDateStr)}&end_date=${encodeURIComponent(endDateStr)}`;
        const currentResponse = await fetch(currentEndpoint, {
          headers: {
            'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
          },
          credentials: 'same-origin',
        });

        // Fetch bot visits for previous period (30 days before current)
        const previousEndpoint = `${apiRoot}${apiNamespace}/stats?start_date=${encodeURIComponent(previousStartDateStr)}&end_date=${encodeURIComponent(previousEndDateStr)}`;
        const previousResponse = await fetch(previousEndpoint, {
          headers: {
            'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
          },
          credentials: 'same-origin',
        });

        // Process current period data
        let currentData: Array<{ bot_name: string; visits: number }> = [];
        if (currentResponse.ok) {
          const data = await currentResponse.json();
          if (data && Array.isArray(data)) {
            currentData = data;
          }
        } else {
          console.error('Failed to fetch current period data:', currentResponse.status);
        }

        // Process previous period data
        let previousData: Array<{ bot_name: string; visits: number }> = [];
        if (previousResponse.ok) {
          const data = await previousResponse.json();
          if (data && Array.isArray(data)) {
            previousData = data;
          }
        } else {
          console.error('Failed to fetch previous period data:', previousResponse.status);
        }

        // If both requests failed, set error but still show cards
        if (!currentResponse.ok && !previousResponse.ok) {
          setFetchError(__('Error fetching data', 'llmagnet-llm-txt-generator'));
        }

        // Process the data to get total mentions per bot for current period
        const botCurrentMap: Record<string, number> = {};
        if (currentData && Array.isArray(currentData)) {
          currentData.forEach((visit: { bot_name: string; visits: number | string; total_visits?: number | string }) => {
            if (visit.bot_name) {
              // Ensure we're adding numbers, not concatenating strings
              const visitCount = Number(visit.visits) || Number(visit.total_visits) || 0;
              botCurrentMap[visit.bot_name] = (botCurrentMap[visit.bot_name] || 0) + visitCount;
            }
          });
        }

        // Process the data to get total mentions per bot for previous period
        const botPreviousMap: Record<string, number> = {};
        if (previousData && Array.isArray(previousData)) {
          previousData.forEach((visit: { bot_name: string; visits: number | string; total_visits?: number | string }) => {
            if (visit.bot_name) {
              // Ensure we're adding numbers, not concatenating strings
              const visitCount = Number(visit.visits) || Number(visit.total_visits) || 0;
              botPreviousMap[visit.bot_name] = (botPreviousMap[visit.bot_name] || 0) + visitCount;
            }
          });
        }

        // Convert to array and filter for the 4 main bots
        const mainBots = ['ChatGPT', 'Gemini', 'Grok', 'Claude'];
        const totalMentions = Object.values(botCurrentMap).reduce((sum, count) => sum + count, 0);

        const mentionsData: BotMention[] = mainBots.map(botName => {
          const currentCount = botCurrentMap[botName] || 0;
          const previousCount = botPreviousMap[botName] || 0;
          
          // Calculate percentage change
          let change = 0;
          if (previousCount > 0) {
            change = Math.round(((currentCount - previousCount) / previousCount) * 100);
          } else if (currentCount > 0) {
            change = 100; // New data, 100% increase
          }

          return {
            bot_name: botName,
            mentions: currentCount,
            previousMentions: previousCount,
            change: change,
            percentage: totalMentions > 0 ? Math.round((currentCount / totalMentions) * 100) : 0,
          };
        });

        mentionsData.sort((a, b) => b.mentions - a.mentions);

        setMentions(mentionsData);
      } catch (err) {
        console.error('Error fetching mentions:', err);
        setFetchError(__('Error fetching data', 'llmagnet-llm-txt-generator'));
        // Set default empty data - always show cards
        setMentions(
          ['ChatGPT', 'Gemini', 'Grok', 'Claude'].map((botName) => ({
            bot_name: botName,
            mentions: 0,
            previousMentions: 0,
            change: 0,
            percentage: 0,
          }))
        );
      } finally {
        setIsLoading(false);
      }
    };

    fetchMentions();
  }, [apiRoot, apiNamespace]);

  if (isLoading) {
    return (
      <div className="bg-white border border-gray-200 shadow-sm p-6 ">
        <h3 className="text-lg font-medium mb-4">{__('Mentions in the last 30 days', 'llmagnet-llm-txt-generator')}</h3>
        <div className="flex gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="flex-1 bg-gray-100 rounded-lg h-24 animate-pulse" />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white border border-gray-200 shadow-sm p-6 ">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-xl font-semibold text-gray-900 m-0">
            {__('Overview', 'llmagnet-llm-txt-generator')}
          </h3>
          <p className="text-sm text-gray-500 m-0" style={{ fontFamily: 'Satoshi, sans-serif' }}>
          {__('Mentions in the last 30 days', 'llmagnet-llm-txt-generator')}
          </p>
        </div>
        {fetchError && (
          <span className="text-xs text-red-600 font-medium" style={{ fontFamily: 'Satoshi, sans-serif' }}>
            {fetchError}
          </span>
        )}
      </div>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {mentions.map((mention) => (
          <div
            key={mention.bot_name}
            className="w-full h-[133.8px] relative rounded-[17.27px] overflow-hidden flex items-start flex-wrap content-start pt-[20.5px] pb-[25.9px] pl-[22.7px] pr-[15.1px] box-border gap-x-[47.5px] gap-y-[19px] text-left text-[17.27px] text-gray"
            style={{ backgroundColor: '#F7F6F7', fontFamily: 'Satoshi, sans-serif' }}
          >
            {/* Top section: Logo and Bot Name */}
            <div className="h-[33.5px] flex items-center gap-[10.8px]">
              {/* Logo */}
              <BotLogo botName={mention.bot_name} />
              {/* Bot Name */}
              <span className="w-[183.8px] relative text-[17.27px] leading-[23.85px] capitalize inline-block font-satoshi text-left font-medium text-gray">
                {mention.bot_name}
              </span>
            </div>

            {/* Bottom section: Mention Count and Percentage Badge */}
            <div className="min-h-[24.8px] w-full relative text-left text-[35.61px] text-gray font-satoshi flex items-center justify-between gap-2">
              {/* Mention Count */}
              <div
                className="leading-[23.85px] capitalize font-medium inline-block flex-shrink-0 text-[clamp(24px,35.61px,35.61px)]"
                // Exact figure on hover, but only once it has been shortened.
                title={mention.mentions >= 1000 ? mention.mentions.toLocaleString() : undefined}
              >
                {formatCompactNumber(mention.mentions)}
              </div>

              {/* Percentage Indicator - Always show, even if 0 */}
              <div className={`h-[23.7px] flex flex-col items-center justify-center py-[2.2px] px-[10.8px] box-border flex-shrink-0 ${
                mention.percentage !== undefined && mention.percentage > 0 
                  ? 'rounded-[10790.8px]' 
                  : mention.percentage !== undefined && mention.percentage < 0
                  ? 'rounded-[10790.8px]'
                  : ''
              }`} style={{ 
                minWidth: '45.4px',
                backgroundColor: mention.percentage !== undefined && mention.percentage > 0 
                  ? '#D1FAE5' 
                  : mention.percentage !== undefined && mention.percentage < 0
                  ? '#FEE2E2'
                  : 'transparent'
              }}>
                <div className="flex items-center justify-center shrink-0">
                  <div className={`relative font-semibold text-[15.11px] whitespace-nowrap`} style={{ 
                    fontFamily: 'Inter, sans-serif',
                    color: mention.percentage !== undefined && mention.percentage > 0 
                      ? '#2E8B57' 
                      : mention.percentage !== undefined && mention.percentage < 0
                      ? '#DC2626'
                      : '#6B7280'
                  }}>
                    {mention.percentage !== undefined ? Math.abs(mention.percentage) : 0}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}