import React from 'react';

import { strategies } from './data/strategies';

const groupedStrategies = [
  'Static (Single-Turn)',
  'Dynamic (Single-Turn)',
  'Multi-turn',
  'Regression',
  'Custom',
].map((category) => ({
  category,
  strategies: strategies
    .filter((strategy) => strategy.category === category)
    .sort((a, b) => a.displayName.localeCompare(b.displayName)),
}));

const RecommendedBadge = () => (
  <span
    style={{
      backgroundColor: 'var(--ifm-color-primary)',
      color: 'white',
      padding: '2px 6px',
      borderRadius: '4px',
      fontSize: '0.75em',
      marginLeft: '8px',
      verticalAlign: 'middle',
    }}
  >
    Recommended
  </span>
);

interface StrategyTableProps {
  shouldRenderCategory?: boolean;
  shouldRenderDescription?: boolean;
  shouldRenderCost?: boolean;
  shouldRenderAsrIncrease?: boolean;
  showRemoteStatus?: boolean;
}

const StrategyTable = ({
  shouldRenderCategory = true,
  shouldRenderDescription = true,
  shouldRenderCost = true,
  shouldRenderAsrIncrease = true,
  showRemoteStatus = false,
}: StrategyTableProps) => {
  return (
    <div className="strategy-table-wrapper">
      <table className="strategy-table">
        <thead>
          <tr>
            {shouldRenderCategory && (
              <th style={{ verticalAlign: 'top', textAlign: 'left' }}>Category</th>
            )}
            <th>Strategy</th>
            {shouldRenderDescription && <th>Description</th>}
            <th>Details</th>
            {shouldRenderCost && <th>Cost</th>}
            {shouldRenderAsrIncrease && (
              <th>
                ASR Increase
                <sup
                  style={{ cursor: 'help' }}
                  title="Relative increase in Attack Success Rate compared to running the same test without any strategy"
                >
                  *
                </sup>
              </th>
            )}
          </tr>
        </thead>
        <tbody>
          {groupedStrategies.map(({ category, strategies: categoryStrategies }) => {
            return (
              <React.Fragment key={category}>
                {categoryStrategies.map((strategy, index) => (
                  <tr key={strategy.strategy} className={index % 2 === 0 ? 'even' : 'odd'}>
                    {index === 0 && shouldRenderCategory && (
                      <td
                        rowSpan={categoryStrategies.length}
                        style={{ verticalAlign: 'top' }}
                        className="category-cell"
                      >
                        {category}
                      </td>
                    )}
                    <td className="strategy-cell">
                      <a href={strategy.link} className="strategy-link">
                        {strategy.displayName}
                        {strategy.recommended && <RecommendedBadge />}
                      </a>
                    </td>
                    {shouldRenderDescription && (
                      <td>
                        {strategy.description}
                        {showRemoteStatus && strategy.isRemote && (
                          <span title="Uses remote inference"> 🌐</span>
                        )}
                      </td>
                    )}
                    <td className="details-cell">{strategy.longDescription}</td>
                    {shouldRenderCost && <td className="metric-cell">{strategy.cost}</td>}
                    {shouldRenderAsrIncrease && (
                      <td className="metric-cell">{strategy.asrIncrease}</td>
                    )}
                  </tr>
                ))}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
      {shouldRenderAsrIncrease && (
        <div style={{ fontSize: '0.8em', marginTop: '8px', color: 'var(--ifm-color-gray-600)' }}>
          * ASR Increase: Relative increase in Attack Success Rate compared to running the same test
          without any strategy
        </div>
      )}
    </div>
  );
};

export default StrategyTable;