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

// src/renderer/pages/DictionaryPage.tsx
// 인스트루먼트 미학: MetalCard + PhosphorText + 타이포 토큰

import { useState, useEffect, useCallback } from 'react'
import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'
import AddIcon from '@mui/icons-material/Add'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import { MetalCard, PhosphorText } from '../components/ds'
import { PageHeader, SearchInput, EmptyStateCard } from '../components/shared'
import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
import { useI18n } from '../i18n'
import type { DictionaryEntry, DictionaryPage as DictPageData } from '@shared/types'

const PAGE_SIZE = 50

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 loadData = useCallback(async () => {
    setLoading(true)
    const result = search.trim()
      ? await window.electronAPI.dictionary.search({ query: search, page: 0, pageSize: PAGE_SIZE })
      : await window.electronAPI.dictionary.getAll({ page: 0, pageSize: PAGE_SIZE })
    if (result.success) setData(result.data)
    setLoading(false)
  }, [search])

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

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

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

  const handleSave = async () => {
    if (!formWord.trim()) return
    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()
  }

  return (
    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
      <PageHeader
        title={t('dictionary.title').toUpperCase()}
        count={t('dictionary.words', { count: data?.total ?? 0 }).toUpperCase()}
        action={
          <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">
            {t('dictionary.add').toUpperCase()}
          </Button>
        }
      />

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

      {loading ? (
        <PhosphorText variant="dim">{t('common.loading').toUpperCase()}</PhosphorText>
      ) : !data || data.entries.length === 0 ? (
        <EmptyStateCard message={search ? t('dictionary.noResults').toUpperCase() : t('dictionary.noWords').toUpperCase()} />
      ) : (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {data.entries.map((entry: DictionaryEntry) => (
            <MetalCard key={entry.id}>
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Box>
                  <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
                    <Box sx={{ fontSize: d3roTypo.body.size, fontWeight: d3roTypo.heading.weight, color: d3roPalette.text.primary }}>{entry.word}</Box>
                    {entry.pronunciation && (
                      <Box sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.meta.size, color: d3roPalette.text.dimLabel }}>[{entry.pronunciation}]</Box>
                    )}
                  </Box>
                  <Box sx={{
                    fontFamily: d3roFontMono,
                    fontSize: d3roTypo.label.size,
                    color: d3roPalette.text.inactive,
                    mt: 0.5,
                    letterSpacing: d3roTypo.label.spacing,
                  }}>
                    {entry.category.toUpperCase()} · {t('dictionary.used', { count: entry.usageCount })}
                  </Box>
                </Box>
                <Box sx={{ display: 'flex', gap: 0.5 }}>
                  <IconButton size="small" onClick={() => openEdit(entry)}
                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
                    <EditIcon sx={{ fontSize: 16 }} />
                  </IconButton>
                  <IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}
                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.tag.red } }}>
                    <DeleteIcon sx={{ fontSize: 16 }} />
                  </IconButton>
                </Box>
              </Box>
            </MetalCard>
          ))}
        </Box>
      )}

      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="xs" fullWidth>
        <DialogTitle sx={{ fontWeight: 700 }}>{editId ? t('dictionary.editTitle') : t('dictionary.addTitle')}</DialogTitle>
        <DialogContent>
          <TextField label={t('dictionary.word')} value={formWord} onChange={(e) => setFormWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
          <TextField label={t('dictionary.pronunciation')} value={formPronunciation} onChange={(e) => setFormPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
        </DialogContent>
        <DialogActions sx={{ px: 3, pb: 2 }}>
          <Button onClick={() => setDialogOpen(false)} sx={{ color: d3roPalette.text.inactive }}>{t('common.cancel')}</Button>
          <Button onClick={handleSave} variant="contained" disabled={!formWord.trim()}>{t('common.save')}</Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}