import {
  ArrowLeft,
  ArrowRight,
  Camera,
  Check,
  ChevronDown,
  ChevronUp,
  Copy,
  Download,
  FileCode2,
  Move3D,
  Pencil,
  Play,
  Plus,
  RotateCcw,
  Scan,
  Shuffle,
  Smile,
  Trash2,
  TriangleAlert,
  Upload,
} from 'lucide-react'
import { AnimatePresence, animate, motion, useMotionValue, useTransform } from 'motion/react'
import { type CSSProperties, useEffect, useLayoutEffect, useRef, useState } from 'react'

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'
import { Field, FieldTitle } from '@/components/ui/field'
import { Drawer } from '@/components/ui/drawer'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Separator } from '@/components/ui/separator'
import { Switch } from '@/components/ui/switch'

import {
  ControlSection,
  ExportSection,
  InspectorCard,
  PanelTitle,
  StatePlayer,
} from '@/app/components/common'
import { ColorField, LinkButton, NumericField } from '@/app/components/controls'
import {
  COPY_FEEDBACK_DURATION_MS,
  formatSeconds,
  type Side,
  type SnapshotFormat,
} from '@/app/studio-utils'
import { SequenceWorkspace } from '@/features/animation/components/SequenceWorkspace'
import { groupSequences, resolveSequenceExpression } from '@/features/animation/sequences'
import { defaultAvatarEyes } from '@/features/avatar/avatars'
import {
  ExpressionCard,
  ExpressionPreview,
  ExpressionWorkspace,
} from '@/features/avatar/components/ExpressionWorkspace'
import { defaultExpression } from '@/features/avatar/presets'
import { randomSnapshotPalette } from '@/features/export/snapshotPalette'
import { type SnapshotBackground } from '@/features/export/snapshotExporter'
import { AvatarPage } from '@/features/studio/components/AvatarDrawer'
import { BodyConstructionAccordion } from '@/features/studio/components/BodyConstructionAccordion'
import { HighlightedRuntimeCode } from '@/features/studio/components/HighlightedRuntimeCode'
import {
  buildRuntimeGuideText,
  RuntimeGuideDialog,
} from '@/features/studio/components/RuntimeGuideDialog'
import { RuntimePreviewDialog } from '@/features/studio/components/RuntimePreviewDialog'
import { StudioIdentity } from '@/features/studio/components/StudioIdentity'
import type { StudioController } from '@/features/studio/useStudioController'

const reactQuickStartInstall = 'npm install @bible-strong/avatar-react react react-dom'
const webQuickStartInstall = 'npm install @bible-strong/avatar-web'

const reactQuickStartExample = (animationKey: string | undefined) =>
  `import { createAvatar } from '@bible-strong/avatar-react'
import '@bible-strong/avatar-react/styles.css'
import definition from './avatar.avatar.json'

const Avatar = createAvatar(definition)

export function App() {
  return <Avatar ${animationKey ? `defaultAnimation="${animationKey}"` : 'defaultExpression="neutral"'} />
}`

const webQuickStartExample = (animationKey: string | undefined) =>
  `import { createAvatar } from '@bible-strong/avatar-web'
import definition from './avatar.avatar.json'

const avatar = createAvatar('#avatar', {
  definition,
  ${animationKey ? `defaultAnimation: '${animationKey}',` : `defaultExpression: 'neutral',`}
})`

function PoseControls({ controller }: { controller: StudioController }) {
  const {
    activeAvatar,
    expression,
    linked,
    setLinked,
    showWire,
    t,
    updateDimension,
    updateHighlight,
    updateImmediate,
    updateSize,
    updateSpacing,
    updateWireVisibility,
  } = controller

  return (
    <>
      <ControlSection title="Corps" subtitle="Orientation et apparence générale de la pose.">
        <InspectorCard className="color-panel">
          <PanelTitle
            level={3}
            title="Couleur du corps"
            subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
          />
          <ColorField
            label="Corps"
            value={expression.bodyColor ?? activeAvatar.colors.body}
            onChange={bodyColor => updateImmediate({ ...expression, bodyColor })}
          />
          {expression.bodyColor && (
            <Button
              className="inherit-colors"
              variant="ghost"
              size="icon-sm"
              aria-label={t('Reprendre la couleur de l’avatar')}
              onClick={() => {
                const next = { ...expression }
                delete next.bodyColor
                updateImmediate(next)
              }}
            >
              <RotateCcw />
            </Button>
          )}
        </InspectorCard>
        <InspectorCard>
          <PanelTitle
            level={3}
            title="Rotation de la tête"
            subtitle="Les libellés ↔ sont scrubbables, comme dans Figma."
          />
          <NumericField
            label="Rotation X"
            value={expression.headX}
            unit="°"
            onActiveChange={active => updateHighlight(active ? 'head' : null)}
            onChange={value => updateImmediate({ ...expression, headX: value })}
          />
          <NumericField
            label="Rotation Y"
            value={expression.headY}
            unit="°"
            onActiveChange={active => updateHighlight(active ? 'head' : null)}
            onChange={value => updateImmediate({ ...expression, headY: value })}
          />
          <NumericField
            label="Rotation Z"
            value={expression.headZ}
            unit="°"
            onActiveChange={active => updateHighlight(active ? 'head' : null)}
            onChange={value => updateImmediate({ ...expression, headZ: value })}
          />
        </InspectorCard>
      </ControlSection>
      <ControlSection title="Yeux" subtitle="Forme, placement, orientation et couleur du regard.">
        <InspectorCard className="color-panel">
          <PanelTitle
            level={3}
            title="Couleur des yeux"
            subtitle="La pose peut remplacer temporairement la couleur de l’avatar."
          />
          <ColorField
            label="Yeux"
            value={expression.eyeColor ?? activeAvatar.colors.eyes}
            onChange={eyeColor => updateImmediate({ ...expression, eyeColor })}
          />
          {expression.eyeColor && (
            <Button
              className="inherit-colors"
              variant="ghost"
              size="icon-sm"
              aria-label={t('Reprendre la couleur de l’avatar')}
              onClick={() => {
                const next = { ...expression }
                delete next.eyeColor
                updateImmediate(next)
              }}
            >
              <RotateCcw />
            </Button>
          )}
        </InspectorCard>
        {(['width', 'height', 'size'] as const).map(dimension => (
          <InspectorCard className="compact" key={dimension}>
            <div className="panel-inline-title">
              <h3>
                {t(
                  {
                    width: 'Largeur',
                    height: 'Hauteur',
                    size: 'Taille proportionnelle',
                  }[dimension]
                )}
              </h3>
              <LinkButton
                linked={linked[dimension]}
                label={`Lier ${dimension}`}
                onClick={() =>
                  setLinked(current => ({
                    ...current,
                    [dimension]: !current[dimension],
                  }))
                }
              />
            </div>
            <div className="eye-columns">
              {(['Left', 'Right'] as Side[]).map(side => {
                const width = expression[`width${side}`]
                const height = expression[`height${side}`]
                const value =
                  dimension === 'width'
                    ? width
                    : dimension === 'height'
                      ? height
                      : Math.max(width, height)
                return (
                  <NumericField
                    key={side}
                    label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
                    value={value}
                    min={10}
                    max={dimension === 'size' ? 110 : 100}
                    unit="u"
                    onActiveChange={active =>
                      updateHighlight(
                        active
                          ? linked[dimension]
                            ? 'both'
                            : side === 'Left'
                              ? 'left'
                              : 'right'
                          : null
                      )
                    }
                    onChange={next =>
                      dimension === 'size'
                        ? updateSize(side, next)
                        : updateDimension(side, dimension, next)
                    }
                  />
                )
              })}
            </div>
          </InspectorCard>
        ))}
        <InspectorCard>
          <PanelTitle
            level={3}
            title="Position et espacement"
            subtitle="Coordonnées communes projetées sur la forme choisie."
          />
          <div className="eye-columns">
            <div className="eye-column">
              <h3>{t('Œil gauche')}</h3>
              <NumericField
                label="Horizontale"
                value={expression.positionXLeft}
                unit="u"
                onActiveChange={active => updateHighlight(active ? 'left' : null)}
                onChange={value => updateImmediate({ ...expression, positionXLeft: value })}
              />
              <NumericField
                label="Verticale"
                value={expression.positionYLeft}
                unit="u"
                onActiveChange={active => updateHighlight(active ? 'left' : null)}
                onChange={value => updateImmediate({ ...expression, positionYLeft: value })}
              />
            </div>
            <div className="eye-column">
              <h3>{t('Œil droit')}</h3>
              <NumericField
                label="Horizontale"
                value={expression.positionXRight}
                unit="u"
                onActiveChange={active => updateHighlight(active ? 'right' : null)}
                onChange={value => updateImmediate({ ...expression, positionXRight: value })}
              />
              <NumericField
                label="Verticale"
                value={expression.positionYRight}
                unit="u"
                onActiveChange={active => updateHighlight(active ? 'right' : null)}
                onChange={value => updateImmediate({ ...expression, positionYRight: value })}
              />
            </div>
          </div>
          <div className="position-spacing">
            <NumericField
              label="Espacement"
              value={expression.spacing}
              min={0}
              max={150}
              unit="u"
              onActiveChange={active => updateHighlight(active ? 'both' : null)}
              onChange={updateSpacing}
            />
          </div>
        </InspectorCard>
        <InspectorCard>
          <div className="panel-inline-title">
            <PanelTitle
              level={3}
              title="Rotation locale"
              subtitle="Inclinaison propre à chaque œil."
            />
            <LinkButton
              linked={linked.rotation}
              label="Lier les rotations"
              onClick={() => setLinked(current => ({ ...current, rotation: !current.rotation }))}
            />
          </div>
          <div className="eye-columns">
            <NumericField
              label="Œil gauche"
              value={expression.leftAngle}
              unit="°"
              onActiveChange={active =>
                updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
              }
              onChange={value =>
                updateImmediate({
                  ...expression,
                  leftAngle: value,
                  ...(linked.rotation ? { rightAngle: -value } : {}),
                })
              }
            />
            <NumericField
              label="Œil droit"
              value={expression.rightAngle}
              unit="°"
              onActiveChange={active =>
                updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
              }
              onChange={value =>
                updateImmediate({
                  ...expression,
                  rightAngle: value,
                  ...(linked.rotation ? { leftAngle: -value } : {}),
                })
              }
            />
          </div>
        </InspectorCard>
      </ControlSection>
      <ControlSection
        title="Projection"
        subtitle="Perspective et repères appliqués à la surface active."
      >
        <InspectorCard>
          <PanelTitle level={3} title="Perspective" subtitle="Profondeur simulée du visage." />
          <NumericField
            label="Perspective"
            value={expression.perspective}
            step={0.01}
            unit="×"
            onChange={value => updateImmediate({ ...expression, perspective: value })}
          />
          <div className="switch">
            <span>{t('Afficher le maillage')}</span>
            <Switch
              checked={showWire}
              onCheckedChange={updateWireVisibility}
              aria-label={t('Afficher le maillage')}
            />
          </div>
        </InspectorCard>
      </ControlSection>
    </>
  )
}

export function StudioInspector({ controller }: { controller: StudioController }) {
  const [runtimePreviewOpen, setRuntimePreviewOpen] = useState(false)
  const [guideOpen, setGuideOpen] = useState(false)
  const [guideCopyFeedback, setGuideCopyFeedback] = useState<{
    format: 'react' | 'javascript'
    status: 'success' | 'error'
  } | null>(null)
  useEffect(() => {
    if (!guideCopyFeedback) return
    const timeout = window.setTimeout(() => setGuideCopyFeedback(null), COPY_FEEDBACK_DURATION_MS)
    return () => window.clearTimeout(timeout)
  }, [guideCopyFeedback])
  const [exportAnimationsOpen, setExportAnimationsOpen] = useState(false)
  const {
    activateAvatar,
    activeAvatar,
    activeAvatarEyes,
    activeAvatarId,
    activeExpression,
    activeSequence,
    activeSequenceLabel,
    activeState,
    avatarDragOrigin,
    avatarDragPreview,
    avatars,
    avatarsRef,
    blink,
    bodyEditing,
    bodyNodes,
    cancelAvatarEditing,
    cancelAvatarMove,
    cancelExpressionEditing,
    cancelExpressionMove,
    cancelSequenceEditing,
    cancelStateMove,
    commitAvatarMove,
    commitExpressionMove,
    commitStateMove,
    copyAvatarRuntimeDefinition,
    createNewAvatar,
    downloadAvatarExport,
    downloadAvatarRuntimeDefinition,
    downloadStudioProject,
    draggedAvatarId,
    draggedExpressionId,
    draggedStateId,
    draggingAvatarId,
    draggingExpressionId,
    draggingStateId,
    duplicateAvatar,
    duplicateExpression,
    duplicateSequenceEditing,
    duplicateState,
    editing,
    editorPageOpen,
    exportAnimationIdSet,
    exportFormat,
    expression,
    expressionById,
    expressionSemanticKeyError,
    expressionDragOrigin,
    expressionDragPreview,
    expressions,
    focusAvatarName,
    language,
    launchSequence,
    linked,
    mode,
    openExpressionEditor,
    openPhotoMode,
    openSequenceEditor,
    pauseState,
    photoPanelSections,
    photoTool,
    playbackStatus,
    playbackVisual,
    prepareStudioProjectImport,
    previewAvatarMove,
    previewExpressionDraft,
    previewExpressionMove,
    previewStateMove,
    projectImportError,
    projectImportRef,
    reduceMotion,
    renameActiveAvatar,
    runtimeDefinitionResult,
    runtimeCopyStatus,
    runtimeExportErrors,
    saveAvatarEditing,
    saveEditing,
    saveSequenceEditing,
    selectedExportAnimations,
    selectedSequenceStepId,
    selectedState,
    sequenceEditing,
    animationSemanticKeyError,
    sequences,
    setDeleteAvatarOpen,
    setDeleteExpressionOpen,
    setDeleteSequenceOpen,
    setDraggingAvatarId,
    setDraggingExpressionId,
    setDraggingStateId,
    setExportAnimationIds,
    setExportFormat,
    setFocusAvatarName,
    setLinked,
    setLanguage,
    setMode,
    setPhotoPanelSections,
    setPhotoTool,
    setSelectedSequenceStepId,
    setSequenceEditing,
    setSnapshotBackground,
    setSnapshotColorFrom,
    setSnapshotColorTo,
    setSnapshotComposition,
    setSnapshotFormat,
    setSnapshotSize,
    setSpringSpeed,
    setStatePlayerExpanded,
    showWire,
    snapshotBackground,
    snapshotColorFrom,
    snapshotColorTo,
    snapshotComposition,
    snapshotFormat,
    snapshotSize,
    springSpeed,
    springSpeedRef,
    stateDragOrigin,
    stateDragPreview,
    statePlayerExpanded,
    statePlaying,
    stopState,
    surface,
    t,
    takePicture,
    toggleExportAnimation,
    toggleStatePlayback,
    transitionToExpression,
    updateAvatarColors,
    updateAvatarEyeDimension,
    updateAvatarEyePosition,
    updateAvatarEyeSize,
    updateAvatarEyes,
    updateDimension,
    updateHighlight,
    updateImmediate,
    updateSize,
    updateSpacing,
    updateSurface,
    updateWireVisibility,
    workspaceBackButtonRef,
  } = controller

  const copyRuntimeGuide = async () => {
    if (!navigator.clipboard) {
      setGuideCopyFeedback({ format: exportFormat, status: 'error' })
      return
    }
    try {
      await navigator.clipboard.writeText(
        buildRuntimeGuideText({
          animationKey: runtimePreviewAnimation,
          integration: exportFormat,
          t,
        })
      )
      setGuideCopyFeedback({ format: exportFormat, status: 'success' })
    } catch {
      setGuideCopyFeedback({ format: exportFormat, status: 'error' })
    }
  }
  const runtimePreviewAnimation = runtimeDefinitionResult.ok
    ? runtimeDefinitionResult.value.animationOrder[0]
    : undefined
  const guideCopyStatus =
    guideCopyFeedback?.format === exportFormat ? guideCopyFeedback.status : 'idle'
  const updateSnapshotComposition = (patch: Partial<typeof snapshotComposition>) =>
    setSnapshotComposition(current => ({ ...current, ...patch }))
  const playbackFooterY = useMotionValue(0)
  const playbackHandleY = useMotionValue(0)
  const playbackHandleCounterY = useTransform(playbackHandleY, value => -value)
  const playbackFooterDragOriginY = useRef(0)
  const playbackDetailsRef = useRef<HTMLDivElement>(null)
  const measuredSequenceIdRef = useRef<string | null>(null)
  const [playbackFooterCollapsedOffset, setPlaybackFooterCollapsedOffset] = useState(0)
  const playbackDetailsOpacity = useTransform(
    playbackFooterY,
    [0, Math.max(playbackFooterCollapsedOffset, 1)],
    [1, 0]
  )

  useLayoutEffect(() => {
    const details = playbackDetailsRef.current
    if (!details || !activeSequence) return

    const measure = () => {
      const nextOffset = details.getBoundingClientRect().height
      if (nextOffset <= 0) return

      const firstMeasurement = measuredSequenceIdRef.current !== activeSequence.id
      if (firstMeasurement) {
        measuredSequenceIdRef.current = activeSequence.id
        playbackFooterY.set(statePlayerExpanded ? 0 : nextOffset)
      } else if (
        playbackFooterCollapsedOffset > 0 &&
        Math.abs(nextOffset - playbackFooterCollapsedOffset) > 0.5
      ) {
        const progress = Math.min(
          1,
          Math.max(0, playbackFooterY.get() / playbackFooterCollapsedOffset)
        )
        playbackFooterY.set(progress * nextOffset)
      }
      setPlaybackFooterCollapsedOffset(nextOffset)
    }

    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(details)
    return () => observer.disconnect()
  }, [
    activeSequence,
    language,
    playbackFooterCollapsedOffset,
    playbackFooterY,
    statePlayerExpanded,
  ])

  const snapPlaybackFooter = (expanded: boolean) => {
    setStatePlayerExpanded(expanded)
    animate(playbackFooterY, expanded ? 0 : playbackFooterCollapsedOffset, {
      type: 'spring',
      stiffness: 440,
      damping: 40,
      duration: reduceMotion ? 0 : undefined,
    })
  }
  return (
    <Drawer>
      <main
        className={`inspector ${editing ? 'expression-workspace-active' : sequenceEditing ? 'sequence-workspace-active' : bodyEditing ? 'body-workspace' : 'studio-workspace'}${activeSequence && !editorPageOpen && mode !== 'photo' ? ' state-player-active' : ''}${mode === 'photo' ? ' photo-inspector-active' : ''}`}
      >
        <StudioIdentity
          className="inspector-identity"
          language={language}
          setLanguage={setLanguage}
          t={t}
        />
        {sequenceEditing && !editing && (
          <motion.div
            key={`sequence-${sequenceEditing.sourceId ?? 'new'}`}
            className="workspace-page sequence-workspace"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
          >
            <SequenceWorkspace
              editing={sequenceEditing}
              expressions={expressions}
              surface={surface}
              bodyNodes={bodyNodes}
              colors={activeAvatar.colors}
              avatarEyes={activeAvatarEyes}
              renderStyle={activeAvatar.renderStyle}
              selectedStepId={selectedSequenceStepId}
              backButtonRef={workspaceBackButtonRef}
              reduceMotion={Boolean(reduceMotion)}
              onSelectedStepChange={setSelectedSequenceStepId}
              onChange={draft =>
                setSequenceEditing(current => (current ? { ...current, draft } : current))
              }
              onPreviewStep={step => {
                const resolved = resolveSequenceExpression(expressions, step.expressionId)
                if (resolved.expression) {
                  transitionToExpression(resolved.expression, resolved.index, step)
                }
              }}
              onEditExpression={openExpressionEditor}
              onPlay={() => launchSequence(sequenceEditing.draft, false, false)}
              onPause={() => pauseState(false)}
              onStop={() => stopState(false)}
              playing={statePlaying}
              active={activeState === sequenceEditing.draft.id}
              onCancel={cancelSequenceEditing}
              onSave={saveSequenceEditing}
              onDuplicate={duplicateSequenceEditing}
              onDelete={() => setDeleteSequenceOpen(true)}
              semanticKeyError={animationSemanticKeyError(sequenceEditing.draft)}
            />
          </motion.div>
        )}
        {editing && (
          <motion.div
            key={`expression-${editing.index ?? 'new'}`}
            className="workspace-page expression-workspace"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
          >
            <ExpressionWorkspace
              editing={editing}
              avatarColors={activeAvatar.colors}
              backButtonRef={workspaceBackButtonRef}
              onChange={previewExpressionDraft}
              onCancel={cancelExpressionEditing}
              onSave={saveEditing}
              onDuplicate={() => duplicateExpression(editing.index, editing.draft, true)}
              onDelete={() => setDeleteExpressionOpen(true)}
              semanticKeyError={expressionSemanticKeyError(editing.draft)}
            />
          </motion.div>
        )}
        {!sequenceEditing &&
          !editing &&
          (bodyEditing ? (
            <header className="workspace-header body-workspace-header">
              <Button
                ref={workspaceBackButtonRef}
                variant="ghost"
                size="icon"
                onClick={cancelAvatarEditing}
                aria-label={t('Retour au studio')}
              >
                <ArrowLeft />
              </Button>
              <div className="workspace-heading">
                <p className="eyebrow">{t('Construction du corps')}</p>
                <Input
                  className="avatar-name-input"
                  aria-label={t('Nom de l’avatar')}
                  autoFocus={focusAvatarName}
                  value={activeAvatar.name}
                  onChange={event => renameActiveAvatar(event.currentTarget.value)}
                  onFocus={event => {
                    if (focusAvatarName) event.currentTarget.select()
                  }}
                  onBlur={event => {
                    if (!event.currentTarget.value.trim()) renameActiveAvatar('Unknown')
                    setFocusAvatarName(false)
                  }}
                />
                <p>
                  {t('Choisis la forme principale puis assemble les primitives autour d’elle.')}
                </p>
              </div>
            </header>
          ) : null)}

        <AnimatePresence mode="wait" initial={false}>
          <motion.div
            className="mode-page-transition"
            key={mode}
            initial={reduceMotion ? false : { opacity: 0, x: 18 }}
            animate={{ opacity: 1, x: 0 }}
            exit={reduceMotion ? { opacity: 1, x: 0 } : { opacity: 0, x: -18 }}
            transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
          >
            {!editorPageOpen && (
              <header className="mode-page-header">
                <div>
                  <p className="eyebrow">{activeAvatar.name}</p>
                  <h1>
                    {t(
                      mode === 'manual'
                        ? 'Pose'
                        : mode === 'avatars'
                          ? 'Avatars'
                          : mode === 'expressions'
                            ? 'Expressions'
                            : mode === 'states'
                              ? 'Animations'
                              : mode === 'photo'
                                ? 'Mode photo'
                                : 'Exporter'
                    )}
                  </h1>
                </div>
                {mode === 'manual' && (
                  <Button
                    variant="outline"
                    size="icon"
                    type="button"
                    aria-label={t('Réinitialiser')}
                    onClick={() => transitionToExpression({ ...defaultExpression })}
                  >
                    <RotateCcw />
                  </Button>
                )}
                {mode === 'photo' && (
                  <Button variant="outline" type="button" onClick={() => setMode('export')}>
                    <ArrowLeft />
                    {t('Quitter')}
                  </Button>
                )}
              </header>
            )}

            {!editing && mode === 'manual' && (
              <div className="panel-stack">
                {bodyEditing && (
                  <>
                    <ControlSection
                      title="Corps"
                      subtitle="Construction, forme et couleur de la tête de l’avatar."
                    >
                      <BodyConstructionAccordion
                        controller={controller}
                        reduceMotion={Boolean(reduceMotion)}
                      />
                      <InspectorCard className="color-panel">
                        <PanelTitle
                          level={3}
                          title="Couleur du corps"
                          subtitle="Couleur de base utilisée par les poses et les expressions."
                        />
                        <ColorField
                          label="Corps"
                          value={activeAvatar.colors.body}
                          onChange={body => updateAvatarColors({ body })}
                        />
                      </InspectorCard>
                    </ControlSection>
                    <ControlSection
                      title="Rendu"
                      subtitle="Le rendu Pixel est temporairement désactivé."
                    >
                      <InspectorCard className="render-style-panel render-style-disabled">
                        <PanelTitle
                          level={3}
                          title="Type de rendu"
                          subtitle="Le mode Vectoriel est utilisé pour l’instant."
                        />
                        <div className="render-style-status">
                          <Badge variant="secondary">{t('Vectoriel')}</Badge>
                        </div>
                      </InspectorCard>
                    </ControlSection>
                    <ControlSection
                      title="Yeux"
                      subtitle="Forme, placement, orientation et couleur du regard par défaut."
                    >
                      <p className="section-description">
                        {t(
                          'Définis l’identité du regard de cet avatar. Les poses s’ajoutent ensuite à cette base.'
                        )}
                      </p>
                      {(['width', 'height', 'size'] as const).map(dimension => (
                        <InspectorCard className="compact" key={`avatar-${dimension}`}>
                          <div className="panel-inline-title">
                            <h3>
                              {t(
                                {
                                  width: 'Largeur',
                                  height: 'Hauteur',
                                  size: 'Taille proportionnelle',
                                }[dimension]
                              )}
                            </h3>
                            <LinkButton
                              linked={linked[dimension]}
                              label={`Lier ${dimension}`}
                              onClick={() =>
                                setLinked(current => ({
                                  ...current,
                                  [dimension]: !current[dimension],
                                }))
                              }
                            />
                          </div>
                          <div className="eye-columns">
                            {(['Left', 'Right'] as Side[]).map(side => {
                              const width = activeAvatarEyes[`width${side}`]
                              const height = activeAvatarEyes[`height${side}`]
                              const value =
                                dimension === 'width'
                                  ? width
                                  : dimension === 'height'
                                    ? height
                                    : Math.max(width, height)
                              return (
                                <NumericField
                                  key={side}
                                  label={side === 'Left' ? 'Œil gauche' : 'Œil droit'}
                                  value={value}
                                  min={10}
                                  max={dimension === 'size' ? 110 : 100}
                                  unit="u"
                                  onActiveChange={active =>
                                    updateHighlight(
                                      active
                                        ? linked[dimension]
                                          ? 'both'
                                          : side === 'Left'
                                            ? 'left'
                                            : 'right'
                                        : null
                                    )
                                  }
                                  onChange={next =>
                                    dimension === 'size'
                                      ? updateAvatarEyeSize(side, next)
                                      : updateAvatarEyeDimension(side, dimension, next)
                                  }
                                />
                              )
                            })}
                          </div>
                        </InspectorCard>
                      ))}
                      <InspectorCard>
                        <div className="panel-inline-title">
                          <div>
                            <h3>{t('Position et espacement')}</h3>
                            <p className="panel-inline-subtitle">
                              {t('Coordonnées propres à l’avatar, indépendantes des poses.')}
                            </p>
                          </div>
                          <LinkButton
                            linked={linked.position}
                            label="Lier la position des yeux"
                            onClick={() =>
                              setLinked(current => ({ ...current, position: !current.position }))
                            }
                          />
                        </div>
                        <div className="eye-columns">
                          {(['Left', 'Right'] as Side[]).map(side => (
                            <div className="eye-column" key={side}>
                              <h3>{t(side === 'Left' ? 'Œil gauche' : 'Œil droit')}</h3>
                              <NumericField
                                label="Horizontale"
                                value={activeAvatarEyes[`positionX${side}`]}
                                unit="u"
                                onActiveChange={active =>
                                  updateHighlight(
                                    active
                                      ? linked.position
                                        ? 'both'
                                        : side === 'Left'
                                          ? 'left'
                                          : 'right'
                                      : null
                                  )
                                }
                                onChange={value => updateAvatarEyePosition(side, 'X', value)}
                              />
                              <NumericField
                                label="Verticale"
                                value={activeAvatarEyes[`positionY${side}`]}
                                unit="u"
                                onActiveChange={active =>
                                  updateHighlight(
                                    active
                                      ? linked.position
                                        ? 'both'
                                        : side === 'Left'
                                          ? 'left'
                                          : 'right'
                                      : null
                                  )
                                }
                                onChange={value => updateAvatarEyePosition(side, 'Y', value)}
                              />
                            </div>
                          ))}
                        </div>
                        <div className="position-spacing">
                          <NumericField
                            label="Espacement"
                            value={activeAvatarEyes.spacing}
                            min={0}
                            max={150}
                            unit="u"
                            onActiveChange={active => updateHighlight(active ? 'both' : null)}
                            onChange={spacing => updateAvatarEyes({ spacing })}
                          />
                        </div>
                      </InspectorCard>
                      <InspectorCard>
                        <div className="panel-inline-title">
                          <PanelTitle
                            level={3}
                            title="Rotation locale"
                            subtitle="Inclinaison par défaut propre à chaque œil."
                          />
                          <LinkButton
                            linked={linked.rotation}
                            label="Lier les rotations"
                            onClick={() =>
                              setLinked(current => ({ ...current, rotation: !current.rotation }))
                            }
                          />
                        </div>
                        <div className="eye-columns">
                          <NumericField
                            label="Œil gauche"
                            value={activeAvatarEyes.leftAngle}
                            unit="°"
                            onActiveChange={active =>
                              updateHighlight(active ? (linked.rotation ? 'both' : 'left') : null)
                            }
                            onChange={leftAngle =>
                              updateAvatarEyes({
                                leftAngle,
                                ...(linked.rotation ? { rightAngle: -leftAngle } : {}),
                              })
                            }
                          />
                          <NumericField
                            label="Œil droit"
                            value={activeAvatarEyes.rightAngle}
                            unit="°"
                            onActiveChange={active =>
                              updateHighlight(active ? (linked.rotation ? 'both' : 'right') : null)
                            }
                            onChange={rightAngle =>
                              updateAvatarEyes({
                                rightAngle,
                                ...(linked.rotation ? { leftAngle: -rightAngle } : {}),
                              })
                            }
                          />
                        </div>
                      </InspectorCard>
                      <InspectorCard className="color-panel">
                        <PanelTitle
                          level={3}
                          title="Couleur des yeux"
                          subtitle="Couleur de base utilisée par les poses et les expressions."
                        />
                        <ColorField
                          label="Yeux"
                          value={activeAvatar.colors.eyes}
                          onChange={eyes => updateAvatarColors({ eyes })}
                        />
                      </InspectorCard>
                    </ControlSection>
                  </>
                )}
                {!bodyEditing && <PoseControls controller={controller} />}
              </div>
            )}
            {!editorPageOpen && mode === 'avatars' && <AvatarPage controller={controller} />}

            {!sequenceEditing && !editing && bodyEditing && (
              <footer className="workspace-footer">
                <div className="workspace-footer-secondary">
                  <Button
                    variant="destructive"
                    disabled={avatars.length <= 1}
                    onClick={() => setDeleteAvatarOpen(true)}
                  >
                    <Trash2 />
                    {t('Supprimer')}
                  </Button>
                  <Button variant="outline" onClick={() => duplicateAvatar(activeAvatar, true)}>
                    <Copy />
                    {t('Dupliquer')}
                  </Button>
                </div>
                <Button onClick={saveAvatarEditing}>{t('Enregistrer')}</Button>
              </footer>
            )}

            {!sequenceEditing && !editing && !bodyEditing && mode === 'expressions' && (
              <div className="panel-stack">
                <InspectorCard>
                  <div className="preset-header">
                    <div>
                      <p className="eyebrow">{expressions.length} presets</p>
                    </div>
                    <span>{t('Double-clic pour modifier')}</span>
                  </div>
                  <div className="expression-grid">
                    {expressions.map((preset, index) => (
                      <motion.div
                        className="expression-sort-item"
                        data-dragging={draggingExpressionId === preset.id || undefined}
                        key={preset.id}
                        layout="position"
                        layoutId={`expression-${preset.id}`}
                        animate={{
                          opacity: draggingExpressionId === preset.id ? 0.28 : 1,
                          scale: draggingExpressionId === preset.id ? 0.96 : 1,
                        }}
                        transition={
                          reduceMotion
                            ? { duration: 0 }
                            : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
                        }
                      >
                        <ExpressionCard
                          expression={preset}
                          index={index}
                          active={activeExpression === index}
                          surface={surface}
                          bodyNodes={bodyNodes}
                          colors={activeAvatar.colors}
                          avatarEyes={activeAvatarEyes}
                          renderStyle={activeAvatar.renderStyle}
                          previewId={String(index)}
                          onSelect={() => transitionToExpression(preset, index)}
                          onEdit={() => openExpressionEditor(index, preset)}
                          onDuplicate={() => duplicateExpression(index, preset)}
                          onDelete={() => {
                            openExpressionEditor(index, preset)
                            setDeleteExpressionOpen(true)
                          }}
                          runtimeError={expressionSemanticKeyError(preset)}
                          draggable
                          onDragStart={event => {
                            expressionDragOrigin.current = expressions
                            expressionDragPreview.current = expressions
                            draggedExpressionId.current = preset.id
                            setDraggingExpressionId(preset.id)
                            event.dataTransfer.effectAllowed = 'move'
                          }}
                          onDragEnter={() => previewExpressionMove(preset.id)}
                          onDragOver={event => {
                            event.preventDefault()
                            event.dataTransfer.dropEffect = 'move'
                          }}
                          onDrop={event => {
                            event.preventDefault()
                            commitExpressionMove(preset.id)
                          }}
                          onDragEnd={cancelExpressionMove}
                        />
                      </motion.div>
                    ))}
                    <Button
                      className="expression-add creation-card"
                      variant="outline"
                      type="button"
                      onDragOver={event => event.preventDefault()}
                      onDrop={event => {
                        event.preventDefault()
                        commitExpressionMove(null)
                      }}
                      onClick={() => openExpressionEditor(null, expression)}
                      aria-label={t('Nouvelle expression')}
                    >
                      <Plus />
                    </Button>
                  </div>
                </InspectorCard>
                <InspectorCard>
                  <PanelTitle
                    title="Mouvement"
                    subtitle="Motion interpole les valeurs et notre moteur effectue le slerp quaternion."
                  />
                  <NumericField
                    label="Vitesse du ressort"
                    value={springSpeed}
                    step={0.5}
                    onChange={value => {
                      springSpeedRef.current = value
                      setSpringSpeed(value)
                    }}
                  />
                  <div className="button-row">
                    <Button variant="outline" type="button" onClick={() => blink()}>
                      {t('Cligner')}
                    </Button>
                    <Button
                      variant="outline"
                      type="button"
                      onClick={() => {
                        const index = Math.floor(Math.random() * expressions.length)
                        transitionToExpression(expressions[index], index)
                      }}
                    >
                      {t('Expression aléatoire')}
                    </Button>
                  </div>
                </InspectorCard>
              </div>
            )}

            {!sequenceEditing && !editing && !bodyEditing && mode === 'states' && (
              <div className="panel-stack">
                <InspectorCard>
                  <div className="preset-header">
                    <div>
                      <p className="eyebrow">
                        {sequences.length} {t('animations')}
                      </p>
                    </div>
                  </div>
                  <div className="state-groups">
                    {groupSequences(sequences).map(group => (
                      <div
                        key={group.name}
                        onDragOver={event => event.preventDefault()}
                        onDrop={event => {
                          event.preventDefault()
                          commitStateMove(null, group.name)
                        }}
                      >
                        <strong>
                          {group.sequences.every(sequence => sequence.builtIn)
                            ? t(group.name)
                            : group.name}
                        </strong>
                        <div className="state-buttons">
                          {group.sequences.map(sequence => {
                            const firstStep = sequence.steps[0]
                            const firstExpression = firstStep
                              ? resolveSequenceExpression(expressions, firstStep.expressionId)
                                  .expression
                              : undefined
                            const card = (
                              <Button
                                className="expression-card state-card"
                                variant="outline"
                                type="button"
                                draggable
                                aria-pressed={selectedState === sequence.id}
                                onDragStart={event => {
                                  stateDragOrigin.current = sequences
                                  stateDragPreview.current = sequences
                                  draggedStateId.current = sequence.id
                                  setDraggingStateId(sequence.id)
                                  event.dataTransfer.effectAllowed = 'move'
                                }}
                                onDragEnter={() => previewStateMove(sequence.id, group.name)}
                                onDragOver={event => {
                                  event.preventDefault()
                                  event.stopPropagation()
                                  event.dataTransfer.dropEffect = 'move'
                                }}
                                onDrop={event => {
                                  event.preventDefault()
                                  event.stopPropagation()
                                  commitStateMove(sequence.id, group.name)
                                }}
                                onDragEnd={cancelStateMove}
                                onClick={() => launchSequence(sequence)}
                                onDoubleClick={() => openSequenceEditor(sequence)}
                              >
                                <ExpressionPreview
                                  expression={
                                    firstExpression ?? expressions[0] ?? defaultExpression
                                  }
                                  surface={surface}
                                  bodyNodes={bodyNodes}
                                  colors={activeAvatar.colors}
                                  avatarEyes={activeAvatarEyes}
                                  renderStyle={activeAvatar.renderStyle}
                                  id={`state-card-${sequence.id}`}
                                />
                                {animationSemanticKeyError(sequence) && (
                                  <i
                                    className="runtime-key-missing"
                                    role="img"
                                    aria-label={animationSemanticKeyError(sequence) ?? undefined}
                                    title={animationSemanticKeyError(sequence) ?? undefined}
                                  >
                                    !
                                  </i>
                                )}
                                <span>{sequence.builtIn ? t(sequence.name) : sequence.name}</span>
                              </Button>
                            )
                            return (
                              <motion.div
                                className="state-sort-item"
                                data-dragging={draggingStateId === sequence.id || undefined}
                                key={sequence.id}
                                layout="position"
                                layoutId={`state-${sequence.id}`}
                                animate={{
                                  opacity: draggingStateId === sequence.id ? 0.28 : 1,
                                  scale: draggingStateId === sequence.id ? 0.96 : 1,
                                }}
                                transition={
                                  reduceMotion
                                    ? { duration: 0 }
                                    : { type: 'spring', stiffness: 520, damping: 42, mass: 0.7 }
                                }
                              >
                                <ContextMenu>
                                  <ContextMenuTrigger render={card} />
                                  <ContextMenuContent>
                                    <ContextMenuItem onClick={() => openSequenceEditor(sequence)}>
                                      <Pencil />
                                      {t('Modifier')}
                                    </ContextMenuItem>
                                    <ContextMenuItem onClick={() => duplicateState(sequence)}>
                                      <Copy />
                                      {t('Dupliquer')}
                                    </ContextMenuItem>
                                    <ContextMenuSeparator />
                                    <ContextMenuItem
                                      variant="destructive"
                                      onClick={() => {
                                        openSequenceEditor(sequence)
                                        setDeleteSequenceOpen(true)
                                      }}
                                    >
                                      <Trash2 />
                                      {t('Supprimer')}
                                    </ContextMenuItem>
                                  </ContextMenuContent>
                                </ContextMenu>
                              </motion.div>
                            )
                          })}
                        </div>
                      </div>
                    ))}
                    <div className="state-buttons">
                      <Button
                        className="expression-add creation-card"
                        variant="outline"
                        type="button"
                        onClick={() => openSequenceEditor()}
                        aria-label={t('Nouvelle animation')}
                      >
                        <Plus />
                      </Button>
                    </div>
                  </div>
                </InspectorCard>
              </div>
            )}

            {!sequenceEditing && !editing && !bodyEditing && mode === 'photo' && (
              <div className="panel-stack photo-panel-stack">
                <Accordion
                  className="photo-tool-accordion"
                  multiple
                  value={photoPanelSections}
                  onValueChange={nextSections => {
                    const sections = nextSections as typeof photoPanelSections
                    const currentSections = new Set(photoPanelSections)
                    const openedSection = sections.find(section => !currentSections.has(section))
                    setPhotoPanelSections(sections)
                    if (openedSection) setPhotoTool(openedSection)
                  }}
                >
                  <AccordionItem
                    className="photo-tool-accordion-item"
                    value="pose"
                    data-active-tool={photoTool === 'pose' || undefined}
                  >
                    <AccordionTrigger className="photo-tool-accordion-trigger">
                      <span className="photo-tool-accordion-heading">
                        <span className="photo-tool-accordion-icon" aria-hidden="true">
                          <Move3D />
                        </span>
                        <span>
                          <strong>{t('Pose')}</strong>
                          <small>{t('Orientation, regard, couleurs et perspective.')}</small>
                        </span>
                      </span>
                    </AccordionTrigger>
                    <AccordionContent className="photo-tool-accordion-content">
                      <PoseControls controller={controller} />
                    </AccordionContent>
                  </AccordionItem>

                  <AccordionItem
                    className="photo-tool-accordion-item"
                    value="frame"
                    data-active-tool={photoTool === 'frame' || undefined}
                  >
                    <AccordionTrigger className="photo-tool-accordion-trigger">
                      <span className="photo-tool-accordion-heading">
                        <span className="photo-tool-accordion-icon" aria-hidden="true">
                          <Scan />
                        </span>
                        <span>
                          <strong>{t('Cadrage')}</strong>
                          <small>{t('Position, zoom et coins du cadre photo.')}</small>
                        </span>
                      </span>
                    </AccordionTrigger>
                    <AccordionContent className="photo-tool-accordion-content">
                      <div className="photo-frame-settings">
                        <div className="snapshot-composition-fields">
                          <NumericField
                            label="Position X"
                            value={snapshotComposition.x}
                            min={-180}
                            max={180}
                            step={1}
                            onChange={x => updateSnapshotComposition({ x })}
                          />
                          <NumericField
                            label="Position Y"
                            value={snapshotComposition.y}
                            min={-180}
                            max={180}
                            step={1}
                            onChange={y => updateSnapshotComposition({ y })}
                          />
                          <NumericField
                            label="Zoom"
                            value={snapshotComposition.scale * 100}
                            min={40}
                            max={300}
                            step={1}
                            unit="%"
                            onChange={zoom => updateSnapshotComposition({ scale: zoom / 100 })}
                          />
                          <NumericField
                            label="Coins arrondis"
                            value={snapshotComposition.cornerRadius}
                            min={0}
                            max={50}
                            step={1}
                            unit="%"
                            onChange={cornerRadius => updateSnapshotComposition({ cornerRadius })}
                          />
                        </div>
                        <Button
                          className="photo-reset-frame"
                          variant="outline"
                          type="button"
                          onClick={() =>
                            setSnapshotComposition(current => ({
                              ...current,
                              x: 0,
                              y: 0,
                              scale: 1,
                            }))
                          }
                        >
                          <RotateCcw />
                          {t('Recentrer le cadrage')}
                        </Button>
                      </div>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>

                <InspectorCard className="photo-expression-card">
                  <PanelTitle
                    title="Expression"
                    subtitle="Choisis l’expression visible sur la photo."
                  />
                  <div className="expression-grid photo-expression-grid">
                    {expressions.map((preset, index) => (
                      <ExpressionCard
                        key={preset.id}
                        expression={preset}
                        index={index}
                        active={activeExpression === index}
                        surface={surface}
                        bodyNodes={bodyNodes}
                        colors={activeAvatar.colors}
                        avatarEyes={activeAvatarEyes}
                        renderStyle={activeAvatar.renderStyle}
                        previewId={`photo-${preset.id}`}
                        onSelect={() => transitionToExpression(preset, index)}
                        runtimeError={expressionSemanticKeyError(preset)}
                      />
                    ))}
                  </div>
                </InspectorCard>

                <InspectorCard>
                  <PanelTitle
                    title="Arrière-plan"
                    subtitle="Choisis un fond transparent, uni ou en dégradé."
                  />
                  <Field className="snapshot-background-field" orientation="horizontal">
                    <FieldTitle>{t('Style')}</FieldTitle>
                    <Select
                      value={snapshotBackground}
                      items={[
                        { value: 'transparent', label: t('Transparent') },
                        { value: 'solid', label: t('Uni') },
                        { value: 'linear', label: t('Dégradé linéaire') },
                        { value: 'radial', label: t('Dégradé radial') },
                      ]}
                      onValueChange={next =>
                        next && setSnapshotBackground(next as SnapshotBackground)
                      }
                    >
                      <SelectTrigger aria-label={t('Style d’arrière-plan')}>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="transparent">{t('Transparent')}</SelectItem>
                        <SelectItem value="solid">{t('Uni')}</SelectItem>
                        <SelectItem value="linear">{t('Dégradé linéaire')}</SelectItem>
                        <SelectItem value="radial">{t('Dégradé radial')}</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button
                      className="snapshot-random-button"
                      variant="ghost"
                      size="sm"
                      type="button"
                      disabled={snapshotBackground === 'transparent'}
                      onClick={() => {
                        if (snapshotBackground === 'transparent') return
                        const palette = randomSnapshotPalette(
                          snapshotBackground,
                          expression.bodyColor ?? activeAvatar.colors.body,
                          { colorFrom: snapshotColorFrom, colorTo: snapshotColorTo }
                        )
                        setSnapshotColorFrom(palette.colorFrom)
                        setSnapshotColorTo(palette.colorTo)
                      }}
                    >
                      <Shuffle />
                      {t('Aléatoire')}
                    </Button>
                  </Field>
                  {snapshotBackground !== 'transparent' && (
                    <div className="snapshot-colors">
                      <ColorField
                        label={snapshotBackground === 'solid' ? 'Couleur' : 'Départ'}
                        value={snapshotColorFrom}
                        onChange={setSnapshotColorFrom}
                      />
                      {(snapshotBackground === 'linear' || snapshotBackground === 'radial') && (
                        <ColorField
                          label="Arrivée"
                          value={snapshotColorTo}
                          onChange={setSnapshotColorTo}
                        />
                      )}
                    </div>
                  )}
                </InspectorCard>

                <InspectorCard>
                  <Field className="snapshot-background-field" orientation="horizontal">
                    <div>
                      <FieldTitle>{t('Format d’export')}</FieldTitle>
                      <small>{t('Choisis le type de fichier généré par le mode photo.')}</small>
                    </div>
                    <Select
                      value={snapshotFormat}
                      items={[
                        { value: 'png', label: 'PNG' },
                        { value: 'svg', label: 'SVG' },
                      ]}
                      onValueChange={next => next && setSnapshotFormat(next as SnapshotFormat)}
                    >
                      <SelectTrigger aria-label={t('Format d’export du mode photo')}>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="png">PNG</SelectItem>
                        <SelectItem value="svg">SVG</SelectItem>
                      </SelectContent>
                    </Select>
                  </Field>
                  <Separator className="snapshot-settings-separator" />
                  <Field className="snapshot-background-field" orientation="horizontal">
                    <div>
                      <FieldTitle>{t('Définition')}</FieldTitle>
                      <small>{t('Dimensions du fichier exporté.')}</small>
                    </div>
                    <Select
                      value={snapshotSize}
                      items={['512', '1024', '2048'].map(value => ({
                        value,
                        label: `${value} px`,
                      }))}
                      onValueChange={next => next && setSnapshotSize(next)}
                    >
                      <SelectTrigger aria-label={t('Définition du mode photo')}>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="512">512 px</SelectItem>
                        <SelectItem value="1024">1024 px</SelectItem>
                        <SelectItem value="2048">2048 px</SelectItem>
                      </SelectContent>
                    </Select>
                  </Field>
                </InspectorCard>

                <Button className="snapshot-export-button" type="button" onClick={takePicture}>
                  <Camera />
                  {t('Prendre une photo')}
                  <span>{snapshotFormat.toUpperCase()}</span>
                </Button>
              </div>
            )}

            {!sequenceEditing && !editing && !bodyEditing && mode === 'export' && (
              <Accordion className="export-panel" defaultValue={['avatar']}>
                <ExportSection
                  value="avatar"
                  title="Exporter l’avatar"
                  subtitle="Choisis les animations puis utilise la même définition JSON avec React ou JavaScript."
                >
                  <InspectorCard>
                    <div className="export-avatar-summary">
                      <ExpressionPreview
                        expression={expressions[0] ?? defaultExpression}
                        surface={activeAvatar.body.primary}
                        bodyNodes={activeAvatar.body.nodes}
                        colors={activeAvatar.colors}
                        avatarEyes={activeAvatarEyes}
                        renderStyle={activeAvatar.renderStyle}
                        id={`export-avatar-${activeAvatar.id}`}
                      />
                      <div>
                        <small>{t('Avatar sélectionné')}</small>
                        <strong>{activeAvatar.name}</strong>
                      </div>
                    </div>
                  </InspectorCard>

                  <section className="export-format-section" aria-label={t('Format')}>
                    <PanelTitle
                      title="Format"
                      subtitle="Choisis l’intégration correspondant à ton projet."
                    />
                    <div className="export-format-grid">
                      <Button
                        variant="outline"
                        type="button"
                        aria-pressed={exportFormat === 'react'}
                        onClick={() => setExportFormat('react')}
                      >
                        <FileCode2 />
                        <span>
                          <strong>React / TypeScript</strong>
                          <small>{t('JSON runtime + createAvatar')}</small>
                        </span>
                      </Button>
                      <Button
                        variant="outline"
                        type="button"
                        aria-pressed={exportFormat === 'javascript'}
                        onClick={() => setExportFormat('javascript')}
                      >
                        <FileCode2 />
                        <span>
                          <strong>{t('JavaScript / ESM')}</strong>
                          <small>{t('JSON runtime + avatar-web')}</small>
                        </span>
                      </Button>
                    </div>
                  </section>

                  <InspectorCard>
                    <div className="preset-header export-animation-header">
                      <div>
                        <p className="eyebrow">
                          {selectedExportAnimations.length}/{sequences.length} {t('sélectionnées')}
                        </p>
                        <h2>{t('Animations à exporter')}</h2>
                      </div>
                      <Button
                        variant="ghost"
                        size="sm"
                        type="button"
                        aria-expanded={exportAnimationsOpen}
                        onClick={() => setExportAnimationsOpen(open => !open)}
                      >
                        {exportAnimationsOpen ? <ChevronUp /> : <ChevronDown />}
                        {t(exportAnimationsOpen ? 'Masquer la sélection' : 'Personnaliser')}
                      </Button>
                    </div>
                    {exportAnimationsOpen && (
                      <div className="export-animation-picker">
                        <Button
                          className="export-animation-select-all"
                          variant="ghost"
                          size="sm"
                          type="button"
                          onClick={() =>
                            setExportAnimationIds(
                              selectedExportAnimations.length === sequences.length
                                ? []
                                : sequences.map(animation => animation.id)
                            )
                          }
                        >
                          {t(
                            selectedExportAnimations.length === sequences.length
                              ? 'Tout désélectionner'
                              : 'Tout sélectionner'
                          )}
                        </Button>
                        <div className="state-buttons export-animation-grid">
                          {sequences.map(animation => {
                            const firstStep = animation.steps[0]
                            const firstExpression = firstStep
                              ? resolveSequenceExpression(expressions, firstStep.expressionId)
                                  .expression
                              : undefined
                            return (
                              <Button
                                className="expression-card state-card"
                                variant="outline"
                                type="button"
                                key={animation.id}
                                aria-pressed={exportAnimationIdSet.has(animation.id)}
                                onClick={() => toggleExportAnimation(animation.id)}
                              >
                                <ExpressionPreview
                                  expression={
                                    firstExpression ?? expressions[0] ?? defaultExpression
                                  }
                                  surface={surface}
                                  bodyNodes={bodyNodes}
                                  colors={activeAvatar.colors}
                                  avatarEyes={activeAvatarEyes}
                                  renderStyle={activeAvatar.renderStyle}
                                  id={`export-animation-${animation.id}`}
                                />
                                <span>
                                  {animation.builtIn ? t(animation.name) : animation.name}
                                </span>
                              </Button>
                            )
                          })}
                        </div>
                      </div>
                    )}
                  </InspectorCard>

                  {runtimeExportErrors.length > 0 && (
                    <InspectorCard>
                      <div className="runtime-export-error" role="alert">
                        <div className="runtime-export-error-heading">
                          <TriangleAlert />
                          <strong>{t('Export runtime incomplet')}</strong>
                        </div>
                        <ul className="runtime-error-list">
                          {runtimeExportErrors.map((error, index) => (
                            <li key={`${index}-${error}`}>{error}</li>
                          ))}
                        </ul>
                        <p className="runtime-export-error-help">
                          {t(
                            'Corrige les clés signalées dans les éditeurs Expressions ou Animations.'
                          )}
                        </p>
                        <div className="runtime-export-error-actions">
                          <Button
                            type="button"
                            variant="outline"
                            onClick={() => setMode('expressions')}
                          >
                            {t('Expressions')}
                          </Button>
                          <Button type="button" variant="outline" onClick={() => setMode('states')}>
                            {t('Animations')}
                          </Button>
                        </div>
                      </div>
                    </InspectorCard>
                  )}

                  <InspectorCard className="runtime-quick-start-card">
                    <div className="runtime-quick-start-heading">
                      <div>
                        <p className="eyebrow">{t('Démarrage rapide')}</p>
                      </div>
                    </div>
                    <div className="runtime-quick-start-actions">
                      <Button
                        type="button"
                        variant="ghost"
                        aria-label={
                          guideCopyStatus === 'success'
                            ? t('Guide d’utilisation copié dans le presse-papiers.')
                            : guideCopyStatus === 'error'
                              ? t('Impossible de copier le guide d’utilisation.')
                              : undefined
                        }
                        onClick={() => void copyRuntimeGuide()}
                      >
                        {guideCopyStatus === 'success' ? <Check /> : <Copy />}
                        {t('Copier les instructions pour l’IA')}
                      </Button>
                      <Button type="button" variant="ghost" onClick={() => setGuideOpen(true)}>
                        {t('Voir le guide complet')}
                        <ArrowRight />
                      </Button>
                    </div>

                    <div className="runtime-quick-start-step">
                      <span>{t('Installation')}</span>
                      <code>
                        <HighlightedRuntimeCode>
                          {exportFormat === 'react' ? reactQuickStartInstall : webQuickStartInstall}
                        </HighlightedRuntimeCode>
                      </code>
                    </div>

                    <div className="runtime-quick-start-step">
                      <span>{t('Utilisation minimale')}</span>
                      <pre tabIndex={0}>
                        <code>
                          <HighlightedRuntimeCode>
                            {exportFormat === 'react'
                              ? reactQuickStartExample(runtimePreviewAnimation)
                              : webQuickStartExample(runtimePreviewAnimation)}
                          </HighlightedRuntimeCode>
                        </code>
                      </pre>
                    </div>
                  </InspectorCard>

                  <InspectorCard className="runtime-export-card">
                    <div className="runtime-export-heading">
                      <div>
                        <small>{t('Prêt à exporter')}</small>
                        <strong>
                          {selectedExportAnimations.length} {t('animations')} ·{' '}
                          {runtimeDefinitionResult.ok
                            ? runtimeDefinitionResult.value.expressionOrder.length
                            : 0}{' '}
                          {t('expressions')}
                        </strong>
                      </div>
                      <p className="runtime-export-description">
                        {t(
                          exportFormat === 'javascript'
                            ? 'Le ZIP contient le JSON exporté, une démo index.html et son README. La démo charge avatar-web depuis un CDN.'
                            : 'Le ZIP contient le JSON exporté et un projet Vite React TypeScript prêt à lancer avec npm install puis npm run dev.'
                        )}
                      </p>
                    </div>

                    <div className="runtime-export-actions">
                      <Button
                        className="export-download"
                        type="button"
                        disabled={!runtimeDefinitionResult.ok}
                        onClick={downloadAvatarRuntimeDefinition}
                      >
                        <Download />
                        {t('Télécharger la définition .avatar.json')}
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        disabled={!runtimeDefinitionResult.ok}
                        onClick={downloadAvatarExport}
                      >
                        <Download />
                        {t(
                          exportFormat === 'javascript'
                            ? 'Télécharger la démo ESM (.zip)'
                            : 'Télécharger la démo React (.zip)'
                        )}
                      </Button>
                      <div className="runtime-export-secondary-actions">
                        <Button
                          type="button"
                          variant="outline"
                          disabled={!runtimeDefinitionResult.ok}
                          onClick={() => setRuntimePreviewOpen(true)}
                        >
                          <Play />
                          {t('Preview')}
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          disabled={!runtimeDefinitionResult.ok}
                          aria-label={
                            runtimeCopyStatus === 'success'
                              ? t('JSON runtime copié dans le presse-papiers.')
                              : runtimeCopyStatus === 'error'
                                ? t('Impossible de copier le JSON runtime.')
                                : undefined
                          }
                          onClick={() => void copyAvatarRuntimeDefinition()}
                        >
                          {runtimeCopyStatus === 'success' ? <Check /> : <Copy />}
                          {t('Copier le JSON')}
                        </Button>
                      </div>
                    </div>
                  </InspectorCard>
                  <RuntimePreviewDialog
                    definition={runtimeDefinitionResult.ok ? runtimeDefinitionResult.value : null}
                    initialAnimation={runtimePreviewAnimation}
                    open={runtimePreviewOpen}
                    onOpenChange={setRuntimePreviewOpen}
                  />
                  <RuntimeGuideDialog
                    animationKey={runtimePreviewAnimation}
                    integration={exportFormat}
                    open={guideOpen}
                    onOpenChange={setGuideOpen}
                  />
                </ExportSection>

                <ExportSection
                  value="snapshot"
                  title="Mode photo"
                  subtitle="Prépare une image statique directement dans l’aperçu principal."
                >
                  <InspectorCard className="photo-mode-launch-card">
                    <div className="photo-mode-launch-icon" aria-hidden="true">
                      <Camera />
                    </div>
                    <div>
                      <strong>{t('Composer dans le live preview')}</strong>
                      <p>
                        {t(
                          'Choisis une expression, ajuste la pose et cadre l’avatar dans un espace dédié.'
                        )}
                      </p>
                    </div>
                    <Button type="button" onClick={openPhotoMode}>
                      {t('Ouvrir le mode photo')}
                      <ArrowRight />
                    </Button>
                  </InspectorCard>
                </ExportSection>

                <ExportSection
                  value="project"
                  title="Projet du Studio"
                  subtitle="Transfère tous les avatars, expressions et animations vers un autre navigateur."
                >
                  <div className="project-transfer-actions">
                    <Button variant="outline" type="button" onClick={downloadStudioProject}>
                      <Download />
                      {t('Télécharger le projet JSON')}
                    </Button>
                    <Button
                      variant="outline"
                      type="button"
                      onClick={() => projectImportRef.current?.click()}
                    >
                      <Upload />
                      {t('Importer un projet JSON')}
                    </Button>
                    <input
                      ref={projectImportRef}
                      className="project-import-input"
                      type="file"
                      accept="application/json,.json"
                      aria-label={t('Importer un projet JSON')}
                      onChange={event => {
                        prepareStudioProjectImport(event.currentTarget.files?.[0])
                        event.currentTarget.value = ''
                      }}
                    />
                  </div>
                  {projectImportError && (
                    <p className="project-transfer-error" role="alert">
                      {projectImportError}
                    </p>
                  )}
                </ExportSection>
              </Accordion>
            )}
          </motion.div>
        </AnimatePresence>
        {activeSequence && !editorPageOpen && mode !== 'photo' && (
          <motion.footer
            className={`state-playback-footer${statePlayerExpanded ? ' is-expanded' : ''}`}
            style={{ y: playbackFooterY }}
          >
            <div className="state-playback-drag-handle-slot">
              <motion.div style={{ y: playbackHandleCounterY }}>
                <motion.button
                  className="state-playback-drag-handle"
                  style={{ y: playbackHandleY }}
                  type="button"
                  drag="y"
                  dragMomentum={false}
                  aria-expanded={statePlayerExpanded}
                  aria-label={t(
                    statePlayerExpanded
                      ? 'Masquer les détails de l’animation'
                      : 'Afficher les détails de l’animation'
                  )}
                  onTap={() => snapPlaybackFooter(!statePlayerExpanded)}
                  onDragStart={() => {
                    playbackFooterDragOriginY.current = playbackFooterY.get()
                  }}
                  onDrag={(_, info) => {
                    playbackFooterY.set(
                      Math.min(
                        playbackFooterCollapsedOffset,
                        Math.max(0, playbackFooterDragOriginY.current + info.offset.y)
                      )
                    )
                  }}
                  onDragEnd={(_, info) => {
                    playbackHandleY.set(0)
                    const projectedY = playbackFooterY.get() + info.velocity.y * 0.16
                    snapPlaybackFooter(projectedY < playbackFooterCollapsedOffset / 2)
                  }}
                >
                  <span />
                </motion.button>
              </motion.div>
            </div>
            <div className="state-playback-bar">
              <div className="state-playback-timeline">
                {activeSequence.steps.map((step, position) => {
                  const resolved = resolveSequenceExpression(expressions, step.expressionId)
                  if (!resolved.expression) return null
                  return (
                    <Button
                      className="state-playback-step"
                      variant="outline"
                      type="button"
                      key={step.id}
                      aria-pressed={activeExpression === resolved.index}
                      onClick={() =>
                        transitionToExpression(resolved.expression, resolved.index, step)
                      }
                    >
                      <ExpressionPreview
                        expression={resolved.expression}
                        surface={surface}
                        bodyNodes={bodyNodes}
                        colors={activeAvatar.colors}
                        avatarEyes={activeAvatarEyes}
                        renderStyle={activeAvatar.renderStyle}
                        id={`player-${activeSequence.id}-${position}`}
                      />
                      {playbackVisual.position === position && (
                        <span
                          className="state-playback-progress"
                          key={`${step.id}-${playbackVisual.run}`}
                          aria-hidden="true"
                          style={
                            {
                              animationDuration: `${Math.max(playbackVisual.durationMs, 1)}ms`,
                              animationPlayState: statePlaying ? 'running' : 'paused',
                            } as CSSProperties
                          }
                        />
                      )}
                    </Button>
                  )
                })}
              </div>
              <div className="state-playback-controls">
                <StatePlayer
                  name={activeSequenceLabel}
                  status={playbackStatus}
                  onToggle={toggleStatePlayback}
                  onStop={stopState}
                />
              </div>
            </div>
            <motion.div
              ref={playbackDetailsRef}
              className="state-playback-details-shell"
              style={{ opacity: playbackDetailsOpacity }}
              aria-hidden={!statePlayerExpanded}
            >
              <div className="state-playback-details">
                <div className="state-playback-details-header">
                  <div>
                    <p className="eyebrow">{t('Détails de l’animation')}</p>
                    <h2>{activeSequenceLabel}</h2>
                    <p>
                      {activeSequence.builtIn
                        ? t(activeSequence.description)
                        : activeSequence.description}
                    </p>
                  </div>
                  <Badge variant="secondary">
                    {t('Mode de lecture')} · {t(activeSequence.playbackMode)}
                  </Badge>
                </div>
                <div className="state-playback-detail-grid">
                  <div>
                    <span>{t('Expressions')}</span>
                    <strong>{activeSequence.steps.length}</strong>
                    <small>
                      {activeSequence.steps
                        .map(step => formatSeconds(step.holdMs, language))
                        .join(' · ')}
                    </small>
                  </div>
                  <div>
                    <span>{t('Premier clignement')}</span>
                    <strong>
                      {activeSequence.blink.enabled
                        ? formatSeconds(activeSequence.blink.initialDelayMs, language)
                        : t('Désactivé')}
                    </strong>
                    <small>{t('après le lancement')}</small>
                  </div>
                  <div>
                    <span>{t('Intervalle du clignement')}</span>
                    <strong>
                      {formatSeconds(activeSequence.blink.minIntervalMs, language)}–
                      {formatSeconds(activeSequence.blink.maxIntervalMs, language)}
                    </strong>
                    <small>{t('tirage aléatoire')}</small>
                  </div>
                  <div>
                    <span>{t('Durée du clignement')}</span>
                    <strong>{activeSequence.blink.durationMs} ms</strong>
                    <small>{t('fermeture et ouverture')}</small>
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.footer>
        )}
        {!editorPageOpen && mode !== 'photo' && (
          <nav className="mobile-mode-tabs" aria-label={t('Mode d’édition')}>
            <Button
              className="mobile-mode-tab mobile-avatar-tab"
              variant="ghost"
              type="button"
              aria-pressed={mode === 'avatars'}
              aria-label={t('Choisir un avatar')}
              onClick={() => setMode('avatars')}
            >
              <ExpressionPreview
                expression={expressions[0] ?? defaultExpression}
                surface={activeAvatar.body.primary}
                bodyNodes={activeAvatar.body.nodes}
                colors={activeAvatar.colors}
                avatarEyes={activeAvatarEyes}
                renderStyle={activeAvatar.renderStyle}
                id={`active-avatar-tab-${activeAvatar.id}`}
              />
              <span>{activeAvatar.name}</span>
            </Button>
            {(
              [
                ['manual', t('Pose'), Move3D],
                ['expressions', t('Expressions'), Smile],
                ['states', t('Animations'), Play],
                ['export', t('Exporter'), Download],
              ] as const
            ).map(([value, label, Icon]) => (
              <Button
                className="mobile-mode-tab"
                variant="ghost"
                type="button"
                key={value}
                aria-pressed={mode === value}
                onClick={() => setMode(value)}
              >
                <Icon />
                <span>{label}</span>
              </Button>
            ))}
          </nav>
        )}
      </main>
    </Drawer>
  )
}