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 { Badge } from './ui/badge'
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'

export function LabelManagementDialog() {
  const { labels, loading, addLabel, updateLabel, deleteLabel } = useLabels()
  const { t } = useLanguage()
  const [newLabel, setNewLabel] = useState('')
  const [editingColorId, setEditingColorId] = useState<string | null>(null)

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

  const handleDeleteLabel = async (id: string) => {
    if (confirm(t('labels.confirmDelete'))) {
      try {
        await deleteLabel(id)
      } catch (error) {
        console.error('Failed to delete label:', error)
      }
    }
  }

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

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" title={t('labels.manage')}>
          <Settings className="h-5 w-5" />
        </Button>
      </DialogTrigger>
      <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-gray-500">{t('labels.loading')}</p>
            ) : labels.length === 0 ? (
              <p className="text-sm text-gray-500">{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-gray-100 dark:hover:bg-zinc-800/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-white dark:bg-zinc-900 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>

                    <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-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
                        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={() => handleDeleteLabel(label.id)}
                        title={t('labels.deleteTooltip')}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )
                })
              )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}