'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'motion/react'
import { FileText, FolderOpen, ChevronDown, Loader2, X } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import type { Notebook } from '@/lib/types'

interface ConvertNotebookDialogProps {
  open: boolean
  idea: { id: string; title: string } | null
  notebooks: Notebook[]
  defaultNotebookId: string | null | undefined
  onClose: () => void
  onConfirm: (notebookId: string | null) => void
}

export function ConvertNotebookDialog({ open, idea, notebooks, defaultNotebookId, onClose, onConfirm }: ConvertNotebookDialogProps) {
  const { t } = useLanguage()
  const [showNotebookSelect, setShowNotebookSelect] = useState(false)
  const [selectedNotebookId, setSelectedNotebookId] = useState<string | null>(defaultNotebookId ?? null)
  const selectedNotebook = notebooks.find(nb => nb.id === selectedNotebookId)
  const [loading, setLoading] = useState(false)

  const handleConfirm = () => {
    setLoading(true)
    onConfirm(selectedNotebookId)
  }

  return (
    <AnimatePresence>
      {open && idea && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4"
          onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
          role="dialog"
          aria-modal="true"
          aria-label={t('brainstorm.convertTitle') || 'Create note from idea'}
        >
          <motion.div
            initial={{ scale: 0.92, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.92, y: 20 }}
            transition={{ type: 'spring', stiffness: 340, damping: 30 }}
            className="bg-memento-paper dark:bg-zinc-900 rounded-3xl shadow-2xl border border-border/40 w-full max-w-md overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="px-6 py-5 border-b border-border/20 flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                  <FileText size={16} className="text-emerald-600 dark:text-emerald-400" />
                </div>
                <div>
                  <h3 className="font-memento-serif text-base font-medium text-ink dark:text-dark-ink">
                    {t('brainstorm.convertTitle') || 'Create note from idea'}
                  </h3>
                  <p className="text-[10px] text-concrete uppercase tracking-widest font-bold">
                    {t('brainstorm.convertSubtitle') || 'Choose where to save this note'}
                  </p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-1.5 rounded-lg text-concrete hover:text-ink hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer"
                aria-label={t('common.close') || 'Close'}
              >
                <X size={16} />
              </button>
            </div>

            <div className="px-6 py-5 space-y-4">
              <div className="p-4 rounded-2xl bg-white/60 dark:bg-white/5 border border-border/30">
                <p className="text-[10px] uppercase tracking-widest font-bold text-concrete mb-2">
                  {t('brainstorm.ideaLabel') || 'Idea'}
                </p>
                <p className="text-sm font-memento-serif text-ink dark:text-dark-ink leading-relaxed line-clamp-3">
                  {idea.title}
                </p>
              </div>

              <div>
                <p className="text-[10px] uppercase tracking-widest font-bold text-concrete mb-2">
                  {t('brainstorm.destinationLabel') || 'Notes will be saved to'}
                </p>
                <button
                  onClick={() => setShowNotebookSelect(!showNotebookSelect)}
                  className="w-full flex items-center justify-between p-3 rounded-xl bg-white/60 dark:bg-white/5 border border-border/30 hover:border-emerald-500/40 transition-colors cursor-pointer"
                >
                  <div className="flex items-center gap-2.5">
                    <div className="w-7 h-7 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
                      <FolderOpen size={13} className="text-emerald-600" />
                    </div>
                    <span className="text-sm font-medium text-ink dark:text-dark-ink truncate">
                      {selectedNotebook?.name || t('brainstorm.noNotebook') || 'No notebook'}
                    </span>
                  </div>
                  <ChevronDown size={14} className={`text-concrete transition-transform ${showNotebookSelect ? 'rotate-180' : ''}`} />
                </button>
                <AnimatePresence>
                  {showNotebookSelect && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: 'auto', opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.2 }}
                      className="overflow-hidden"
                    >
                      <div className="mt-1 max-h-48 overflow-y-auto rounded-xl border border-border/30 bg-white dark:bg-zinc-800 shadow-lg">
                        <button
                          onClick={() => { setSelectedNotebookId(null); setShowNotebookSelect(false) }}
                          className="w-full text-left px-3 py-2.5 hover:bg-emerald-500/5 transition-colors text-sm text-concrete cursor-pointer"
                        >
                          {t('brainstorm.noNotebook') || 'No notebook'}
                        </button>
                        {notebooks.map(nb => (
                          <button
                            key={nb.id}
                            onClick={() => { setSelectedNotebookId(nb.id); setShowNotebookSelect(false) }}
                            className={`w-full text-left px-3 py-2.5 hover:bg-emerald-500/5 transition-colors text-sm cursor-pointer flex items-center gap-2 ${selectedNotebookId === nb.id ? 'text-emerald-600 font-medium' : 'text-ink dark:text-dark-ink'}`}
                          >
                            <FolderOpen size={12} className="shrink-0 opacity-50" />
                            <span className="truncate">{nb.name}</span>
                          </button>
                        ))}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </div>

            <div className="px-6 py-4 border-t border-border/20 flex items-center justify-end gap-3">
              <button
                onClick={onClose}
                disabled={loading}
                className="px-4 py-2.5 rounded-xl text-sm font-medium text-concrete hover:text-ink hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer"
              >
                {t('common.cancel')}
              </button>
              <button
                onClick={handleConfirm}
                disabled={loading}
                className="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-bold uppercase tracking-wider transition-colors cursor-pointer disabled:opacity-50 flex items-center gap-2"
              >
                {loading ? <><Loader2 size={14} className="animate-spin" /> {t('common.creating') || 'Creating…'}</> : <><FileText size={14} /> {t('brainstorm.createNote') || 'Create note'}</>}
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}