'use client'

import { useEffect, useState } from 'react'
import { Link2, ChevronRight, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { motion, AnimatePresence } from 'motion/react'
import { useRouter } from 'next/navigation'
import { useLanguage } from '@/lib/i18n'

interface BacklinkNote {
  id: string
  title: string | null
  updatedAt: string
  notebookId: string | null
}

interface Backlink {
  id: string
  sourceNote: BacklinkNote
  contextSnippet: string | null
  createdAt: string
}

interface WikilinksBacklinksPanelProps {
  noteId: string
  className?: string
}

export function WikilinksBacklinksPanel({ noteId, className }: WikilinksBacklinksPanelProps) {
  const { t } = useLanguage()
  const [backlinks, setBacklinks] = useState<Backlink[]>([])
  const [loading, setLoading] = useState(true)
  const [open, setOpen] = useState(true)
  const router = useRouter()

  useEffect(() => {
    if (!noteId) return
    setLoading(true)
    fetch(`/api/notes/${noteId}/backlinks`)
      .then(r => r.json())
      .then(data => setBacklinks(data.backlinks || []))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [noteId])

  if (loading && backlinks.length === 0) return null
  if (!loading && backlinks.length === 0) return null

  return (
    <div className={cn('space-y-2', className)}>
      {/* Header */}
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        className="flex items-center gap-2 group w-full"
      >
        <Link2 size={14} className="text-concrete shrink-0" />
        <span className="text-[10px] uppercase tracking-[0.25em] font-bold text-concrete group-hover:text-ink transition-colors">
          {t('editor.backlinks') || 'Liens entrants'}
        </span>
        <span className="text-[9px] bg-brand-accent/10 text-brand-accent px-1.5 py-0.5 rounded-full font-bold">
          {backlinks.length}
        </span>
        <div className="h-px flex-1 bg-border/40" />
        <ChevronRight
          size={12}
          className={cn('text-concrete transition-transform', open && 'rotate-90')}
        />
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden pl-5 space-y-1.5"
          >
            {loading && (
              <div className="flex items-center gap-2 py-2">
                <Loader2 size={12} className="animate-spin text-concrete" />
                <span className="text-[10px] text-concrete">{t('common.loading') || 'Chargement…'}</span>
              </div>
            )}
            {backlinks.map(bl => (
              <button
                key={bl.id}
                type="button"
                onClick={() => router.push(`/notes/${bl.sourceNote.id}`)}
                className="w-full text-left group/bl p-2.5 rounded-lg bg-white/50 dark:bg-white/5 border border-border/40 hover:border-brand-accent/30 hover:bg-brand-accent/5 transition-all"
              >
                <div className="flex items-start gap-2">
                  <Link2 size={10} className="text-brand-accent/60 mt-0.5 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <p className="text-[11px] font-semibold text-ink truncate group-hover/bl:text-brand-accent transition-colors">
                      {bl.sourceNote.title || (t('notes.untitled') || '(Sans titre)')}
                    </p>
                    {bl.contextSnippet && (
                      <p className="text-[9px] text-concrete/70 mt-0.5 line-clamp-2 leading-relaxed">
                        …{bl.contextSnippet}…
                      </p>
                    )}
                  </div>
                </div>
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}