import { useParams, Navigate, useNavigate } from 'react-router-dom';
import { getAtividade } 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 }) {
  const { status, currentStep, reset } = useLetramentoState();
  const navigate = useNavigate();
  const isCompleted = status === ATIVIDADE_STATES.SUCCESS || status === ATIVIDADE_STATES.COMPLETED;
  const startLabel = atividade.categoria === 'mouse'
    ? 'Mova o mouse para começar'
    : 'Pressione uma tecla para começar';

  const handleTryAgain = () => {
    reset();
  };

  const handleClose = () => navigate(-1);

  return (
    <div
      className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
      onClick={handleClose}
    >
      <div
        className="bg-white/95 backdrop-blur-sm border border-white/30 rounded-xl shadow-xl w-[90vw] h-[90vh] flex flex-col overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <LetramentoNavBar titulo={atividade.titulo} onClose={handleClose} />

        {/* Main content area with sidebar */}
        <div className="flex-1 flex overflow-hidden">
          {/* Sidebar navegação de atividades */}
          <AtividadesSidebar 
            atividadeAtual={atividade.id} 
            categoria={atividade.categoria}
          />

          {/* 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}
                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}
        nextAtividadeId={atividade.proxima ?? null}
      />
    </div>
  );
}

export default function AtividadeLetramentoView() {
  const { atividadeId } = useParams();
  const atividade = getAtividade(atividadeId);

  if (!atividade) {
    return <Navigate to="/primeiros-passos" replace />;
  }

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