Momento/memento-note/components/wizard/notebook-organizer-dialog.tsx

'use client'

import { useState } from 'react'
import { Sparkles, Loader2, X, Tag, Copy, FolderTree, AlertTriangle, Check } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { cn } from '@/lib/utils'
import { toast } from 'sonner'

interface SuggestedTag { name: string; noteIds: string[] }
interface Duplicate { note1Id: string; note1Title: string; note2Id: string; note2Title: string; reason: string }
interface Category { name: string; noteIds: string[]; noteTitles: string[] }
interface OrgResult {
  suggestedTags: SuggestedTag[]
  duplicates: Duplicate[]
  categories: Category[]
  summary: string
}

export function NotebookOrganizerDialog({
  notebookId,
  notebookName,
  onClose,
}: {
  notebookId: string
  notebookName: string
  onClose: () => void
}) {
  const { t } = useLanguage()
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<OrgResult | null>(null)
  const [appliedTags, setAppliedTags] = useState<Set<string>>(new Set())

  const handleAnalyze = async () => {
    setLoading(true)
    try {
      const res = await fetch('/api/ai/organize-notebook', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ notebookId }),
      })
      const data = await res.json()
      if (!res.ok) {
        toast.error(data.errorKey === 'ai.featureLocked' ? (t('ai.featureLocked') || 'Plan requis') : (data.error || 'Erreur'))
      } else {
        setResult(data)
      }
    } catch (e: any) {
      toast.error(e.message || 'Erreur')
    } finally {
      setLoading(false)
    }
  }

  const applyTag = async (tagName: string, noteIds: string[]) => {
    try {
      const res = await fetch('/api/ai/organize-notebook', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'apply_tag', tagName, noteIds, notebookId }),
      })
      if (!res.ok) throw new Error('Failed')
      setAppliedTags(prev => new Set(prev).add(tagName))
      toast.success(t('structuredViews.tagApplied') || `Tag "${tagName}" appliqué à ${noteIds.length} notes`)
    } catch {
      toast.error('Erreur')
    }
  }

  return (
    <div className="fixed inset-0 z-[300] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" dir="auto" onClick={onClose}>
      <div className="w-full max-w-2xl max-h-[85vh] rounded-2xl border border-border bg-card shadow-2xl overflow-hidden flex flex-col" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-brand-accent/5 shrink-0">
          <div className="flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-brand-accent" />
            <h2 className="text-base font-semibold">{t('wizard.organizer') || 'Organiser avec l\'IA'}</h2>
          </div>
          <button onClick={onClose} className="p-1 rounded-lg hover:bg-muted text-muted-foreground">
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="p-6 overflow-y-auto flex-1">
          {!result && !loading && (
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground">
                {t('wizard.organizerDesc') || `L'IA va analyser toutes les notes du carnet "${notebookName}" et proposer : tags, regroupements, et détection de doublons.`}
              </p>
              <button
                onClick={handleAnalyze}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm rounded-lg bg-brand-accent text-white hover:bg-brand-accent/90 transition-colors font-medium"
              >
                <Sparkles className="h-4 w-4" />
                {t('wizard.analyze') || 'Analyser le carnet'}
              </button>
            </div>
          )}

          {loading && (
            <div className="flex flex-col items-center justify-center py-12 gap-3">
              <Loader2 className="h-8 w-8 animate-spin text-brand-accent" />
              <p className="text-sm text-muted-foreground">{t('wizard.organizing') || 'Analyse des notes...'}</p>
            </div>
          )}

          {result && (
            <div className="space-y-6">
              {/* Summary */}
              <div className="rounded-lg bg-muted/30 p-4">
                <p className="text-sm leading-relaxed">{result.summary}</p>
              </div>

              {/* Tags */}
              {result.suggestedTags.length > 0 && (
                <div className="space-y-2">
                  <h3 className="text-[10px] uppercase tracking-widest font-bold text-muted-foreground flex items-center gap-1.5">
                    <Tag size={12} /> {t('wizard.suggestedTags') || 'Tags suggérés'}
                  </h3>
                  {result.suggestedTags.map((tag, i) => (
                    <div key={i} className="flex items-center justify-between p-3 rounded-lg border border-border/50 hover:bg-muted/20">
                      <div className="flex items-center gap-2">
                        <span className="px-2 py-0.5 rounded-full bg-brand-accent/10 text-brand-accent text-xs font-medium">
                          {tag.name}
                        </span>
                        <span className="text-[10px] text-muted-foreground">{tag.noteIds.length} notes</span>
                      </div>
                      <button
                        onClick={() => applyTag(tag.name, tag.noteIds)}
                        disabled={appliedTags.has(tag.name)}
                        className={cn(
                          'px-2 py-1 text-[10px] rounded-md font-medium transition-colors',
                          appliedTags.has(tag.name)
                            ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400'
                            : 'bg-foreground/5 hover:bg-foreground/10 text-foreground'
                        )}
                      >
                        {appliedTags.has(tag.name) ? (<><Check size={10} className="inline" /> Appliqué</>) : (t('wizard.apply') || 'Appliquer')}
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {/* Categories */}
              {result.categories.length > 0 && (
                <div className="space-y-2">
                  <h3 className="text-[10px] uppercase tracking-widest font-bold text-muted-foreground flex items-center gap-1.5">
                    <FolderTree size={12} /> {t('wizard.categories') || 'Regroupements suggérés'}
                  </h3>
                  {result.categories.map((cat, i) => (
                    <div key={i} className="p-3 rounded-lg border border-border/50">
                      <div className="text-sm font-medium mb-1">{cat.name}</div>
                      <div className="flex flex-wrap gap-1">
                        {cat.noteTitles.map((title, j) => (
                          <span key={j} className="text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
                            {title.length > 35 ? title.slice(0, 35) + '...' : title}
                          </span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {/* Duplicates */}
              {result.duplicates.length > 0 && (
                <div className="space-y-2">
                  <h3 className="text-[10px] uppercase tracking-widest font-bold text-muted-foreground flex items-center gap-1.5">
                    <AlertTriangle size={12} className="text-amber-500" /> {t('wizard.duplicates') || 'Doublons détectés'}
                  </h3>
                  {result.duplicates.map((dup, i) => (
                    <div key={i} className="p-3 rounded-lg border border-amber-200 dark:border-amber-900/50 bg-amber-50/50 dark:bg-amber-950/20">
                      <div className="flex items-center gap-2 mb-1">
                        <Copy size={12} className="text-amber-500" />
                        <span className="text-xs font-medium">{dup.note1Title}</span>
                        <span className="text-[10px] text-muted-foreground">≈</span>
                        <span className="text-xs font-medium">{dup.note2Title}</span>
                      </div>
                      <p className="text-[10px] text-muted-foreground italic">{dup.reason}</p>
                    </div>
                  ))}
                </div>
              )}

              {result.suggestedTags.length === 0 && result.duplicates.length === 0 && result.categories.length === 0 && (
                <p className="text-sm text-muted-foreground text-center py-4">
                  {t('wizard.noSuggestions') || 'Aucune suggestion — le carnet semble bien organisé.'}
                </p>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}