import React, { useState } from 'react';
import { StudyPack } from '../types';
import { Digest } from './modes/Digest';
import { Flashcards } from './modes/Flashcards';
import { Quiz } from './modes/Quiz';
import { Plan } from './modes/Plan';
import { BookOpen, Layers, CheckSquare, Calendar } from 'lucide-react';

type StudyMode = 'digest' | 'flashcards' | 'quiz' | 'plan';

interface RightStageProps {
  pack: StudyPack | null;
  stageMessage?: string | null;
  stageMessageTone?: 'info' | 'error';
}

export function RightStage({ pack, stageMessage, stageMessageTone = 'info' }: RightStageProps) {
  const [activeMode, setActiveMode] = useState<StudyMode>('digest');
  const stageMessageClasses = stageMessageTone === 'error'
    ? 'text-xs text-rose-300/95'
    : 'text-xs text-teal-400/90';

  if (!pack) {
    return (
      <div id="studyflow-empty-stage" className="flex-1 bg-[#05080f] flex items-center justify-center text-zinc-500">
        <div className="text-center max-w-sm">
          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-white/5 flex items-center justify-center text-zinc-600">
            <BookOpen size={32} />
          </div>
          <p className="text-lg mb-2 text-zinc-400">No active study pack</p>
          <p className="text-sm">Upload your notes file on the left and generate a pack to start studying.</p>
          {stageMessage && (
            <p
              id="studyflow-provider-message"
              className={`mt-4 rounded-lg border px-4 py-3 text-left ${stageMessageTone === 'error'
                ? 'border-rose-500/25 bg-rose-500/10 text-rose-200'
                : 'border-teal-500/20 bg-teal-500/10 text-teal-200'}`}
              title={stageMessage}
            >
              {stageMessage}
            </p>
          )}
        </div>
      </div>
    );
  }

  const modes = [
    { id: 'digest', label: 'Digest', icon: BookOpen },
    { id: 'flashcards', label: 'Flashcards', icon: Layers },
    { id: 'quiz', label: 'Quiz', icon: CheckSquare },
    { id: 'plan', label: 'Plan', icon: Calendar },
  ] as const;

  return (
    <section
      id="studyflow-main-stage"
      className="studyflow-main-stage relative flex h-full flex-1 flex-col overflow-hidden bg-[#05080f]"
    >
      {/* Top Navigation Bar */}
      <div
        id="studyflow-stage-header"
        className="z-10 flex h-16 flex-shrink-0 items-center justify-between border-b border-white/5 bg-[#0a0f1c]/50 px-8 backdrop-blur-sm"
      >
        <div className="min-w-0">
          <h2 className="max-w-md truncate font-medium text-zinc-100">{pack.subject}</h2>
          {(stageMessage || pack.providerMessage) && (
            <p
              id="studyflow-provider-message"
              className={`mt-1 truncate ${stageMessage ? 'rounded-md border px-2 py-1 ' : ''}${stageMessage ? (stageMessageTone === 'error'
                ? ' border-rose-500/25 bg-rose-500/10 text-rose-200'
                : ' border-teal-500/20 bg-teal-500/10 text-teal-200') : ` ${stageMessageClasses}`}`}
              title={stageMessage || pack.providerMessage}
            >
              {stageMessage || pack.providerMessage}
            </p>
          )}
        </div>

        <div id="studyflow-stage-tabs" className="flex items-center gap-1 rounded-lg bg-white/5 p-1">
          {modes.map((mode) => {
            const Icon = mode.icon;
            const isActive = activeMode === mode.id;
            return (
              <button
                id={`studyflow-tab-${mode.id}`}
                key={mode.id}
                onClick={() => setActiveMode(mode.id as StudyMode)}
                className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
                  isActive 
                    ? 'bg-white/10 text-zinc-100 shadow-sm' 
                    : 'text-zinc-400 hover:text-zinc-200 hover:bg-white/5'
                }`}
              >
                <Icon size={14} className={isActive ? 'text-amber-500' : ''} />
                {mode.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* Main Content Area */}
      <div id="studyflow-stage-content" className="flex-1 overflow-y-auto">
        {activeMode === 'digest' && <Digest sections={pack.digest} />}
        {activeMode === 'flashcards' && <Flashcards cards={pack.flashcards} />}
        {activeMode === 'quiz' && <Quiz questions={pack.quiz} />}
        {activeMode === 'plan' && <Plan plan={pack.plan} />}
      </div>
    </section>
  );
}