'use client'

import { useState, useRef, useCallback } from 'react'
import { useNoteEditorContext } from './note-editor-context'
import { LabelManager } from '@/components/label-manager'
import { LabelBadge } from '@/components/label-badge'
import { GhostTags } from '@/components/ghost-tags'
import { EditorImages } from '@/components/editor-images'
import { TitleSuggestions } from '@/components/title-suggestions'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  X, Plus, Palette, Image as ImageIcon, Bell, Eye, Link as LinkIcon, Sparkles,
  Maximize2, Copy, ArrowLeft, ChevronRight, PanelRight, Check, Loader2, Save, MoreHorizontal,
  Trash2, LogOut, Wand2, Share2, Wind, Paperclip, GraduationCap, FileDown, FileUp, Mic, MicOff, Printer
} from 'lucide-react'
import { FlashcardGenerateDialog } from '@/components/flashcards/flashcard-generate-dialog'
import { NoteShareDialog } from './note-share-dialog'
import { deleteNote, leaveSharedNote } from '@/app/actions/notes'
import { emitNoteChange } from '@/lib/note-change-sync'
import { useLanguage } from '@/lib/i18n'
import { NOTE_COLORS, NoteColor, Note } from '@/lib/types'
import { cn } from '@/lib/utils'
import { useVoiceTranscription } from '@/hooks/use-voice-transcription'
import { toast } from 'sonner'
import { format } from 'date-fns'
import { tiptapHTMLToMarkdown, markdownToHTML, extractMarkdownTitle } from '@/lib/editor/markdown-export'

interface NoteEditorToolbarProps {
  mode: 'fullPage' | 'dialog'
  onClose: () => void
  onToggleAttachments?: () => void
  attachmentsCount?: number
}

export function NoteEditorToolbar({ mode, onClose, onToggleAttachments, attachmentsCount }: NoteEditorToolbarProps) {
  const { state, actions, note, readOnly, fullPage, notebooks, fileInputRef, richTextEditorRef } = useNoteEditorContext()
  const { t } = useLanguage()
  const [isConverting, setIsConverting] = useState(false)
  const [shareOpen, setShareOpen] = useState(false)
  const [flashcardsOpen, setFlashcardsOpen] = useState(false)
  const notebookName = notebooks.find(nb => nb.id === note.notebookId)?.name || null

  const undoSnapshotRef = useRef<{ content: string; isMarkdown: boolean } | null>(null)

  // ── Voice transcription ──────────────────────────────────────────────────
  const handleTranscript = useCallback((text: string) => {
    const editor = richTextEditorRef?.current?.getEditor()
    if (editor) {
      editor.chain().focus().insertContent(' ' + text).run()
    }
  }, [richTextEditorRef])

  const { state: voiceState, toggle: toggleVoice, isSupported: voiceSupported } = useVoiceTranscription({
    onTranscript: handleTranscript,
  })

  // ── Markdown export ───────────────────────────────────────────────────────
  const handleExportMarkdown = () => {
    try {
      const editor = richTextEditorRef?.current?.getEditor()
      if (!editor) {
        toast.error(t('richTextEditor.markdownExportError'))
        return
      }
      const html = editor.getHTML()
      const title = state.title || note.title || 'note'
      const titleLine = title ? `# ${title}\n\n` : ''
      const markdown = titleLine + tiptapHTMLToMarkdown(html)
      const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `${title.replace(/[^a-z0-9\-_\s]/gi, '').trim().replace(/\s+/g, '-') || 'note'}.md`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
      toast.success(t('richTextEditor.markdownExportSuccess'))
    } catch {
      toast.error(t('richTextEditor.markdownExportError'))
    }
  }

  const handleExportPdf = async () => {
    const editor = richTextEditorRef?.current?.getEditor()
    if (!editor) return
    const title = state.title || note.title || 'Note'

    toast.loading(t('richTextEditor.pdfExportLoading') || 'Génération du PDF...', { id: 'pdf-export' })

    try {
      const editorEl = document.querySelector('.ProseMirror') as HTMLElement
      if (!editorEl) throw new Error('Editor not found')

      // Clone the editor DOM to process it for print
      const clone = editorEl.cloneNode(true) as HTMLElement

      // Remove all action buttons, toolbars, and UI elements
      clone.querySelectorAll('button, .drag-handle, [contenteditable="false"], .opacity-0, .group-hover\\:opacity-100').forEach(el => el.remove())
      clone.querySelectorAll('[title]').forEach(el => {
        const title = el.getAttribute('title')
        if (title && (title.includes('Supprimer') || title.includes('Delete') || title.includes('Désactiver') || title.includes('Disable') || title.includes('Modifier') || title.includes('Edit'))) {
          el.remove()
        }
      })

      // Render KaTeX equations properly
      const katex = (await import('katex')).default
      clone.querySelectorAll('.math-equation-block').forEach(el => {
        const latex = el.getAttribute('data-latex') || el.textContent || ''
        try {
          el.innerHTML = katex.renderToString(latex, { displayMode: true, throwOnError: false })
        } catch {}
      })
      clone.querySelectorAll('.inline-math').forEach(el => {
        const latex = el.getAttribute('data-latex') || el.textContent || ''
        try {
          el.innerHTML = katex.renderToString(latex, { displayMode: false, throwOnError: false })
        } catch {}
      })

      // Force show all toggle content
      clone.querySelectorAll('[class*="hidden"]').forEach(el => {
        (el as HTMLElement).style.display = 'block'
      })

      // Apply callout colors as inline styles (Tailwind classes won't work in print window)
      clone.querySelectorAll('[data-callout-type]').forEach(el => {
        const type = el.getAttribute('data-callout-type')
        const colors: Record<string, { bg: string; border: string }> = {
          info: { bg: '#eff6ff', border: '#93c5fd' },
          warning: { bg: '#fffbeb', border: '#fcd34d' },
          tip: { bg: '#faf5ff', border: '#c4b5fd' },
          success: { bg: '#f0fdf4', border: '#86efac' },
          danger: { bg: '#fef2f2', border: '#fca5a5' },
        }
        const c = colors[type || 'info'] || colors.info
        const inner = el.querySelector('div')
        if (inner) {
          (inner as HTMLElement).style.background = c.bg
          (inner as HTMLElement).style.borderColor = c.border
        }
      })

      const cloneHtml = clone.innerHTML

      const printWindow = window.open('', '_blank')
      if (!printWindow) {
        toast.error(t('richTextEditor.pdfExportBlocked') || 'Popup bloqué', { id: 'pdf-export' })
        return
      }

      printWindow.document.write(`<!DOCTYPE html><html dir="auto"><head><meta charset="utf-8"><title>${title}</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
      <style>
        @page { margin: 1.5cm; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 720px; margin: 0 auto; line-height: 1.7; color: #1a1a1a; font-size: 14px; }
        h1 { font-size: 1.8em; border-bottom: 2px solid #e5e5e5; padding-bottom: 0.3em; margin-bottom: 0.5em; }
        h2 { font-size: 1.4em; margin-top: 1.5em; }
        h3 { font-size: 1.2em; margin-top: 1.2em; }
        p { margin: 0.6em 0; }
        ul, ol { padding-left: 1.5em; }
        li { margin: 0.3em 0; }
        blockquote { border-left: 3px solid #d4d4d4; padding-left: 1em; color: #555; font-style: italic; margin: 0.8em 0; }
        pre { background: #f5f5f5; padding: 0.8em; border-radius: 6px; overflow-x: auto; font-size: 13px; }
        code { font-family: 'SF Mono', Menlo, monospace; }
        table { border-collapse: collapse; width: 100%; margin: 1em 0; }
        th, td { border: 1px solid #ddd; padding: 0.5em 0.8em; text-align: left; }
        th { background: #f5f5f5; font-weight: 600; }
        img { max-width: 100%; height: auto; border-radius: 4px; }
        .callout-block { padding: 0.8em 1em; border-radius: 8px; border-left: 4px solid; margin: 0.8em 0; }
        .callout-block[data-callout-type="info"] { background: #eff6ff; border-color: #3b82f6; }
        .callout-block[data-callout-type="warning"] { background: #fffbeb; border-color: #f59e0b; }
        .callout-block[data-callout-type="tip"] { background: #faf5ff; border-color: #8b5cf6; }
        .callout-block[data-callout-type="success"] { background: #f0fdf4; border-color: #22c55e; }
        .callout-block[data-callout-type="danger"] { background: #fef2f2; border-color: #ef4444; }
        .toggle-block { border: 1px solid #e5e5e5; border-radius: 8px; margin: 0.8em 0; overflow: hidden; }
        .toggle-block > div:first-child { background: #f9f9f9; padding: 0.5em 0.8em; font-weight: 600; font-size: 0.85em; }
        .toggle-content { padding: 0.5em 0.8em; }
        .columns-block { display: flex; gap: 16px; margin: 0.8em 0; }
        .columns-block > div { flex: 1; }
        .math-equation-block { margin: 1em 0; text-align: center; }
        .outline-block { border: 1px solid #e5e5e5; border-radius: 8px; padding: 0.8em; margin: 1em 0; }
        .link-preview-block { border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; margin: 0.8em 0; }
        .link-preview-searchable { display: none !important; }
        a { color: #A47148; text-decoration: none; }
        a:hover { text-decoration: underline; }
        @media print { body { margin: 0; max-width: 100%; } }
      </style></head><body><h1>${title}</h1>${cloneHtml}</body></html>`)
      printWindow.document.close()

      setTimeout(() => {
        printWindow.focus()
        printWindow.print()
        toast.success(t('richTextEditor.pdfExportSuccess') || 'PDF prêt !', { id: 'pdf-export' })
      }, 800)
    } catch (e: any) {
      toast.error(e.message || 'Erreur export PDF', { id: 'pdf-export' })
    }
  }

  // ── Markdown import ───────────────────────────────────────────────────────
  const openMarkdownImport = () => {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = '.md,text/markdown'
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (!file) return
      const reader = new FileReader()
      reader.onload = (ev) => {
        try {
          const md = ev.target?.result as string
          const html = markdownToHTML(md)
          const extractedTitle = extractMarkdownTitle(md)
          const editor = richTextEditorRef?.current?.getEditor()
          if (editor) editor.commands.setContent(html)
          actions.setContent(html)
          if (extractedTitle) actions.setTitle(extractedTitle)
          toast.success(t('richTextEditor.markdownImportSuccess'))
        } catch {
          toast.error(t('richTextEditor.markdownExportError'))
        }
      }
      reader.readAsText(file)
    }
    input.click()
  }

  const handleConvertToRichtext = async () => {
    if (isConverting || !state.content.trim()) return
    setIsConverting(true)

    const snapshot = { content: state.content, isMarkdown: state.isMarkdown }
    undoSnapshotRef.current = snapshot

    try {
      let html: string
      if (state.isMarkdown) {
        const { marked } = await import('marked')
        html = await marked(state.content, { async: false }) as string
      } else {
        html = state.content
          .split(/\n{2,}/)
          .map(para => `<p>${para.trim().replace(/\n/g, '<br />')}</p>`)
          .join('')
      }
      actions.setContent(html)
      actions.setIsMarkdown(false)

      toast.success(t('notes.convertedToRichText') || 'Converted to rich text', {
        duration: 8000,
        action: {
          label: t('notes.undo') || '↩ Undo',
          onClick: () => {
            const snap = undoSnapshotRef.current
            if (!snap) return
            actions.setContent(snap.content)
            if (snap.isMarkdown) actions.setIsMarkdown(true)
            undoSnapshotRef.current = null
            toast.info(t('ai.undoApplied') || 'Conversion undone')
          },
        },
      })
    } catch {
      toast.error(t('notes.transformFailed') || 'Conversion failed')
    } finally {
      setIsConverting(false)
    }
  }

  if (mode === 'fullPage') {
    const handleCloseWithSave = async () => {
      if (state.isDirty && !state.isSaving) {
        await actions.handleSaveInPlace()
      }
      onClose()
    }

    return (
      <div className="px-4 sm:px-8 md:px-12 py-4 sm:py-6 md:py-8 flex items-center justify-between sticky top-0 bg-white/95 dark:bg-background/95 backdrop-blur-sm z-40 border-b border-border dark:border-white/10">
        <button
          onClick={handleCloseWithSave}
          className="flex items-center gap-2 text-foreground hover:opacity-60 transition-opacity"
        >
          <ArrowLeft size={18} />
          <span className="text-sm font-medium">{t('notes.backToCollection')}</span>
        </button>

        <div className="flex items-center gap-4">
          <span className="hidden sm:flex items-center gap-1.5 text-[11px] text-foreground/40 select-none">
            {state.isSaving
              ? <><Loader2 className="h-3 w-3 animate-spin" /><span>{t('notes.saving')}</span></>
              : state.isDirty
              ? <><span className="h-1.5 w-1.5 rounded-full bg-amber-400 inline-block" /><span>{t('notes.dirtyStatus')}</span></>
              : <><Check className="h-3 w-3 text-emerald-500" /><span>{t('notes.savedStatus')}</span></>}
          </span>

          {state.isMarkdown && !readOnly && (
            <button
              title={state.showMarkdownPreview ? t('notes.markdownEditingTitle') : t('notes.markdownPreviewTitle')}
              aria-label={state.showMarkdownPreview ? t('notes.markdownEditingTitle') : t('notes.markdownPreviewTitle')}
              onClick={() => actions.setShowMarkdownPreview(!state.showMarkdownPreview)}
              className={cn(
                'p-1.5 rounded-full border transition-all duration-300',
                state.showMarkdownPreview
                  ? 'bg-foreground text-background border-foreground'
                  : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5'
              )}
            >
              <Eye size={16} />
            </button>
          )}

          {state.isMarkdown && !readOnly && (
            <button
              title={t('ai.convertToRichtext') || 'Convert to Rich Text'}
              aria-label={t('ai.convertToRichtext') || 'Convert to Rich Text'}
              onClick={handleConvertToRichtext}
              disabled={isConverting}
              className={cn(
                'p-1.5 rounded-full border transition-all duration-300',
                'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5',
                isConverting && 'opacity-50 cursor-not-allowed'
              )}
            >
              {isConverting ? <Loader2 size={14} className="animate-spin" /> : <Wand2 size={14} />}
            </button>
          )}

          <button
            title={t('ai.openAssistant')}
            aria-label={t('ai.openAssistant')}
            onClick={() => { actions.setAiOpen(!state.aiOpen); actions.setInfoOpen(false) }}
            className={cn(
              'p-1.5 rounded-full border transition-all duration-300',
              state.aiOpen
                ? 'bg-foreground text-background border-foreground'
                : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5'
            )}
          >
            <Sparkles size={16} />
          </button>

          <button
            title={t('notes.brainstormThisIdea')}
            aria-label={t('notes.brainstormThisIdeaAria')}
            onClick={() => {
              const title = note.title || ''
              const summary = state.content?.replace(/<[^>]*>/g, '').slice(0, 200) || ''
              const seed = title ? `${title}. ${summary}` : summary
              if (!seed.trim()) return
              window.open(`/brainstorm?seed=${encodeURIComponent(seed.slice(0, 300))}&sourceNoteId=${note.id}`, '_self')
            }}
            className="p-1.5 rounded-full border border-brand-accent/30 dark:border-brand-accent/50 text-brand-accent hover:bg-brand-accent/10 dark:hover:bg-brand-accent/20 transition-all"
          >
            <Wind size={16} />
          </button>

          {!readOnly && (
            <button
              title={t('flashcards.toolbarGenerate')}
              aria-label={t('flashcards.toolbarGenerate')}
              onClick={() => setFlashcardsOpen(true)}
              className="p-1.5 rounded-full border border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-all"
            >
              <GraduationCap size={16} />
            </button>
          )}

          {!readOnly && voiceSupported && (
            <button
              title={voiceState === 'listening'
                ? (t('editor.voiceStop') || 'Arrêter la dictée')
                : (t('editor.voiceStart') || 'Dicter du texte')}
              aria-label={voiceState === 'listening' ? 'Stop voice' : 'Start voice'}
              onClick={toggleVoice}
              className={cn(
                'p-1.5 rounded-full border transition-all',
                voiceState === 'listening'
                  ? 'border-red-400 bg-red-50 dark:bg-red-950/30 text-red-500 animate-pulse'
                  : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5',
              )}
            >
              {voiceState === 'listening' ? <MicOff size={16} /> : <Mic size={16} />}
            </button>
          )}

          {!readOnly && onToggleAttachments && (
            <button
              title={t('notes.attachments') || 'Attachments'}
              aria-label={t('notes.attachments') || 'Attachments'}
              onClick={onToggleAttachments}
              className="relative p-1.5 rounded-full border border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-all"
            >
              <Paperclip size={16} />
              {(attachmentsCount ?? 0) > 0 && (
                <span className="absolute -top-1 -right-1 w-3.5 h-3.5 bg-primary text-primary-foreground text-[8px] font-bold rounded-full flex items-center justify-center">
                  {attachmentsCount}
                </span>
              )}
            </button>
          )}

          {!readOnly && (
            <div className="flex items-center gap-1.5">
              <button
                title={state.isDirty ? t('notes.saveNow') : t('notes.noModification')}
                aria-label={state.isDirty ? t('notes.saveNoteAria') : t('notes.noChangesToSaveAria')}
                onClick={() => actions.handleSaveInPlace()}
                disabled={state.isSaving || !state.isDirty}
                className={cn(
                  'p-1.5 rounded-full border transition-all duration-300',
                  state.isDirty
                    ? 'bg-foreground text-background border-foreground hover:opacity-80'
                    : 'border-black/20 dark:border-white/20 text-foreground/40 cursor-not-allowed'
                )}
              >
                {state.isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
              </button>
            </div>
          )}

          {!readOnly && (
            <button
              title={t('notes.shareNoteTitle')}
              aria-label={t('notes.shareNoteAria')}
              onClick={() => setShareOpen(true)}
              className="p-1.5 rounded-full border border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-all"
            >
              <Share2 size={16} />
            </button>
          )}

          {!readOnly && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button aria-label={t('notes.optionsMenuAria')} className="p-1.5 rounded-full border border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-all">
                  <MoreHorizontal size={16} />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-52">
                <DropdownMenuItem onClick={handleExportMarkdown}>
                  <FileDown className="h-4 w-4 me-2" />
                  {t('richTextEditor.exportMarkdown')}
                </DropdownMenuItem>
                <DropdownMenuItem onClick={handleExportPdf}>
                  <Printer className="h-4 w-4 me-2" />
                  {t('richTextEditor.exportPdf') || 'Exporter en PDF'}
                </DropdownMenuItem>
                <DropdownMenuItem onClick={openMarkdownImport}>
                  <FileUp className="h-4 w-4 me-2" />
                  {t('richTextEditor.importMarkdown')}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={actions.toggleAutoSave} className="flex items-center justify-between cursor-pointer">
                  <span className="flex items-center">
                    <Save className="h-4 w-4 me-2 text-muted-foreground" />
                    {t('settings.autoSave') || 'Auto-enregistrement'}
                  </span>
                  <span className={cn(
                    'text-[10px] px-1.5 py-0.5 rounded font-bold uppercase tracking-wider',
                    state.autoSaveEnabled 
                      ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400' 
                      : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400'
                  )}>
                    {state.autoSaveEnabled ? (t('common.on') || 'Actif') : (t('common.off') || 'Désactivé')}
                  </span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onClick={async () => {
                    try {
                      await deleteNote(note.id, { skipRevalidation: true })
                      emitNoteChange({ type: 'deleted', noteId: note.id, notebookId: note.notebookId })
                      toast.success(t('notes.noteDeletedToast'))
                      onClose()
                    } catch { toast.error(t('notes.deleteNoteFailedToast')) }
                  }}
                  className="text-red-600 dark:text-red-400 focus:text-red-600"
                >
                  <Trash2 className="h-4 w-4 me-2" />
                  {t('notes.deleteNoteConfirmItem')}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}

          {shareOpen && (
            <NoteShareDialog
              noteId={note.id}
              noteTitle={state.title}
              onClose={() => setShareOpen(false)}
            />
          )}

          <FlashcardGenerateDialog
            open={flashcardsOpen}
            onClose={() => setFlashcardsOpen(false)}
            noteId={note.id}
            noteTitle={state.title || note.title || 'Untitled'}
            onSaved={(deckId) => {
              toast.success(t('flashcards.savedCount', { count: '' }).replace('{count}', ''), {
                description: t('flashcards.reviewNow') || 'Review now',
                action: {
                  label: t('flashcards.reviewNow') || 'Review now →',
                  onClick: () => {
                    window.open(`/revision?deckId=${encodeURIComponent(deckId)}`, '_self')
                  },
                },
                duration: 8000,
              })
            }}
          />

          <button
            aria-label={t('notes.documentInfoAria')}
            onClick={() => { actions.setInfoOpen(!state.infoOpen); actions.setAiOpen(false) }}
            className={cn(
              'p-1.5 rounded-full border transition-all duration-300',
              state.infoOpen
                ? 'bg-foreground text-background border-foreground'
                : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5'
            )}
          >
            <PanelRight size={16} />
          </button>
        </div>
      </div>
    )
  }

  return (
    <>
    <div className="flex items-center justify-between pt-3 border-t border-border/30">
      <div className="flex items-center gap-0.5">
        {!readOnly && (
          <>
            <Button variant="ghost" size="icon" className={cn('h-8 w-8 rounded-md', state.currentReminder && 'text-primary')}
              onClick={() => actions.setShowReminderDialog(true)} title={t('notes.setReminder')}>
              <Bell className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md"
              onClick={() => fileInputRef.current?.click()} title={t('notes.addImage')}>
              <ImageIcon className="h-4 w-4" />
            </Button>

            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md"
              onClick={() => actions.setShowLinkDialog(true)} title={t('notes.addLink')}>
              <LinkIcon className="h-4 w-4" />
            </Button>

            {state.isMarkdown && (
              <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md"
                onClick={() => actions.setShowMarkdownPreview(!state.showMarkdownPreview)}
                title={state.showMarkdownPreview ? t('general.edit') : t('notes.preview')}>
                <Eye className="h-4 w-4" />
              </Button>
            )}

            <Button
              variant="ghost"
              size="sm"
              className={cn('h-8 gap-1.5 px-2 text-xs font-medium transition-all duration-200 rounded-md', state.aiOpen && 'bg-primary/10 text-primary')}
              onClick={() => actions.setAiOpen(!state.aiOpen)}
              title={t('ai.aiNoteTitle')}
            >
              <Sparkles className="h-3.5 w-3.5" />
              <span className="hidden sm:inline">{t('ai.aiNoteTitle')}</span>
            </Button>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md" title={t('notes.changeSize')}>
                  <Maximize2 className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <div className="flex flex-col gap-1 p-1">
                  {(['small', 'medium', 'large'] as const).map((s) => (
                    <Button key={s} variant="ghost" size="sm"
                      onClick={() => actions.setSize(s)}
                      className={cn('justify-start capitalize', state.size === s && 'bg-accent')}>
                      {s}
                    </Button>
                  ))}
                </div>
              </DropdownMenuContent>
            </DropdownMenu>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md" title={t('notes.changeColor')}>
                  <Palette className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <div className="grid grid-cols-5 gap-2 p-2">
                  {Object.entries(NOTE_COLORS).map(([colorName, classes]) => (
                    <button key={colorName}
                      className={cn('h-7 w-7 rounded-full border-2 transition-transform hover:scale-110', classes.bg,
                        state.color === colorName ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-700')}
                      onClick={() => actions.setColor(colorName as NoteColor)} title={colorName} />
                  ))}
                </div>
              </DropdownMenuContent>
            </DropdownMenu>

            <LabelManager existingLabels={state.labels} notebookId={note.notebookId} onUpdate={actions.setLabels} />
          </>
        )}
        {readOnly && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <span className="text-xs">{t('notes.sharedReadOnly')}</span>
          </div>
        )}
      </div>

      <div className="flex gap-2">
        {readOnly ? (
          <>
            <Button
              variant="default"
              onClick={actions.handleMakeCopy}
              className="flex items-center gap-2"
            >
              <Copy className="h-4 w-4" />
              {t('notes.makeCopy')}
            </Button>
            <Button
              variant="ghost"
              className="flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30"
              onClick={async () => {
                try {
                  await leaveSharedNote(note.id, { skipRevalidation: true })
                  emitNoteChange({ type: 'deleted', noteId: note.id, notebookId: note.notebookId })
                  toast.success(t('notes.leftShare'))
                  onClose()
                } catch {
                  toast.error(t('general.error'))
                }
              }}
            >
              <LogOut className="h-4 w-4" />
              {t('notes.leaveShare')}
            </Button>
            <Button variant="ghost" onClick={onClose}>
              {t('general.close')}
            </Button>
          </>
        ) : (
          <>
            <Button variant="ghost" onClick={onClose}>
              {t('general.cancel')}
            </Button>
            <Button onClick={() => actions.handleSave()} disabled={state.isSaving}>
              {state.isSaving ? t('notes.saving') : t('general.save')}
            </Button>
          </>
        )}
      </div>
    </div>
    {/* Hidden file input for Markdown import — remplacé par création dynamique dans openMarkdownImport */}
    </>
  )
}