import { useState, useEffect } from 'react';
import { __ } from '../lib/i18n';
import { ScreenLoader } from './screen-loader';
import { readPageStatsResponse } from '@/lib/utils';
import { defaultBotLogo, getBotLogos } from '../lib/bot-logos';

interface PageStat {
  page_path: string;
  page_title: string;
  page_url: string;
  bot_visits: number;
  clicks: number;
  ctr: number;
  bots: string[];
}

interface PagesOverviewProps {
  apiRoot: string;
  apiNamespace: string;
  pluginUrl: string;
}

export function PagesOverview({ apiRoot, apiNamespace }: PagesOverviewProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [pageStats, setPageStats] = useState<PageStat[]>([]);

  const botLogos = getBotLogos();
  const defaultLogo = defaultBotLogo();

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

  const fetchPageStats = async () => {
    try {
      setIsLoading(true);
      
      if (!(window as any).wpApiSettings || !(window as any).wpApiSettings.root) {
        throw new Error('WordPress REST API settings not available.');
      }
      
      const apiUrl = `${apiRoot}${apiNamespace}/page-stats`;
      const response = await fetch(apiUrl, {
        headers: {
          'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
        },
        credentials: 'same-origin',
      });

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

      const data = await response.json();
      
      if (data.error) {
        throw new Error(data.message || 'API returned an error');
      }
      
      // This card is a top-5 widget.
      const statsArray = readPageStatsResponse<PageStat>(data).pages.slice(0, 5);
      setPageStats(statsArray);
    } catch (err: any) {
      console.error('Error fetching page stats:', err);
      // Don't show error, just show empty state
      setPageStats([]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="bg-white border border-gray-200 shadow-sm p-6" style={{ position: 'relative' }}>
      <div className="flex items-center gap-3 mb-4">
        <h3 className="text-xl font-semibold text-gray-900">{__('Top Pages', 'llmagnet-llm-txt-generator')}</h3>
        <a
          href="/wp-admin/admin.php?page=llmagnet-ai-seo-pages"
          className="text-sm text-gray-600 hover:text-gray-800 font-medium underline"
        >
          {__('View all', 'llmagnet-llm-txt-generator')}
        </a>
      </div>

      {isLoading ? (
        <ScreenLoader variant="section" />
      ) : pageStats.length === 0 ? (
        <div className="py-8 text-center text-gray-500">
          <p className="text-sm">{__('No page traffic yet.', 'llmagnet-llm-txt-generator')}</p>
          <p className="text-xs mt-1">{__('Bot visits will appear here once crawlers access your pages.', 'llmagnet-llm-txt-generator')}</p>
        </div>
      ) : (
        <div style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
          <table className="w-full bg-white table-fixed" style={{ borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th scope="col" className="py-2 px-4 text-left text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '55%' }}>{__('Pages', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-2 pl-2 pr-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '15%' }}>{__('Visit', 'llmagnet-llm-txt-generator')}</th>
                <th scope="col" className="py-2 pl-4 pr-4 text-right text-sm font-semibold text-gray-700" style={{ borderBottom: '1px solid #F2D7F2', width: '30%' }}>{__('Models', 'llmagnet-llm-txt-generator')}</th>
              </tr>
            </thead>
            <tbody>
              {pageStats.map((page, index) => {
                // Truncate title and path to ~50 characters
                const truncateText = (text: string, maxLength: number = 50) => {
                  if (!text) return '';
                  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
                };
                
                return (
                <tr key={`${page.page_path}-${index}`} className="hover:bg-gray-50">
                  <td className="py-2 px-4 text-sm text-gray-800" style={{ borderBottom: '1px solid #F2D7F2', width: '55%', maxWidth: 0 }}>
                    <div style={{ overflow: 'hidden' }}>
                      <div className="font-medium text-gray-900" title={page.page_title} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {truncateText(page.page_title, 50)}
                      </div>
                      <div className="text-xs text-gray-500" title={page.page_url} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {page.page_path === '/' ? (
                          <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
                            {__('Site Homepage', 'llmagnet-llm-txt-generator')}
                          </span>
                        ) : truncateText(page.page_path, 50)}
                      </div>
                    </div>
                  </td>
                  <td className="py-2 pl-2 pr-4 text-sm text-gray-800 text-right" style={{ borderBottom: '1px solid #F2D7F2' }}>{page.bot_visits.toLocaleString()}</td>
                  <td className="py-2 pl-4 pr-4 text-sm text-gray-800 text-right" style={{ borderBottom: '1px solid #F2D7F2' }}>
                    <div className="flex items-center justify-end">
                      {page.bots.slice(0, 5).map((botName, botIndex) => {
                        const logoUrl = botLogos[botName] || defaultLogo;
                        return (
                          <img
                            key={`${botName}-${botIndex}`}
                            src={logoUrl}
                            alt={botName}
                            className="h-6 w-6 rounded-full object-cover cursor-pointer"
                            title={botName}
                            loading="lazy"
                            style={{ 
                              marginLeft: botIndex === 0 ? 0 : '-6px',
                              zIndex: botIndex,
                              transition: 'transform 0.3s ease-in-out',
                              border: '0.5px solid #e8e3de',
                            }}
                            onMouseEnter={(e) => {
                              (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
                              (e.currentTarget as HTMLElement).style.zIndex = '10';
                            }}
                            onMouseLeave={(e) => {
                              (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
                              (e.currentTarget as HTMLElement).style.zIndex = String(botIndex);
                            }}
                            onError={(e) => {
                              const target = e.target as HTMLImageElement;
                              if (target.src !== defaultLogo) {
                                target.src = defaultLogo;
                              }
                            }}
                          />
                        );
                      })}
                      {page.bots.length > 5 && (
                        <div 
                          className="flex items-center justify-center h-6 w-6 rounded-full bg-gray-100 border-2 border-white text-xs font-medium text-gray-600 cursor-pointer"
                          style={{ 
                            marginLeft: '-6px',
                            zIndex: 5,
                            transition: 'transform 0.3s ease-in-out',
                          }}
                          onMouseEnter={(e) => {
                            (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
                            (e.currentTarget as HTMLElement).style.zIndex = '10';
                          }}
                          onMouseLeave={(e) => {
                            (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
                            (e.currentTarget as HTMLElement).style.zIndex = '5';
                          }}
                        >
                          +{page.bots.length - 5}
                        </div>
                      )}
                    </div>
                  </td>
                </tr>
              );
              })}
            </tbody>
          </table>
          
        </div>
      )}
      
      
    </div>
  );
}