Keep/keep-notes/components/label-management-dialog.tsx

'use client'

import { useState } from 'react'
import { Button } from './ui/button'
import { Input } from './ui/input'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from './ui/dialog'
import { Settings, Plus, Palette, Trash2, Tag } from 'lucide-react'
import { LABEL_COLORS, LabelColorName } from '@/lib/types'
import { cn } from '@/lib/utils'
import { useLabels } from '@/context/LabelContext'
import { useLanguage } from '@/lib/i18n'
import { useNoteRefresh } from '@/context/NoteRefreshContext'

export interface LabelManagementDialogProps {
  /** Mode contrôlé (ex. ouverture depuis la liste des carnets) */
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

export function LabelManagementDialog(props: LabelManagementDialogProps = {}) {
  const { open, onOpenChange } = props
  const { labels, loading, addLabel, updateLabel, deleteLabel } = useLabels()
  const { t, language } = useLanguage()
  const { triggerRefresh } = useNoteRefresh()
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
  const [newLabel, setNewLabel] = useState('')
  const [editingColorId, setEditingColorId] = useState<string | null>(null)

  const controlled = open !== undefined && onOpenChange !== undefined

  const handleAddLabel = async () => {
    const trimmed = newLabel.trim()
    if (trimmed) {
      try {
        await addLabel(trimmed, 'gray')
        triggerRefresh()
        setNewLabel('')
      } catch (error) {
        console.error('Failed to add label:', error)
      }
    }
  }

  const handleDeleteLabel = async (id: string) => {
    try {
      await deleteLabel(id)
      triggerRefresh()
      setConfirmDeleteId(null)
    } catch (error) {
      console.error('Failed to delete label:', error)
    }
  }

  const handleChangeColor = async (id: string, color: LabelColorName) => {
    try {
      await updateLabel(id, { color })
      triggerRefresh()
      setEditingColorId(null)
    } catch (error) {
      console.error('Failed to update label color:', error)
    }
  }

  const dialogContent = (
      <DialogContent
        className="max-w-md"
        onInteractOutside={(event) => {
          // Prevent dialog from closing when interacting with Sonner toasts
          const target = event.target as HTMLElement;

          const isSonnerElement =
            target.closest('[data-sonner-toast]') ||
            target.closest('[data-sonner-toaster]') ||
            target.closest('[data-icon]') ||
            target.closest('[data-content]') ||
            target.closest('[data-description]') ||
            target.closest('[data-title]') ||
            target.closest('[data-button]');

          if (isSonnerElement) {
            event.preventDefault();
            return;
          }

          if (target.getAttribute('data-sonner-toaster') !== null) {
            event.preventDefault();
            return;
          }
        }}
      >
        <DialogHeader>
          <DialogTitle>{t('labels.editLabels')}</DialogTitle>
          <DialogDescription>
            {t('labels.editLabelsDescription')}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* Add new label */}
          <div className="flex gap-2">
            <Input
              placeholder={t('labels.newLabelPlaceholder')}
              value={newLabel}
              onChange={(e) => setNewLabel(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  e.preventDefault()
                  handleAddLabel()
                }
              }}
            />
            <Button onClick={handleAddLabel} size="icon">
              <Plus className="h-4 w-4" />
            </Button>
          </div>

          {/* List labels */}
          <div className="max-h-[60vh] overflow-y-auto space-y-2">
            {loading ? (
              <p className="text-sm text-muted-foreground">{t('labels.loading')}</p>
            ) : labels.length === 0 ? (
              <p className="text-sm text-muted-foreground">{t('labels.noLabelsFound')}</p>
            ) : (
              labels.map((label) => {
                const colorClasses = LABEL_COLORS[label.color]
                const isEditing = editingColorId === label.id

                return (
                  <div key={label.id} className="flex items-center justify-between p-2 rounded-md hover:bg-accent/50 group">
                    <div className="flex items-center gap-3 flex-1 relative">
                      <Tag className={cn("h-4 w-4", colorClasses.text)} />
                      <span className="font-medium text-sm">{label.name}</span>

                      {/* Color Picker Popover */}
                      {isEditing && (
                        <div className="absolute z-20 top-8 left-0 bg-popover text-popover-foreground border border-border rounded-lg shadow-xl p-3 animate-in fade-in zoom-in-95 w-48">
                          <div className="grid grid-cols-5 gap-2">
                            {(Object.keys(LABEL_COLORS) as LabelColorName[]).map((color) => {
                              const classes = LABEL_COLORS[color]
                              return (
                                <button
                                  key={color}
                                  className={cn(
                                    'h-7 w-7 rounded-full border-2 transition-all hover:scale-110',
                                    classes.bg,
                                    label.color === color ? 'border-gray-900 dark:border-gray-100 ring-2 ring-offset-1' : 'border-transparent'
                                  )}
                                  onClick={() => handleChangeColor(label.id, color)}
                                  title={color}
                                />
                              )
                            })}
                          </div>
                        </div>
                      )}
                    </div>

                    {confirmDeleteId === label.id ? (
                      <div className="flex items-center gap-2">
                        <span className="text-xs text-red-500 font-medium">{t('labels.confirmDeleteShort') || 'Confirmer ?'}</span>
                        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => setConfirmDeleteId(null)}>
                          {t('common.cancel') || 'Annuler'}
                        </Button>
                        <Button variant="destructive" size="sm" className="h-7 px-2 text-xs" onClick={() => handleDeleteLabel(label.id)}>
                          {t('common.delete') || 'Supprimer'}
                        </Button>
                      </div>
                    ) : (
                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-muted-foreground hover:text-foreground"
                          onClick={() => setEditingColorId(isEditing ? null : label.id)}
                          title={t('labels.changeColor')}
                        >
                          <Palette className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-red-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20"
                          onClick={() => setConfirmDeleteId(label.id)}
                          title={t('labels.deleteTooltip')}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    )}
                  </div>
                )
                })
              )}
          </div>
        </div>
      </DialogContent>
  )

  if (controlled) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange} dir={language === 'fa' || language === 'ar' ? 'rtl' : 'ltr'}>
        {dialogContent}
      </Dialog>
    )
  }

  return (
    <Dialog dir={language === 'fa' || language === 'ar' ? 'rtl' : 'ltr'}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" title={t('labels.manage')}>
          <Settings className="h-5 w-5" />
        </Button>
      </DialogTrigger>
      {dialogContent}
    </Dialog>
  )
}