/**
 * Bot Analytics summary table (extracted unchanged from
 * dashboard-analytics.tsx — P2-2.1). Pure presentational component.
 */
import { getDefaultBotLogo } from './constants';
import type { BotStat, BotSummary } from './constants';
import { __, sprintf } from '../../lib/i18n';

interface BotSummaryTableProps {
  botSummaries: BotSummary[];
  botStats: BotStat[];
  showFullStatsLink: boolean;
}

export function BotSummaryTable({ botSummaries, botStats, showFullStatsLink }: BotSummaryTableProps) {
  return (
    <div className="bg-white shadow border border-gray-200 overflow-hidden">
      {/* Table Header */}
      <div className="px-6 py-4 flex items-center justify-between">
        <h3 className="text-xl font-semibold text-gray-900">{__('Bot Analytics', 'llmagnet-llm-txt-generator')}</h3>
        {showFullStatsLink && (
          <a
            href="/wp-admin/admin.php?page=llmagnet-ai-seo-bot-analytics"
            className="text-sm text-purple-600 hover:text-purple-700 font-medium"
          >
            {__('View Full Statistics →', 'llmagnet-llm-txt-generator')}
          </a>
        )}
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="llm-bot-summary-table w-full border-collapse">
          <thead>
            <tr className="border-b border-gray-200">
              <th scope="col" className="py-3 px-6 text-left text-sm font-medium text-gray-500">{__('Bot', 'llmagnet-llm-txt-generator')}</th>
              <th scope="col" className="py-3 px-3 text-right text-sm font-medium text-gray-500">{__('Total Visits', 'llmagnet-llm-txt-generator')}</th>
              <th scope="col" className="py-3 px-3 text-right text-sm font-medium text-gray-500">{__('Clicks', 'llmagnet-llm-txt-generator')}</th>
              <th scope="col" className="py-3 px-3 text-right text-sm font-medium text-gray-500">{__('CTR', 'llmagnet-llm-txt-generator')}</th>
              <th scope="col" className="py-3 px-3 text-right text-sm font-medium text-gray-500">{__('Trend', 'llmagnet-llm-txt-generator')}</th>
            </tr>
          </thead>
          <tbody>
            {botSummaries.map((bot) => {
              // Find corresponding bot stats for clicks data
              const botStat = botStats.find(stat => stat.bot_name === bot.bot_name);
              // Calculate trend value - use botStat trend or percentage_change from bot
              const trendValue = botStat?.trend ?? bot.percentage_change ?? 0;

              return (
                <tr 
                  key={bot.bot_name} 
                  className="hover:bg-gray-50 transition-colors"
                >
                  <td className="py-4 px-6">
                    <div className="flex items-center gap-3">
                      <img 
                        src={bot.logo} 
                        alt={sprintf(
                          /* translators: %s: bot name. */
                          __('%s logo', 'llmagnet-llm-txt-generator'),
                          bot.bot_name
                        )}
                        className="h-8 w-8 object-contain rounded-full"
                        style={{ border: '0.5px solid #e8e3de' }}
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = getDefaultBotLogo();
                          console.log(`Failed to load logo for ${bot.bot_name}, using default`);
                        }}
                        loading="lazy"
                      />
                      <span className="text-sm font-medium text-gray-900">{bot.bot_name}</span>
                    </div>
                  </td>
                  <td className="py-4 px-3 text-sm text-gray-700 text-right">{Number(bot.total_visits).toLocaleString()}</td>
                  <td className="py-4 px-3 text-sm text-gray-700 text-right">{(botStat?.clicks || 0).toLocaleString()}</td>
                  <td className="py-4 px-3 text-sm text-gray-700 text-right">{(botStat?.ctr ?? 0).toFixed(0)}%</td>
                  <td className="py-4 px-3 text-right">
                    <span 
                      className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold"
                      style={
                        trendValue > 0 
                          ? { backgroundColor: '#BEF3CC', color: '#209067' }
                          : trendValue < 0 
                            ? { backgroundColor: '#F3C0BE', color: '#902F20' }
                            : { backgroundColor: '#E5E7EB', color: '#6B7280' }
                      }
                    >
                      {trendValue > 0 ? '+' : ''}{Math.abs(trendValue).toFixed(0)}%
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}