Momento/memento-note/components/database-block-editor.tsx

'use client'

import { useState, useCallback } from 'react'
import { Trash2 } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import {
  type DatabaseBlockData,
  randomDefaultCover,
} from '@/lib/editor/database-block-types'

interface DatabaseBlockEditorProps {
  data: DatabaseBlockData
  readOnly?: boolean
  onChange: (data: DatabaseBlockData) => void
}

export function DatabaseBlockEditor({ data, readOnly, onChange }: DatabaseBlockEditorProps) {
  const { t } = useLanguage()
  const { dbId, dbView, dbAuthors, dbBooks } = data

  const [newBookTitle, setNewBookTitle] = useState('')
  const [newBookAuthor, setNewBookAuthor] = useState('')
  const [newBookTag, setNewBookTag] = useState('')
  const [newBookCover, setNewBookCover] = useState('')
  const [newAuthorName, setNewAuthorName] = useState('')

  const patch = useCallback((partial: Partial<DatabaseBlockData>) => {
    onChange({ ...data, ...partial })
  }, [data, onChange])

  const handleAddAuthor = useCallback(() => {
    const name = newAuthorName.trim()
    if (!name) return
    if (dbAuthors.some((a) => a.name.toLowerCase() === name.toLowerCase())) return
    patch({
      dbAuthors: [...dbAuthors, { id: `auth-${Date.now()}`, name }],
    })
    setNewAuthorName('')
  }, [dbAuthors, newAuthorName, patch])

  const handleAddBook = useCallback((e: React.FormEvent) => {
    e.preventDefault()
    const title = newBookTitle.trim()
    let author = newBookAuthor.trim()
    if (!title || !author) return

    let nextAuthors = [...dbAuthors]
    if (author === '__new__') return
    if (!nextAuthors.some((a) => a.name.toLowerCase() === author.toLowerCase())) {
      nextAuthors = [...nextAuthors, { id: `auth-${Date.now()}`, name: author }]
    }

    patch({
      dbAuthors: nextAuthors,
      dbBooks: [
        ...dbBooks,
        {
          id: `bk-${Date.now()}`,
          title,
          author,
          cover: newBookCover.trim() || randomDefaultCover(),
          tag: newBookTag.trim() || t('databaseBlock.defaultTag'),
        },
      ],
    })
    setNewBookTitle('')
    setNewBookAuthor('')
    setNewBookTag('')
    setNewBookCover('')
  }, [dbAuthors, dbBooks, newBookAuthor, newBookCover, newBookTag, newBookTitle, patch, t])

  const handleDeleteBook = useCallback((id: string) => {
    patch({ dbBooks: dbBooks.filter((b) => b.id !== id) })
  }, [dbBooks, patch])

  const handleDeleteAuthor = useCallback((id: string) => {
    patch({ dbAuthors: dbAuthors.filter((a) => a.id !== id) })
  }, [dbAuthors, patch])

  return (
    <div className="database-block not-prose my-4 text-left">
      <div className="database-block__inner">
        <div className="database-block__header">
          <div className="flex items-center gap-2 min-w-0">
            <span className="text-lg shrink-0" aria-hidden>📚</span>
            <div className="min-w-0">
              <span className="database-block__title">{t('databaseBlock.title')}</span>
              <span className="database-block__id">id: {dbId}</span>
            </div>
          </div>
          {!readOnly && (
            <div className="database-block__view-toggle">
              <button
                type="button"
                onClick={() => patch({ dbView: 'table' })}
                className={dbView === 'table' ? 'is-active' : ''}
              >
                {t('databaseBlock.viewTable')}
              </button>
              <button
                type="button"
                onClick={() => patch({ dbView: 'card' })}
                className={dbView === 'card' ? 'is-active' : ''}
              >
                {t('databaseBlock.viewCards')}
              </button>
            </div>
          )}
        </div>

        <p className="database-block__hint">{t('databaseBlock.hint')}</p>

        {dbView === 'table' ? (
          <div className="space-y-4">
            <div className="database-block__table-wrap">
              <table className="database-block__table">
                <thead>
                  <tr>
                    <th>{t('databaseBlock.colAuthor')}</th>
                    <th>{t('databaseBlock.colWorks')}</th>
                    <th className="text-right">{t('databaseBlock.colRollup')}</th>
                    {!readOnly && <th className="w-12" />}
                  </tr>
                </thead>
                <tbody>
                  {dbAuthors.map((auth) => {
                    const authorBooks = dbBooks.filter(
                      (b) => b.author.toLowerCase() === auth.name.toLowerCase(),
                    )
                    const worksStr = authorBooks.map((b) => b.title).join(', ')
                      || t('databaseBlock.noLinkedWorks')
                    return (
                      <tr key={auth.id}>
                        <td className="font-semibold">{auth.name}</td>
                        <td className="database-block__works-cell" title={worksStr}>{worksStr}</td>
                        <td className="database-block__rollup">{authorBooks.length}</td>
                        {!readOnly && (
                          <td className="text-center">
                            <button
                              type="button"
                              onClick={() => handleDeleteAuthor(auth.id)}
                              className="database-block__delete-btn"
                            >
                              {t('databaseBlock.deleteShort')}
                            </button>
                          </td>
                        )}
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>

            {!readOnly && (
              <div className="database-block__inline-form">
                <span className="database-block__form-label">{t('databaseBlock.addAuthor')}</span>
                <input
                  type="text"
                  placeholder={t('databaseBlock.authorPlaceholder')}
                  value={newAuthorName}
                  onChange={(e) => setNewAuthorName(e.target.value)}
                  className="database-block__input flex-1"
                />
                <button type="button" onClick={handleAddAuthor} className="database-block__primary-btn">
                  {t('databaseBlock.createAuthor')}
                </button>
              </div>
            )}
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {dbBooks.map((book) => (
              <div key={book.id} className="database-block__card group/book">
                {!readOnly && (
                  <button
                    type="button"
                    onClick={() => handleDeleteBook(book.id)}
                    className="database-block__card-delete"
                    title={t('databaseBlock.deleteCard')}
                  >
                    <Trash2 size={11} />
                  </button>
                )}
                <div className="database-block__card-cover">
                  <img src={book.cover} alt={book.title} referrerPolicy="no-referrer" />
                </div>
                <div className="database-block__card-body">
                  <p className="database-block__card-title" title={book.title}>{book.title}</p>
                  <div className="flex flex-wrap gap-1 pt-1">
                    <span className="database-block__tag database-block__tag--author">{book.author}</span>
                    <span className="database-block__tag database-block__tag--genre">{book.tag}</span>
                  </div>
                </div>
              </div>
            ))}
            <div className="database-block__card-placeholder">
              <span className="text-xl mb-1" aria-hidden>📖</span>
              <span className="font-bold text-[10px] uppercase tracking-widest">{t('databaseBlock.worksBase')}</span>
              <span className="text-[8.5px] text-zinc-400 mt-1">
                {t('databaseBlock.storedCount', { count: dbBooks.length })}
              </span>
            </div>
          </div>
        )}

        {!readOnly && (
          <form onSubmit={handleAddBook} className="database-block__book-form">
            <span className="database-block__form-heading">{t('databaseBlock.addWork')}</span>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <input
                type="text"
                placeholder={t('databaseBlock.bookTitlePlaceholder')}
                value={newBookTitle}
                onChange={(e) => setNewBookTitle(e.target.value)}
                className="database-block__input"
                required
              />
              <select
                value={newBookAuthor}
                onChange={(e) => setNewBookAuthor(e.target.value)}
                className="database-block__input"
                required
              >
                <option value="">{t('databaseBlock.selectAuthor')}</option>
                {dbAuthors.map((auth) => (
                  <option key={auth.id} value={auth.name}>{auth.name}</option>
                ))}
              </select>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <input
                type="text"
                placeholder={t('databaseBlock.tagPlaceholder')}
                value={newBookTag}
                onChange={(e) => setNewBookTag(e.target.value)}
                className="database-block__input"
              />
              <input
                type="text"
                placeholder={t('databaseBlock.coverPlaceholder')}
                value={newBookCover}
                onChange={(e) => setNewBookCover(e.target.value)}
                className="database-block__input"
              />
            </div>
            <button type="submit" className="database-block__submit">
              {t('databaseBlock.insertWork')}
            </button>
          </form>
        )}
      </div>
    </div>
  )
}