'use client'

import { useState, useCallback } from 'react'
import { motion, AnimatePresence } from 'motion/react'
import { Sparkles, X, CheckCircle2, FolderPlus, Folder, ChevronDown, ChevronUp, Loader2, AlertCircle, Check, ArrowRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import {
  analyzeNotebookForOrganization,
  executeNotebookOrganization,
  type OrganizationGroup,
  type OrganizationPlan,
} from '@/app/actions/organize-notebook'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'

interface OrganizeNotebookDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  notebookId: string
  notebookName: string
  onDone?: () => void
}

type Step = 'idle' | 'analyzing' | 'preview' | 'executing' | 'done'

export function OrganizeNotebookDialog({
  open,
  onOpenChange,
  notebookId,
  notebookName,
  onDone,
}: OrganizeNotebookDialogProps) {
  const { t, language } = useLanguage()
  const slide = language === 'fa' || language === 'ar' ? -480 : 480
  const [step, setStep] = useState<Step>('idle')
  const [plan, setPlan] = useState<OrganizationPlan | null>(null)
  const [editableGroups, setEditableGroups] = useState<OrganizationGroup[]>([])
  const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set())
  const [error, setError] = useState<string | null>(null)
  const [result, setResult] = useState<{ created: number; moved: number } | null>(null)

  const handleAnalyze = useCallback(async () => {
    setStep('analyzing'); setError(null); setPlan(null)
    const res = await analyzeNotebookForOrganization(notebookId, language)
    if (!res.success || !res.plan) { setError(res.error ?? 'Erreur'); setStep('idle'); return }
    setPlan(res.plan)
    setEditableGroups(res.plan.groups.map(g => ({ ...g, notes: [...g.notes] })))
    setExpandedGroups(new Set(res.plan.groups.map((_, i) => i)))
    setStep('preview')
  }, [notebookId])

  const handleRenameGroup = (idx: number, name: string) => {
    setEditableGroups(prev => prev.map((g, i) => i === idx ? { ...g, name } : g))
  }
  const handleToggleNote = (groupIdx: number, noteId: string) => {
    setEditableGroups(prev => prev.map((g, i) => {
      if (i !== groupIdx) return g
      const has = g.notes.some(n => n.id === noteId)
      return { ...g, notes: has ? g.notes.filter(n => n.id !== noteId) : g.notes }
    }))
  }
  const handleRemoveGroup = (idx: number) => {
    setEditableGroups(prev => prev.filter((_, i) => i !== idx))
  }
  const toggleExpand = (idx: number) => {
    setExpandedGroups(prev => { const n = new Set(prev); n.has(idx) ? n.delete(idx) : n.add(idx); return n })
  }

  const handleExecute = useCallback(async () => {
    if (!plan) return
    setStep('executing')
    const finalPlan: OrganizationPlan = {
      notebookId: plan.notebookId,
      groups: editableGroups.filter(g => g.notes.length > 0 && g.name.trim()),
    }
    const res = await executeNotebookOrganization(finalPlan)
    if (!res.success) { setError(res.error ?? 'Erreur'); setStep('preview'); return }
    setResult({ created: res.created, moved: res.moved })
    setStep('done')
    toast.success(t('organizeNotebook.toastSuccess', { created: res.created, moved: res.moved }))
    onDone?.()
  }, [plan, editableGroups, onDone, t])

  const handleClose = () => {
    if (step === 'analyzing' || step === 'executing') return
    onOpenChange(false)
    setTimeout(() => { setStep('idle'); setPlan(null); setEditableGroups([]); setError(null); setResult(null) }, 300)
  }

  if (!open) return null

  const totalNotes = editableGroups.reduce((acc, g) => acc + g.notes.length, 0)
  const newSubNbs = editableGroups.filter(g => g.isNew).length

  return (
    <AnimatePresence>
      {open && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
            onClick={handleClose}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.96 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ type: 'spring', stiffness: 300, damping: 28 }}
              className="w-full max-w-lg bg-memento-paper dark:bg-zinc-900 rounded-2xl border border-border shadow-2xl flex flex-col max-h-[85vh] overflow-hidden"
              onClick={e => e.stopPropagation()}
            >
              {/* Header */}
              <div className="px-5 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-xl bg-brand-accent/10 flex items-center justify-center">
                    <Sparkles size={15} className="text-brand-accent" />
                  </div>
                  <div>
                    <h2 className="text-sm font-semibold text-ink dark:text-dark-ink font-memento-serif">{t('organizeNotebook.title')}</h2>
                    <p className="text-[10px] text-concrete truncate max-w-[240px]">{notebookName}</p>
                  </div>
                </div>
                <button onClick={handleClose} disabled={step === 'analyzing' || step === 'executing'}
                  className="w-7 h-7 rounded-lg flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors disabled:opacity-30">
                  <X size={15} />
                </button>
              </div>

              {/* Content */}
              <div className="flex-1 overflow-y-auto custom-scrollbar">
              <AnimatePresence mode="wait">

                {/* IDLE */}
                {step === 'idle' && (
                  <motion.div key="idle" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }}
                    className="p-5 space-y-4">
                    {error && (
                      <div className="flex items-start gap-2.5 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
                        <AlertCircle size={14} className="text-red-500 mt-0.5 shrink-0" />
                        <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
                      </div>
                    )}
                    <div className="space-y-3">
                      <p className="text-[13px] text-ink dark:text-dark-ink leading-relaxed">{t('organizeNotebook.intro')}</p>
                    </div>
                    <div className="grid grid-cols-1 gap-2">
                      {[{ icon: FolderPlus, text: t('organizeNotebook.bulletThemes') },
                        { icon: Folder, text: t('organizeNotebook.bulletSubfolders') },
                        { icon: Check, text: t('organizeNotebook.bulletPreview') }].map((item, i) => (
                        <div key={i} className="flex items-center gap-3 p-2.5 rounded-xl bg-foreground/[0.02] border border-border/30">
                          <div className="w-7 h-7 rounded-lg bg-brand-accent/10 flex items-center justify-center shrink-0">
                            <item.icon size={13} className="text-brand-accent" />
                          </div>
                          <span className="text-[12px] text-concrete leading-tight">{item.text}</span>
                        </div>
                      ))}
                    </div>
                  </motion.div>
                )}

                {/* ANALYZING */}
                {step === 'analyzing' && (
                  <motion.div key="analyzing" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
                    className="flex flex-col items-center justify-center py-20 gap-5">
                    <div className="relative">
                      <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 flex items-center justify-center">
                        <Sparkles size={24} className="text-brand-accent" />
                      </div>
                      <motion.div animate={{ rotate: 360 }} transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
                        className="absolute -inset-1.5 rounded-2xl border-2 border-transparent border-t-brand-accent/40" />
                    </div>
                    <div className="text-center space-y-1">
                      <p className="text-[13px] font-medium text-ink dark:text-dark-ink">{t('organizeNotebook.analyzingTitle')}</p>
                      <p className="text-[11px] text-concrete">{t('organizeNotebook.analyzingSubtitle')}</p>
                    </div>
                    <div className="flex gap-1">
                      {[0, 1, 2].map(i => (
                        <motion.div key={i} animate={{ opacity: [0.3, 1, 0.3] }} transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.2 }}
                          className="w-1.5 h-1.5 rounded-full bg-brand-accent" />
                      ))}
                    </div>
                  </motion.div>
                )}

                {/* PREVIEW */}
                {step === 'preview' && (
                  <motion.div key="preview" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}
                    className="p-4 space-y-3">
                    <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-brand-accent/[0.06] border border-brand-accent/15">
                      <Sparkles size={12} className="text-brand-accent shrink-0" />
                      <p className="text-[11px] text-brand-accent font-medium leading-relaxed">
                        {t('organizeNotebook.previewSummary', { groups: editableGroups.length, notes: totalNotes, newSubs: newSubNbs })}
                      </p>
                    </div>

                    {error && (
                      <div className="flex items-start gap-2.5 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
                        <AlertCircle size={14} className="text-red-500 mt-0.5 shrink-0" />
                        <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
                      </div>
                    )}

                    {editableGroups.map((group, idx) => (
                      <motion.div key={idx} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: idx * 0.05 }}
                        className="rounded-xl border border-border/40 bg-card overflow-hidden hover:border-brand-accent/20 transition-colors">
                        <div className="flex items-center gap-2 px-3 py-2.5">
                          <div className="w-7 h-7 rounded-lg bg-brand-accent/10 flex items-center justify-center shrink-0">
                            {group.isNew ? <FolderPlus size={13} className="text-brand-accent" /> : <Folder size={13} className="text-concrete" />}
                          </div>
                          <input value={group.name} onChange={e => handleRenameGroup(idx, e.target.value)}
                            className="flex-1 bg-transparent text-[13px] font-semibold text-ink dark:text-dark-ink outline-none focus:text-brand-accent transition-colors min-w-0" />
                          {group.isNew && (
                            <span className="px-1.5 py-0.5 rounded-md text-[9px] font-bold uppercase tracking-wider bg-brand-accent/10 text-brand-accent shrink-0">
                              {t('organizeNotebook.badgeNew')}
                            </span>
                          )}
                          <div className="flex items-center gap-0.5 shrink-0">
                            <button onClick={() => toggleExpand(idx)}
                              className="w-6 h-6 rounded-md flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors">
                              {expandedGroups.has(idx) ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
                            </button>
                            <button onClick={() => handleRemoveGroup(idx)}
                              className="w-6 h-6 rounded-md flex items-center justify-center text-concrete hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
                              <X size={13} />
                            </button>
                          </div>
                        </div>
                        <AnimatePresence>
                          {expandedGroups.has(idx) && (
                            <motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} exit={{ height: 0 }} className="overflow-hidden">
                              <div className="border-t border-border/30 px-3 pb-2 pt-1.5 space-y-0.5">
                                {group.notes.map(note => (
                                  <div key={note.id} onClick={() => handleToggleNote(idx, note.id)}
                                    className="flex items-center gap-2 py-1.5 rounded-lg px-2 hover:bg-foreground/[0.03] transition-colors group cursor-pointer">
                                    <div className="w-4 h-4 rounded border border-border group-hover:border-brand-accent/50 flex items-center justify-center shrink-0 transition-colors">
                                      <Check size={10} className="text-brand-accent" />
                                    </div>
                                    <span className="text-[11px] text-concrete truncate group-hover:text-ink transition-colors">{note.title || t('organizeNotebook.untitledNote')}</span>
                                  </div>
                                ))}
                              </div>
                            </motion.div>
                          )}
                        </AnimatePresence>
                        {!expandedGroups.has(idx) && (
                          <div className="px-4 pb-2 text-[10px] text-concrete/60">{t('organizeNotebook.notesInGroup', { count: group.notes.length })}</div>
                        )}
                      </motion.div>
                    ))}
                  </motion.div>
                )}

                {/* EXECUTING */}
                {step === 'executing' && (
                  <motion.div key="executing" initial={{ opacity: 0 }} animate={{ opacity: 1 }}
                    className="flex flex-col items-center justify-center py-20 gap-4">
                    <Loader2 size={28} className="text-brand-accent animate-spin" />
                    <div className="text-center space-y-1">
                      <p className="text-[13px] font-medium text-ink dark:text-dark-ink">{t('organizeNotebook.executingTitle')}</p>
                      <p className="text-[11px] text-concrete">{t('organizeNotebook.executingSubtitle')}</p>
                    </div>
                  </motion.div>
                )}

                {/* DONE */}
                {step === 'done' && (
                  <motion.div key="done" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
                    className="flex flex-col items-center justify-center py-20 gap-5">
                    <div className="w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center">
                      <CheckCircle2 size={28} className="text-emerald-500" />
                    </div>
                    <div className="text-center space-y-1.5">
                      <p className="text-[14px] font-semibold text-ink dark:text-dark-ink">{t('organizeNotebook.doneTitle')}</p>
                      {result && <p className="text-[12px] text-concrete">{t('organizeNotebook.doneStats', { created: result.created, moved: result.moved })}</p>}
                    </div>
                  </motion.div>
                )}

              </AnimatePresence>
            </div>

            {/* Footer */}
            <div className="px-4 py-3.5 border-t border-border/40 shrink-0">
              {step === 'idle' && (
                <button onClick={handleAnalyze}
                  className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-brand-accent text-white text-[13px] font-medium hover:bg-brand-accent/90 transition-colors">
                  <Sparkles size={14} />
                  {t('organizeNotebook.analyzeButton')}
                </button>
              )}
              {step === 'preview' && (
                <div className="flex gap-2">
                  <button onClick={() => { setStep('idle'); setError(null) }}
                    className="flex-1 px-4 py-2.5 rounded-xl border border-border/60 text-[13px] font-medium text-concrete hover:text-ink dark:hover:text-dark-ink hover:border-border transition-colors">
                    {t('organizeNotebook.restart')}
                  </button>
                  <button onClick={handleExecute}
                    disabled={editableGroups.filter(g => g.notes.length > 0).length === 0}
                    className={cn('flex-1 flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-xl text-[13px] font-medium transition-all',
                      editableGroups.filter(g => g.notes.length > 0).length > 0
                        ? 'bg-brand-accent text-white hover:bg-brand-accent/90'
                        : 'bg-foreground/10 text-concrete cursor-not-allowed')}>
                    <ArrowRight size={14} />
                    {t('organizeNotebook.confirm')}
                  </button>
                </div>
              )}
              {step === 'done' && (
                <button onClick={handleClose}
                  className="w-full px-4 py-2.5 rounded-xl border border-border/60 text-[13px] font-medium text-concrete hover:text-ink dark:hover:text-dark-ink hover:border-border transition-colors">
                  {t('organizeNotebook.closeButton')}
                </button>
              )}
            </div>
          </motion.div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}