import { useState } from 'react';
import PropTypes from 'prop-types';
import { listarAtividadesPorCategoria } from '../../atividades/letramento/letramentoRegistry';
import { getCompletedPhases } from '../../services/letramentoStorage';
import { getUnlockedAtividades } from '../../utils/phaseUtils';
import { MousePointer, Keyboard, Lock, CheckCircle, ChevronLeft, ChevronRight } from 'lucide-react';

const CATEGORIA_UI = {
  mouse: {
    Icon: MousePointer,
    headerClass: 'bg-red-50',
    iconWrapClass: 'bg-red-600',
    currentClass: 'bg-red-50 border-red-500 ring-red-200',
    currentBadgeClass: 'bg-red-600 text-white',
    completedClass: 'bg-green-50 border-green-300 hover:border-green-400 hover:shadow',
    completedBadgeClass: 'bg-green-100 text-green-600',
    hoverBorderClass: 'hover:border-red-300',
  },
  teclado: {
    Icon: Keyboard,
    headerClass: 'bg-brand-50',
    iconWrapClass: 'bg-brand-600',
    currentClass: 'bg-brand-50 border-brand-500 ring-brand-200',
    currentBadgeClass: 'bg-brand-600 text-white',
    completedClass: 'bg-brand-50 border-brand-300 hover:border-brand-400 hover:shadow',
    completedBadgeClass: 'bg-brand-100 text-brand-700',
    hoverBorderClass: 'hover:border-brand-300',
  },
};

/**
 * Sidebar com lista de atividades da mesma categoria
 * Mostra progresso e permite navegação
 */
export default function AtividadesSidebar({ atividadeAtual, categoria, onChangeAtividade, currentAtividadeCompleted = false }) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const atividades = listarAtividadesPorCategoria(categoria);
  const categoriaUi = CATEGORIA_UI[categoria] ?? CATEGORIA_UI.mouse;

  // Busca array de atividades completadas (similar ao SeletorDeFases)
  const completedPhases = getCompletedPhases(categoria);
  const optimisticCompleted = currentAtividadeCompleted
    ? Array.from(new Set([...completedPhases, atividadeAtual]))
    : completedPhases;

  const unlockedPhases = getUnlockedAtividades(optimisticCompleted, atividades);
  
  const atividadesDesbloqueadas = new Set(unlockedPhases);

  const handleAtividadeClick = (atividadeId) => {
    if (atividadesDesbloqueadas.has(atividadeId) && atividadeId !== atividadeAtual) {
      onChangeAtividade(atividadeId);
    }
  };

  const CategoriaIcon = categoriaUi.Icon;

  return (
    <div className={`bg-white/95 backdrop-blur-sm border-r border-gray-200 flex flex-col overflow-hidden transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`}>
      {/* Header da categoria */}
      <div className={`p-4 border-b border-gray-200 ${categoriaUi.headerClass}`}>
        {!isCollapsed && (
          <div className="flex items-center gap-3">
            <div className={`p-2 rounded-lg ${categoriaUi.iconWrapClass}`}>
              <CategoriaIcon className="w-5 h-5 text-white" />
            </div>
            <div>
              <h3 className="font-semibold text-gray-800 capitalize">{categoria}</h3>
              <p className="text-xs text-gray-600">{atividades.length} atividades</p>
            </div>
          </div>
        )}
        
        {isCollapsed && (
          <div className="flex justify-center">
            <div className={`p-2 rounded-lg ${categoriaUi.iconWrapClass}`}>
              <CategoriaIcon className="w-5 h-5 text-white" />
            </div>
          </div>
        )}
      </div>

      {/* Lista de atividades */}
      <div className="flex-1 overflow-y-auto p-2">
        {atividades.map((atividade, index) => {
          const isAtual = atividade.id === atividadeAtual;
          const isDesbloqueada = atividadesDesbloqueadas.has(atividade.id);
          const isCompletada = optimisticCompleted.includes(atividade.id);

          return (
            <button
              key={atividade.id}
              onClick={() => handleAtividadeClick(atividade.id)}
              disabled={!isDesbloqueada}
              className={`
                w-full mb-2 rounded-lg border-2 transition-all
                ${isCollapsed ? 'p-2' : 'p-3'}
                ${isAtual 
                  ? `${categoriaUi.currentClass} ring-2 shadow-md`
                  : isCompletada
                    ? categoriaUi.completedClass
                    : isDesbloqueada
                      ? `bg-white border-gray-200 ${categoriaUi.hoverBorderClass} hover:shadow`
                      : 'bg-gray-50 border-gray-200 cursor-not-allowed opacity-60'
                }
              `}
              title={isCollapsed ? `${atividade.titulo} - ${atividade.descricao}` : ''}
            >
              {isCollapsed ? (
                // Versão colapsada - apenas ícone/número
                <div className="flex justify-center">
                  <div className={`
                    w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
                    ${isAtual
                      ? categoriaUi.currentBadgeClass
                      : isCompletada
                        ? categoriaUi.completedBadgeClass
                        : isDesbloqueada
                          ? 'bg-gray-200 text-gray-700'
                          : 'bg-gray-100 text-gray-400'
                    }
                  `}>
                    {isCompletada ? (
                      <CheckCircle className="w-5 h-5" />
                    ) : !isDesbloqueada ? (
                      <Lock className="w-4 h-4" />
                    ) : (
                      index + 1
                    )}
                  </div>
                </div>
              ) : (
                // Versão expandida - conteúdo completo
                <div className="flex items-start gap-3">
                {/* Número ou status icon */}
                <div className={`
                  flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold
                  ${isAtual
                    ? categoriaUi.currentBadgeClass
                    : isCompletada
                      ? categoriaUi.completedBadgeClass
                      : isDesbloqueada
                        ? 'bg-gray-200 text-gray-700'
                        : 'bg-gray-100 text-gray-400'
                  }
                `}>
                  {isCompletada ? (
                    <CheckCircle className="w-5 h-5" />
                  ) : !isDesbloqueada ? (
                    <Lock className="w-4 h-4" />
                  ) : (
                    index + 1
                  )}
                </div>

                {/* Título e descrição */}
                <div className="flex-1 text-left">
                  <h4 className={`
                    text-sm font-semibold mb-1
                    ${isAtual ? 'text-gray-800' : isDesbloqueada ? 'text-gray-800' : 'text-gray-400'}
                  `}>
                    {atividade.titulo}
                  </h4>
                  <p className={`
                    text-xs line-clamp-2
                    ${isAtual ? 'text-gray-600' : isDesbloqueada ? 'text-gray-600' : 'text-gray-400'}
                  `}>
                    {atividade.descricao}
                  </p>
                </div>
              </div>
              )}
            </button>
          );
        })}
      </div>

      {/* Footer com botão de colapsar */}
      <div className="border-t border-gray-200 p-3 bg-gray-50">
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-white hover:bg-gray-100 border border-gray-300 rounded-lg transition-colors"
          title={isCollapsed ? 'Expandir menu' : 'Recolher menu'}
        >
          {isCollapsed ? (
            <ChevronRight className="w-5 h-5 text-gray-600" />
          ) : (
            <>
              <ChevronLeft className="w-5 h-5 text-gray-600" />
              <span className="text-sm text-gray-600 font-medium">Recolher</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
}

AtividadesSidebar.propTypes = {
  atividadeAtual: PropTypes.string.isRequired,
  categoria: PropTypes.string.isRequired,
  onChangeAtividade: PropTypes.func.isRequired,
  currentAtividadeCompleted: PropTypes.bool,
};
