'use client';

import { Shell } from '@/components/Shell';
import { ContentEditor } from '@/components/atelier/ContentEditor';
import { StreamingView } from '@/components/atelier/StreamingView';
import { WorkflowWizard } from '@/components/atelier/WorkflowWizard';
import { AnimatePresence, motion } from 'framer-motion';
import { useCallback, useState } from 'react';

type Phase = 'workflow' | 'streaming' | 'editor';

export default function AtelierPage() {
  const [phase, setPhase] = useState<Phase>('workflow');

  const handleGenerate = useCallback(() => {
    setPhase('streaming');
  }, []);

  const handleStreamingDone = useCallback(() => {
    setPhase('editor');
  }, []);

  const handleReset = useCallback(() => {
    setPhase('workflow');
  }, []);

  return (
    <Shell>
      <div className="max-w-5xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-[22px] font-bold text-text mb-1.5">Atelier IA</h1>
          <p className="text-[14px] text-text-dim">
            Générez du contenu SEO optimisé en quelques secondes, de la brief à l'éditeur.
          </p>
        </div>

        {/* Phase indicator */}
        <div className="flex items-center gap-2 mb-6">
          {(['workflow', 'streaming', 'editor'] as Phase[]).map((p, i) => {
            const labels: Record<Phase, string> = {
              workflow: 'Paramétrage',
              streaming: 'Génération',
              editor: 'Édition',
            };
            const phaseIndex = { workflow: 0, streaming: 1, editor: 2 }[phase];
            const stepIndex = i;
            const done = phaseIndex > stepIndex;
            const active = phaseIndex === stepIndex;
            return (
              <div key={p} className="flex items-center gap-2">
                <div
                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-colors ${
                    active
                      ? 'bg-accent/20 text-accent-light border border-accent/40'
                      : done
                        ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30'
                        : 'bg-bg-card text-text-dimmer border border-border'
                  }`}
                >
                  <span
                    className={`w-1.5 h-1.5 rounded-full ${
                      active
                        ? 'bg-accent animate-pulse'
                        : done
                          ? 'bg-emerald-400'
                          : 'bg-text-dimmer'
                    }`}
                  />
                  {labels[p]}
                </div>
                {i < 2 && <div className="w-6 h-px bg-border" />}
              </div>
            );
          })}
        </div>

        {/* Phase content */}
        <AnimatePresence mode="wait">
          {phase === 'workflow' && (
            <motion.div
              key="workflow"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -16 }}
              transition={{ duration: 0.3 }}
            >
              <WorkflowWizard onGenerate={handleGenerate} />
            </motion.div>
          )}

          {phase === 'streaming' && (
            <motion.div
              key="streaming"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -16 }}
              transition={{ duration: 0.3 }}
            >
              <StreamingView onDone={handleStreamingDone} />
            </motion.div>
          )}

          {phase === 'editor' && (
            <motion.div
              key="editor"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -16 }}
              transition={{ duration: 0.3 }}
            >
              <ContentEditor onReset={handleReset} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </Shell>
  );
}