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

// src/renderer/pages/HistoryPage.tsx
// 인스트루먼트 미학: MetalCard + PhosphorText + Led + 날짜 그룹핑
// Phase 10: 태그 필터링 + 태그 관리 통합

import { useState, useEffect, useCallback, useMemo } from 'react'
import { Box, Chip, IconButton, Tooltip } from '@mui/material'
import FileDownloadIcon from '@mui/icons-material/FileDownload'
import { PhosphorText } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import { getDateKey } from '../utils/formatters'
import { EmptyStateCard, SearchInput, PageHeader, HistoryEntryCard } from '../components/shared'
import type { HistoryEntry, HistoryPage as HistoryPageData, TagCount } from '@d3ro/core/types'

const PAGE_SIZE = 50

export function HistoryPage(): React.ReactElement {
  const { t, formatRelativeDate } = useI18n()
  const [data, setData] = useState<HistoryPageData | null>(null)
  const [search, setSearch] = useState('')
  const [loading, setLoading] = useState(true)
  const [allTags, setAllTags] = useState<TagCount[]>([])
  const [activeTag, setActiveTag] = useState<string | null>(null)

  const loadTags = useCallback(async () => {
    const result = await window.electronAPI.memo.getAllTags()
    if (result.success) setAllTags(result.data)
  }, [])

  const loadData = useCallback(async () => {
    setLoading(true)
    let result: { success: boolean; data: HistoryPageData } | { success: false; error: unknown }

    if (activeTag) {
      result = await window.electronAPI.memo.searchByTag({ tag: activeTag, page: 0, pageSize: PAGE_SIZE })
    } else if (search.trim()) {
      result = await window.electronAPI.history.search({ query: search, page: 0, pageSize: PAGE_SIZE })
    } else {
      result = await window.electronAPI.history.getAll({ page: 0, pageSize: PAGE_SIZE, sortOrder: 'desc' })
    }
    if (result.success) setData(result.data)
    setLoading(false)
  }, [search, activeTag])

  useEffect(() => {
    loadData()
    loadTags()
    const unsub = window.electronAPI.app.onDataChanged(() => { loadData(); loadTags() })
    return unsub
  }, [loadData, loadTags])

  const groupedEntries = useMemo(() => {
    if (!data) return []
    const groups: Record<string, { label: string; entries: HistoryEntry[] }> = {}
    for (const entry of data.entries) {
      const key = getDateKey(entry.createdAt)
      if (!groups[key]) {
        groups[key] = { label: formatRelativeDate(entry.createdAt), entries: [] }
      }
      groups[key].entries.push(entry)
    }
    return Object.values(groups)
  }, [data, formatRelativeDate])

  const handleCopy = useCallback((text: string) => {
    navigator.clipboard.writeText(text)
  }, [])

  const handleDelete = useCallback((id: string) => {
    window.electronAPI.history.delete({ id })
    loadData()
  }, [loadData])

  const handleTagClick = useCallback((tag: string) => {
    setActiveTag(prev => prev === tag ? null : tag)
    setSearch('')
  }, [])

  const handleExport = useCallback(async () => {
    await window.electronAPI.memo.export({
      format: 'markdown' as const,
      tag: activeTag ?? undefined,
    })
  }, [activeTag])

  return (
    <Box sx={{ mx: 'auto', p: 4, overflow: 'hidden' }}>
      {/* 페이지 헤더 -- 각인 스타일 */}
      <PageHeader
        title={t('history.title').toUpperCase()}
        action={
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Tooltip title={t('memo.export')} arrow>
              <IconButton
                size="small"
                onClick={handleExport}
                sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
              >
                <FileDownloadIcon sx={{ fontSize: 18 }} />
              </IconButton>
            </Tooltip>
            <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
              {t('history.entries', { count: data?.total ?? 0 }).toUpperCase()}
            </PhosphorText>
          </Box>
        }
      />

      {/* 태그 필터 바 */}
      {allTags.length > 0 && (
        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
          {allTags.map(tc => (
            <Chip
              key={tc.tag}
              label={`#${tc.tag} (${tc.count})`}
              size="small"
              variant={activeTag === tc.tag ? 'filled' : 'outlined'}
              onClick={() => handleTagClick(tc.tag)}
              sx={{
                height: 22,
                fontFamily: d3roFontMono,
                fontSize: d3roTypo.micro.size,
                borderRadius: d3roRadius.small,
                borderColor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.border.subtle,
                bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : 'transparent',
                color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary,
                '&:hover': {
                  bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.bg.cardHover,
                },
              }}
            />
          ))}
          {activeTag && (
            <Chip
              label={t('memo.clearFilter')}
              size="small"
              onClick={() => setActiveTag(null)}
              sx={{
                height: 22,
                fontFamily: d3roFontMono,
                fontSize: d3roTypo.micro.size,
                borderRadius: d3roRadius.small,
                color: d3roPalette.text.muted,
                '&:hover': { color: d3roPalette.tag.red },
              }}
            />
          )}
        </Box>
      )}

      {!activeTag && (
        <SearchInput
          value={search}
          onChange={setSearch}
          placeholder={t('history.search').toUpperCase()}
        />
      )}

      {loading ? (
        <PhosphorText variant="dim">{t('common.loading').toUpperCase()}</PhosphorText>
      ) : !data || data.entries.length === 0 ? (
        <EmptyStateCard
          message={search ? t('history.noResults').toUpperCase() : t('history.noHistory').toUpperCase()}
        />
      ) : (
        groupedEntries.map((group) => (
          <Box key={group.label} sx={{ mb: 3 }}>
            {/* 날짜 구분자 */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1.5 }}>
              <PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel, whiteSpace: 'nowrap' }}>
                {group.label}
              </PhosphorText>
              <Box sx={{ flex: 1, height: '1px', bgcolor: d3roPalette.border.subtle }} />
              <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.label.size }}>
                {t('history.count', { count: group.entries.length })}
              </PhosphorText>
            </Box>

            {/* 항목 — 반응형 그리드 */}
            <Box sx={{
              display: 'grid',
              gridTemplateColumns: {
                xs: '1fr',
                sm: 'repeat(2, 1fr)',
                md: 'repeat(3, 1fr)',
              },
              gap: 1.5,
            }}>
              {group.entries.map((entry: HistoryEntry) => (
                <HistoryEntryCard
                  key={entry.id}
                  entry={entry}
                  onCopy={handleCopy}
                  onDelete={handleDelete}
                  showTags
                  onTagClick={handleTagClick}
                />
              ))}
            </Box>
          </Box>
        ))
      )}
    </Box>
  )
}