'use client'

import { useState, useTransition } from 'react'
import type { Note } from '@/lib/types'
import { getNoteFeedImage, getNotePlainExcerpt, getNoteDisplayTitle } from '@/lib/note-preview'
import { useLanguage } from '@/lib/i18n'
import { useNoteRefresh } from '@/context/NoteRefreshContext'
import { motion, AnimatePresence } from 'motion/react'
import { ChevronRight, MoreHorizontal, Trash2, Archive, Pin, History, Pencil } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { deleteNote, toggleArchive, togglePin } from '@/app/actions/notes'
import { toast } from 'sonner'

type NotesEditorialViewProps = {
  notes: Note[]
  onOpen: (note: Note, readOnly?: boolean) => void
  notebookName?: string
  onOpenHistory?: (note: Note) => void
}

function formatNoteDate(date: Date | string): string {
  const d = typeof date === 'string' ? new Date(date) : date
  return d.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  }).toUpperCase()
}

function EditorialNoteMenu({ note, onOpen, onOpenHistory }: {
  note: Note
  onOpen: (note: Note) => void
  onOpenHistory?: (note: Note) => void
}) {
  const { t } = useLanguage()
  const { triggerRefresh } = useNoteRefresh()
  const [, startTransition] = useTransition()

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation()
    startTransition(async () => {
      try {
        await deleteNote(note.id)
        triggerRefresh()
        toast.success(t('notes.deleted') || 'Note supprimée')
      } catch {
        toast.error(t('general.error'))
      }
    })
  }

  const handleArchive = (e: React.MouseEvent) => {
    e.stopPropagation()
    startTransition(async () => {
      try {
        await toggleArchive(note.id, !note.isArchived)
        triggerRefresh()
        toast.success(note.isArchived ? (t('notes.unarchived') || 'Désarchivée') : (t('notes.archived') || 'Archivée'))
      } catch {
        toast.error(t('general.error'))
      }
    })
  }

  const handlePin = (e: React.MouseEvent) => {
    e.stopPropagation()
    startTransition(async () => {
      try {
        await togglePin(note.id, !note.isPinned)
        triggerRefresh()
      } catch {
        toast.error(t('general.error'))
      }
    })
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild onClick={e => e.stopPropagation()}>
        <button className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-muted/60 text-muted-foreground hover:text-foreground">
          <MoreHorizontal size={16} />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-44">
        <DropdownMenuItem onClick={e => { e.stopPropagation(); onOpen(note) }}>
          <Pencil className="h-4 w-4 mr-2" />
          {t('notes.open') || 'Ouvrir'}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handlePin}>
          <Pin className="h-4 w-4 mr-2" />
          {note.isPinned ? (t('notes.unpin') || 'Désépingler') : (t('notes.pin') || 'Épingler')}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handleArchive}>
          <Archive className="h-4 w-4 mr-2" />
          {note.isArchived ? (t('notes.unarchive') || 'Désarchiver') : (t('notes.archive') || 'Archiver')}
        </DropdownMenuItem>
        {onOpenHistory && (
          <DropdownMenuItem onClick={e => { e.stopPropagation(); onOpenHistory(note) }}>
            <History className="h-4 w-4 mr-2" />
            {t('notes.history') || 'Historique'}
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={handleDelete} className="text-red-600 dark:text-red-400 focus:text-red-600">
          <Trash2 className="h-4 w-4 mr-2" />
          {t('notes.delete') || 'Supprimer'}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export function NotesEditorialView({
  notes,
  onOpen,
  notebookName,
  onOpenHistory,
}: NotesEditorialViewProps) {
  const { t } = useLanguage()

  return (
    <div className="mx-auto w-full max-w-3xl space-y-16">
      <AnimatePresence>
        {notes.map((note: Note, index: number) => {
          const title = getNoteDisplayTitle(note, t('notes.untitled') || 'Untitled')
          const img = getNoteFeedImage(note)
          const excerpt = getNotePlainExcerpt(note)
          const dateStr = formatNoteDate(note.createdAt)

          return (
            <motion.article
              key={note.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.05 * index, duration: 0.6 }}
              className="space-y-4 group cursor-pointer relative border-b border-border/20 pb-16"
              onClick={() => onOpen(note)}
            >
              {/* Date / breadcrumb + actions menu */}
              <div className="flex items-center justify-between">
                <div className="note-date-badge">
                  {notebookName ? `${notebookName} — ${dateStr}` : dateStr}
                </div>
                <EditorialNoteMenu note={note} onOpen={onOpen} onOpenHistory={onOpenHistory} />
              </div>

              <h2 className="font-memento-serif text-2xl font-medium text-foreground flex items-center justify-between">
                {title}
                <span className="opacity-0 group-hover:opacity-30 transition-opacity shrink-0">
                  <ChevronRight size={20} />
                </span>
              </h2>

              <div className="flex flex-col md:flex-row gap-8 items-start">
                <div className="w-full md:w-56 aspect-[4/3] bg-white/50 border border-border overflow-hidden rounded shadow-sm flex-shrink-0">
                  {img ? (
                    <img
                      src={img}
                      alt=""
                      className="w-full h-full object-cover mix-blend-multiply opacity-80 grayscale contrast-125 hover:grayscale-0 hover:opacity-100 transition-all duration-500"
                    />
                  ) : (
                    <div className="h-full w-full bg-gradient-to-br from-muted/40 to-muted/10" aria-hidden />
                  )}
                </div>
                <div className="space-y-3 flex-1">
                  {excerpt ? (
                    <p className="text-[14px] leading-relaxed text-foreground/80 font-light max-w-lg line-clamp-4">
                      {excerpt}
                    </p>
                  ) : (
                    <p className="text-sm italic text-muted-foreground/50">{t('notes.noContent')}</p>
                  )}
                  <span className="text-[11px] text-muted-foreground uppercase tracking-widest font-medium inline-flex items-center gap-1 group-hover:gap-2 transition-all">
                    {t('notes.readMore') || 'Read more'}
                    <ChevronRight size={10} />
                  </span>
                </div>
              </div>
            </motion.article>
          )
        })}
      </AnimatePresence>
    </div>
  )
}