src/components/LotomaniaGrid.tsx

import React from 'react';

interface LotomaniaGridProps {
  markedColumns: number[];
  showNumbers?: boolean;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

const LotomaniaGrid: React.FC<LotomaniaGridProps> = ({ 
  markedColumns, 
  showNumbers = false,
  size = 'md',
  className = ''
}) => {
  const sizeClasses = {
    sm: 'w-6 h-6 text-xs',
    md: 'w-8 h-8 text-xs',
    lg: 'w-10 h-10 text-sm'
  };

  const renderGrid = () => {
    const grid = [];
    
    // Gerar grid 10x10 (100 números)
    for (let row = 0; row < 10; row++) {
      const rowCells = [];
      
      for (let col = 0; col < 10; col++) {
        const column = col + 1;
        const number = row * 10 + col + 1;
        const isMarked = markedColumns.includes(column);
        
        rowCells.push(
          <div
            key={`${row}-${col}`}
            className={`
              ${sizeClasses[size]}
              grid-cell
              ${isMarked ? 'grid-cell-marked' : 'grid-cell-unmarked'}
              relative group
            `}
            title={`Número ${number} - Coluna ${column}`}
          >
            {showNumbers ? number : ''}
            
            {/* Indicador de coluna marcada */}
            {isMarked && (
              <div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-400 rounded-full border border-white opacity-90"></div>
            )}
            
            {/* Tooltip hover */}
            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10 whitespace-nowrap">
              {showNumbers ? `Coluna ${column}` : `${number} - Col ${column}`}
            </div>
          </div>
        );
      }
      
      grid.push(
        <div key={row} className="flex gap-1">
          {rowCells}
        </div>
      );
    }
    
    return grid;
  };

  const renderColumnHeaders = () => {
    return (
      <div className="flex gap-1 mb-2">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(col => (
          <div
            key={col}
            className={`
              ${sizeClasses[size]}
              flex items-center justify-center
              text-xs font-bold
              ${markedColumns.includes(col) 
                ? 'bg-blue-600 text-white rounded-t' 
                : 'bg-gray-200 text-gray-600'
              }
            `}
          >
            {col}
          </div>
        ))}
      </div>
    );
  };

  const renderRowHeaders = () => {
    return (
      <div className="flex flex-col gap-1 mr-2">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(row => (
          <div
            key={row}
            className={`
              ${sizeClasses[size]}
              flex items-center justify-center
              text-xs font-bold bg-gray-200 text-gray-600
            `}
          >
            {row}
          </div>
        ))}
      </div>
    );
  };

  const renderMarkedColumnsInfo = () => {
    return (
      <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
        <h4 className="text-sm font-semibold text-blue-800 mb-2">
          Colunas Marcadas
        </h4>
        <div className="flex flex-wrap gap-2">
          {markedColumns.map(col => (
            <span
              key={col}
              className="px-2 py-1 bg-blue-600 text-white text-xs rounded-full font-medium"
            >
              {col}
            </span>
          ))}
        </div>
        <p className="text-xs text-blue-600 mt-2">
          Total: {markedColumns.length * 10} números marcados ({markedColumns.length} colunas)
        </p>
      </div>
    );
  };

  return (
    <div className={`bg-white rounded-lg p-4 ${className}`}>
      <div className="flex flex-col items-center">
        {/* Cabeçalhos das colunas */}
        {renderColumnHeaders()}
        
        <div className="flex">
          {/* Cabeçalhos das linhas */}
          {renderRowHeaders()}
          
          {/* Grid principal */}
          <div className="flex flex-col gap-1">
            {renderGrid()}
          </div>
        </div>
        
        {/* Informações das colunas marcadas */}
        {renderMarkedColumnsInfo()}
      </div>
    </div>
  );
};

export default LotomaniaGrid;