d3ro-voice/apps/desktop/src/renderer/pages/DictionaryPage.tsx

// src/renderer/pages/DictionaryPage.tsx
// Precision Vocabulary & Phonetic Dictionary Editor

import React, { useState, useEffect, useCallback, useRef } from 'react'
import { Box, TextField, Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Tooltip } from '@mui/material'
import { Plus, Trash2, Pencil, BookA, Download, Upload } from 'lucide-react'
import { MetalCard, PhosphorText, PhysicalButton, TactileBadge } from '@d3ro/ui/components/ds'
import { PageHeader, SearchInput, EmptyStateCard } from '../components/shared'
import { d3roPalette, d3roFontSans, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import type { DictionaryEntry, DictionaryPage as DictPageData } from '@d3ro/core/types'

export function DictionaryPage(): React.ReactElement {
  const { t } = useI18n()
  const [data, setData] = useState<DictPageData | null>(null)
  const [search, setSearch] = useState('')
  const [loading, setLoading] = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editId, setEditId] = useState<string | null>(null)
  const [formWord, setFormWord] = useState('')
  const [formPronunciation, setFormPronunciation] = useState('')
  const [saving, setSaving] = useState(false)
  const isSavingRef = useRef(false)
  const [ioBusy, setIoBusy] = useState(false)
  const [ioMessage, setIoMessage] = useState<string | null>(null)

  const loadData = useCallback(async () => {
    setLoading(true)
    const trimmed = search.trim()
    const result = trimmed
      ? await window.electronAPI.dictionary.search({ query: trimmed, page: 0, pageSize: 50 })
      : await window.electronAPI.dictionary.getAll({ page: 0, pageSize: 50 })
    if (result.success) setData(result.data)
    setLoading(false)
  }, [search])

  useEffect(() => {
    loadData()
  }, [loadData])

  const openAdd = () => {
    if (dialogOpen) return
    setEditId(null)
    setFormWord('')
    setFormPronunciation('')
    setDialogOpen(true)
  }

  const openEdit = (entry: DictionaryEntry) => {
    if (dialogOpen) return
    setEditId(entry.id)
    setFormWord(entry.word)
    setFormPronunciation(entry.pronunciation ?? '')
    setDialogOpen(true)
  }

  const handleSave = async () => {
    if (!formWord.trim() || saving || isSavingRef.current) return
    isSavingRef.current = true
    setSaving(true)
    try {
      if (editId) {
        await window.electronAPI.dictionary.update({
          id: editId,
          word: formWord.trim(),
          pronunciation: formPronunciation.trim() || undefined,
        })
      } else {
        await window.electronAPI.dictionary.add({
          word: formWord.trim(),
          pronunciation: formPronunciation.trim() || undefined,
        })
      }
      setDialogOpen(false)
      loadData()
    } finally {
      setSaving(false)
      isSavingRef.current = false
    }
  }

  const handleExport = async (format: 'json' | 'csv'): Promise<void> => {
    if (ioBusy) return
    setIoBusy(true)
    setIoMessage(null)
    try {
      const result = await window.electronAPI.dictionary.export({ format })
      setIoMessage(result.success ? t('dictionary.exported') : t('dictionary.exportFailed'))
    } finally {
      setIoBusy(false)
    }
  }

  const handleImport = async (format: 'json' | 'csv'): Promise<void> => {
    if (ioBusy) return
    setIoBusy(true)
    setIoMessage(null)
    try {
      const result = await window.electronAPI.dictionary.import({ filePath: '', format })
      if (!result.success) {
        setIoMessage(t('dictionary.importFailed'))
        return
      }
      const { imported, skipped, errors } = result.data
      setIoMessage(
        t('dictionary.importedCount', {
          imported: String(imported),
          skipped: String(skipped),
          errors: String(errors),
        })
      )
      await loadData()
    } finally {
      setIoBusy(false)
    }
  }

  const ioButtonSx = {
    p: 0.7,
    color: d3roPalette.text.inactive,
    bgcolor: d3roPalette.glass.raised,
    border: `1px solid ${d3roPalette.glass.hairline}`,
    '&:hover': { color: d3roPalette.accent.light, bgcolor: d3roPalette.glass.hairlineStrong },
  } as const

  return (
    <Box sx={{ maxWidth: 1060, mx: 'auto', p: { xs: 2.5, md: 4 }, pb: 10 }}>
      <PageHeader
        title={t('dictionary.title')}
        count={t('dictionary.words', { count: data?.total ?? 0 })}
        action={
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
            <Tooltip title={`${t('dictionary.export')} JSON`}>
              <IconButton
                size="small"
                disabled={ioBusy}
                onClick={() => void handleExport('json')}
                sx={ioButtonSx}
              >
                <Download size={15} />
              </IconButton>
            </Tooltip>
            <Tooltip title={`${t('dictionary.export')} CSV`}>
              <IconButton
                size="small"
                disabled={ioBusy}
                onClick={() => void handleExport('csv')}
                sx={ioButtonSx}
              >
                <Download size={15} />
              </IconButton>
            </Tooltip>
            <Tooltip title={`${t('dictionary.import')} JSON`}>
              <IconButton
                size="small"
                disabled={ioBusy}
                onClick={() => void handleImport('json')}
                sx={ioButtonSx}
              >
                <Upload size={15} />
              </IconButton>
            </Tooltip>
            <Tooltip title={`${t('dictionary.import')} CSV`}>
              <IconButton
                size="small"
                disabled={ioBusy}
                onClick={() => void handleImport('csv')}
                sx={ioButtonSx}
              >
                <Upload size={15} />
              </IconButton>
            </Tooltip>
            <PhysicalButton tone="accent" onClick={openAdd} size="small" trailingIcon={<Plus size={14} />}>
              {t('dictionary.add')}
            </PhysicalButton>
          </Box>
        }
      />

      {ioMessage && (
        <Box sx={{ mb: 1.5 }}>
          <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
            {ioMessage}
          </PhosphorText>
        </Box>
      )}

      <SearchInput
        placeholder={t('dictionary.search')}
        value={search}
        onChange={setSearch}
      />

      {loading ? (
        <Box sx={{ py: 6, textAlign: 'center' }}>
          <PhosphorText variant="dim">{t('common.loading')}</PhosphorText>
        </Box>
      ) : !data || data.entries.length === 0 ? (
        <EmptyStateCard
          message={search ? t('dictionary.noResults') : t('dictionary.noWords')}
          icon={<BookA />}
          action={
            <PhysicalButton tone="accent" onClick={openAdd}>
              <Plus size={15} style={{ marginRight: 4 }} />
              {t('dictionary.add')}
            </PhysicalButton>
          }
        />
      ) : (
        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 1.75 }}>
          {data.entries.map((entry: DictionaryEntry) => (
            <MetalCard key={entry.id} sx={{ p: 2.5 }}>
              <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
                <Box sx={{ flex: 1, minWidth: 0 }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mb: 0.75, flexWrap: 'wrap' }}>
                    <Box
                      sx={{
                        fontSize: d3roTypo.heading.size,
                        fontWeight: 500,
                        fontFamily: d3roFontSans,
                        color: d3roPalette.text.primary,
                      }}
                    >
                      {entry.word}
                    </Box>
                    {entry.pronunciation && (
                      <TactileBadge mono tone="accent">
                        [{entry.pronunciation}]
                      </TactileBadge>
                    )}
                  </Box>

                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mt: 1 }}>
                    <TactileBadge mono tone="mono">
                      {entry.category.toUpperCase()}
                    </TactileBadge>
                    <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
                      {t('dictionary.used', { count: entry.usageCount })}
                    </PhosphorText>
                  </Box>
                </Box>

                <Box sx={{ display: 'flex', gap: 0.5 }}>
                  <Tooltip title={t('common.edit')}>
                    <IconButton
                      size="small"
                      onClick={() => openEdit(entry)}
                      sx={{
                        p: 0.6,
                        color: d3roPalette.text.inactive,
                        bgcolor: d3roPalette.glass.raised,
                        border: `1px solid ${d3roPalette.glass.hairline}`,
                        '&:hover': { color: d3roPalette.accent.light, bgcolor: d3roPalette.glass.hairlineStrong },
                      }}
                    >
                      <Pencil size={15} />
                    </IconButton>
                  </Tooltip>
                  <Tooltip title={t('common.delete')}>
                    <IconButton
                      size="small"
                      onClick={async () => {
                        await window.electronAPI.dictionary.delete({ id: entry.id })
                        loadData()
                      }}
                      sx={{
                        p: 0.6,
                        color: d3roPalette.text.inactive,
                        bgcolor: d3roPalette.glass.raised,
                        border: `1px solid ${d3roPalette.glass.hairline}`,
                        '&:hover': { color: d3roPalette.tag.red, bgcolor: d3roPalette.tag.redBg },
                      }}
                    >
                      <Trash2 size={15} />
                    </IconButton>
                  </Tooltip>
                </Box>
              </Box>
            </MetalCard>
          ))}
        </Box>
      )}

      {/* Add / Edit Dialog */}
      <Dialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        maxWidth="xs"
        fullWidth
        PaperProps={{
          sx: {
            bgcolor: d3roPalette.bg.card,
            borderRadius: d3roRadius.doubleBezelOuter,
            border: `1px solid ${d3roPalette.glass.hairlineStrong}`,
            boxShadow: d3roShadow.dialog,
            p: 1,
          },
        }}
      >
        <DialogTitle sx={{ fontWeight: 500, fontFamily: d3roFontSans, color: d3roPalette.text.primary, pt: 2, px: 2.5 }}>
          {editId ? t('dictionary.editTitle') : t('dictionary.addTitle')}
        </DialogTitle>
        <DialogContent sx={{ px: 2.5 }}>
          <TextField
            label={t('dictionary.word')}
            value={formWord}
            onChange={(e) => setFormWord(e.target.value)}
            fullWidth
            autoFocus
            sx={{ mt: 1.5 }}
          />
          <TextField
            label={t('dictionary.pronunciation')}
            value={formPronunciation}
            onChange={(e) => setFormPronunciation(e.target.value)}
            fullWidth
            sx={{ mt: 2.5 }}
            helperText="e.g. 디쓰리오"
          />
        </DialogContent>
        <DialogActions sx={{ px: 2.5, pb: 2, pt: 1, gap: 1 }}>
          <PhysicalButton tone="glass" onClick={() => setDialogOpen(false)}>
            {t('common.cancel')}
          </PhysicalButton>
          <PhysicalButton tone="accent" onClick={handleSave} disabled={!formWord.trim() || saving}>
            {saving ? t('common.saving') || '저장 중...' : t('common.save')}
          </PhysicalButton>
        </DialogActions>
      </Dialog>
    </Box>
  )
}