d3ro-voice/src/renderer/components/meeting/EditableSegment.tsx

// src/renderer/components/meeting/EditableSegment.tsx
// Phase 14.5: 전사 세그먼트 인라인 편집 컴포넌트

import { useState, useRef, useCallback } from 'react'
import { Box, TextField, Tooltip } from '@mui/material'
import { d3roPalette, d3roFontMono } from '../../theme'
import { useI18n } from '../../i18n'

interface EditableSegmentProps {
  segmentId: string
  timestamp: number   // ms, 상대 시간
  text: string
  edited: boolean     // 수정 여부
  onEdit: (segmentId: string, newText: string) => void
}

function formatTimestamp(ms: number): string {
  const totalSec = Math.floor(ms / 1000)
  const min = Math.floor(totalSec / 60)
  const sec = totalSec % 60
  return `[${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}]`
}

export function EditableSegment({
  segmentId,
  timestamp,
  text,
  edited,
  onEdit,
}: EditableSegmentProps): React.ReactElement {
  const { t } = useI18n()
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(text)
  const inputRef = useRef<HTMLInputElement>(null)

  const handleClick = useCallback(() => {
    setDraft(text)
    setEditing(true)
  }, [text])

  const handleCommit = useCallback(() => {
    const trimmed = draft.trim()
    if (trimmed && trimmed !== text) {
      onEdit(segmentId, trimmed)
    }
    setEditing(false)
  }, [draft, text, segmentId, onEdit])

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        handleCommit()
      } else if (e.key === 'Escape') {
        setEditing(false)
      }
    },
    [handleCommit],
  )

  if (editing) {
    return (
      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
        <Box
          component="span"
          sx={{
            fontFamily: d3roFontMono,
            fontSize: 11,
            color: d3roPalette.text.inactive,
            pt: '7px',
            flexShrink: 0,
            userSelect: 'none',
          }}
        >
          {formatTimestamp(timestamp)}
        </Box>
        <TextField
          inputRef={inputRef}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={handleCommit}
          autoFocus
          size="small"
          fullWidth
          multiline
          sx={{
            '& .MuiInputBase-root': {
              fontFamily: d3roFontMono,
              fontSize: 13,
              bgcolor: d3roPalette.bg.input,
            },
          }}
        />
      </Box>
    )
  }

  const textNode = (
    <Box
      component="span"
      onClick={handleClick}
      sx={{
        fontFamily: d3roFontMono,
        fontSize: 13,
        color: d3roPalette.text.primary,
        cursor: 'text',
        borderBottom: edited ? `1px dashed ${d3roPalette.text.inactive}` : 'none',
        '&:hover': {
          color: d3roPalette.text.primary,
          borderBottomColor: edited ? d3roPalette.accent.amber : undefined,
        },
      }}
    >
      {text}
    </Box>
  )

  return (
    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 0.5 }}>
      <Box
        component="span"
        sx={{
          fontFamily: d3roFontMono,
          fontSize: 11,
          color: d3roPalette.text.inactive,
          pt: '2px',
          flexShrink: 0,
          userSelect: 'none',
        }}
      >
        {formatTimestamp(timestamp)}
      </Box>
      {edited ? (
        <Tooltip title={t('meeting.modified')} placement="top">
          {textNode}
        </Tooltip>
      ) : (
        textNode
      )}
    </Box>
  )
}