import { useEffect, useState } from 'react';
import { useParams, Navigate, useNavigate } from 'react-router-dom';
import { listarAtividadesPorCategoria } from '../../atividades/letramento/letramentoRegistry';
import { LetramentoStateProvider, useLetramentoState, ATIVIDADE_STATES } from '../../contexts/LetramentoStateContext';
import LetramentoNavBar from '../../components/letramento/LetramentoNavBar';
import AtividadeRuntimeFrame from '../../components/letramento/AtividadeRuntimeFrame';
import AtividadeStatusModal from '../../components/letramento/AtividadeStatusModal';
import TrilhaPassos from '../../components/letramento/TrilhaPassos';
import AtividadesSidebar from '../../components/letramento/AtividadesSidebar';

function AtividadeContent({ atividade, onChangeAtividade }) {
  const navigate = useNavigate();
  const { status, currentStep, reset } = useLetramentoState();
  const isCompleted = status === ATIVIDADE_STATES.SUCCESS || status === ATIVIDADE_STATES.COMPLETED;
  const isFailure = status === ATIVIDADE_STATES.FAILURE;
  const [isStatusModalDismissed, setIsStatusModalDismissed] = useState(false);
  const [reloadToken, setReloadToken] = useState(0);
  const startLabel = atividade.categoria === 'mouse'
    ? 'Mova o mouse para começar'
    : 'Pressione uma tecla para começar';

  useEffect(() => {
    setIsStatusModalDismissed(false);
    setReloadToken(0);
  }, [atividade.id]);

  useEffect(() => {
    if (isCompleted || isFailure) {
      setIsStatusModalDismissed(false);
    }
  }, [isCompleted, isFailure]);

  const handleTryAgain = () => {
    setIsStatusModalDismissed(true);
    reset();
    setReloadToken((value) => value + 1);
  };

  const handleDismissStatusModal = () => {
    setIsStatusModalDismissed(true);
  };

  const handleNextAtividade = () => {
    if (!atividade.proxima) return;

    setIsStatusModalDismissed(true);
    onChangeAtividade(atividade.proxima);
  };
  
  const handleClose = () => {
    navigate(-1);
  };

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50 backdrop-blur-sm border border-white/30 rounded-xl shadow-2xl w-full max-w-7xl h-[90vh] flex flex-col overflow-hidden">
        {/* Header */}
        <LetramentoNavBar titulo={atividade.titulo} onClose={handleClose} />

        <div className="flex-1 flex overflow-hidden">
          {/* Sidebar navegação de atividades */}
          <AtividadesSidebar 
            atividadeAtual={atividade.id} 
            categoria={atividade.categoria}
            onChangeAtividade={onChangeAtividade}
            currentAtividadeCompleted={isCompleted}
          />

          {/* Content area */}
          <div className="flex-1 flex flex-col overflow-hidden">
            {/* Step trail */}
            {atividade.passos?.length > 0 && (
              <TrilhaPassos
                passos={atividade.passos}
                currentStep={currentStep}
                completed={isCompleted}
              />
            )}

            {/* Activity iframe */}
            <div className="flex-1 min-h-0 overflow-hidden">
              <AtividadeRuntimeFrame 
                htmlFile={atividade.htmlFile}
                atividadeId={atividade.id}
                reloadToken={reloadToken}
                className="w-full h-full"
              />
            </div>

            {/* Footer status */}
            <div className="p-4 border-t border-white/20 flex justify-center bg-white/50">
              <span className="text-sm text-gray-500">
                {isCompleted
                  ? 'Atividade concluída'
                  : currentStep > 0
                  ? `Passo ${currentStep} de ${atividade.passos?.length ?? '?'}`
                  : startLabel}
              </span>
            </div>
          </div>
        </div>
      </div>

      <AtividadeStatusModal
        status={status}
        onTryAgain={handleTryAgain}
        onDismiss={handleDismissStatusModal}
        isOpen={!isStatusModalDismissed}
        nextAtividadeId={atividade.proxima ?? null}
        onNextAtividade={atividade.proxima ? handleNextAtividade : null}
      />
    </div>
  );
}

export default function CategoriaLetramentoView() {
  const { categoria } = useParams();
  
  const atividades = listarAtividadesPorCategoria(categoria);
  
  // Validação inicial
  if (!atividades || atividades.length === 0) {
    return <Navigate to="/primeiros-passos" replace />;
  }
  
  // Estado local para controlar qual atividade está sendo exibida (similar ao currentPhase dos games)
  const [atividadeAtualId, setAtividadeAtualId] = useState(() => atividades[0].id);
  
  const atividadeAtual = atividades.find(a => a.id === atividadeAtualId);
  
  // Validação de segurança - não retorna null, apenas ajusta o estado
  if (!atividadeAtual) {
    return <Navigate to="/primeiros-passos" replace />;
  }

  const handleChangeAtividade = (novoId) => {
    setAtividadeAtualId(novoId);
  };

  return (
    <LetramentoStateProvider key={atividadeAtual.id} atividadeId={atividadeAtual.id}>
      <AtividadeContent 
        atividade={atividadeAtual} 
        onChangeAtividade={handleChangeAtividade}
      />
    </LetramentoStateProvider>
  );
}
