import React, { useState } from 'react';
import { LeftRail } from './components/LeftRail';
import { RightStage } from './components/RightStage';
import { StudyPack } from './types';
import { generateStudyPack } from './services/ai';

export default function App() {
  const [packs, setPacks] = useState<StudyPack[]>([]);
  const [activePackId, setActivePackId] = useState<string | undefined>();
  const [isGenerating, setIsGenerating] = useState(false);
  const [stageMessage, setStageMessage] = useState<string | null>(null);
  const [stageMessageTone, setStageMessageTone] = useState<'info' | 'error'>('info');

  const handleGenerate = async (subject: string, notes: string) => {
    setIsGenerating(true);
    setStageMessage(null);
    setStageMessageTone('info');
    try {
      const generatedData = await generateStudyPack(subject, notes);
      
      const newPack: StudyPack = {
        id: crypto.randomUUID(),
        subject,
        createdAt: Date.now(),
        ...generatedData,
      };

      setPacks(prev => [newPack, ...prev]);
      setActivePackId(newPack.id);
    } catch (error) {
      console.error("Failed to generate pack:", error);
      const message = error instanceof Error ? error.message : 'Failed to generate study pack. Please try again.';
      setStageMessage(message);
      setStageMessageTone('error');
    } finally {
      setIsGenerating(false);
    }
  };

  const activePack = packs.find(p => p.id === activePackId) || null;

  return (
    <div
      id="studyflow-app-shell"
      className="studyflow-app-shell flex h-screen w-full overflow-hidden bg-[#05080f] font-sans text-zinc-100 selection:bg-amber-500/30"
    >
      <LeftRail 
        onGenerate={handleGenerate} 
        isGenerating={isGenerating}
        recentPacks={packs.map(p => ({ id: p.id, subject: p.subject }))}
        onSelectPack={setActivePackId}
        activePackId={activePackId}
      />
      <RightStage pack={activePack} stageMessage={stageMessage} stageMessageTone={stageMessageTone} />
    </div>
  );
}