d3ro-voice/apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx

// src/renderer/components/meeting/AddDocumentDialog.tsx
// Phase 14.5: 문서 생성 다이얼로그 — 템플릿 선택 + 커스텀 프롬프트

import { useState, useCallback } from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Box,
  TextField,
  LinearProgress,
} from '@mui/material'
import { MetalCard } from '@d3ro/ui/components/ds'
import { PhosphorText } from '@d3ro/ui/components/ds'
import { PhysicalButton } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
import { useI18n } from '../../i18n'

interface TemplateItem {
  id: string
  name: string
  description: string
  templateType: string
  isBuiltin: boolean
}

interface AddDocumentDialogProps {
  open: boolean
  onClose: () => void
  onGenerate: (templateId: string, customPrompt?: string, customTitle?: string) => void
  templates: TemplateItem[]
  generating: boolean
}

export function AddDocumentDialog({
  open,
  onClose,
  onGenerate,
  templates,
  generating,
}: AddDocumentDialogProps): React.ReactElement {
  const { t } = useI18n()
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [customPrompt, setCustomPrompt] = useState('')
  const [customTitle, setCustomTitle] = useState('')

  const selectedTemplate = templates.find((tp) => tp.id === selectedId)
  const isCustom = selectedTemplate?.templateType === 'custom'

  const handleGenerate = useCallback(() => {
    if (!selectedId) return
    onGenerate(
      selectedId,
      isCustom && customPrompt.trim() ? customPrompt.trim() : undefined,
      isCustom && customTitle.trim() ? customTitle.trim() : undefined,
    )
  }, [selectedId, isCustom, customPrompt, customTitle, onGenerate])

  const handleClose = useCallback(() => {
    if (!generating) {
      setSelectedId(null)
      setCustomPrompt('')
      setCustomTitle('')
      onClose()
    }
  }, [generating, onClose])

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
      slotProps={{
        paper: {
          sx: {
            bgcolor: d3roPalette.bg.card,
            border: `1px solid ${d3roPalette.border.default}`,
            borderRadius: d3roRadius.inner,
            boxShadow: d3roShadow.tooltip,
          },
        },
      }}
    >
      <DialogTitle>
        <PhosphorText variant="label">{t('meeting.selectTemplate')}</PhosphorText>
      </DialogTitle>

      <DialogContent>
        {generating && (
          <Box sx={{ mb: 2 }}>
            <LinearProgress
              sx={{
                height: 4,
                borderRadius: 2,
                bgcolor: d3roPalette.bg.inset,
                '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
              }}
            />
            <PhosphorText variant="dim" sx={{ fontSize: 11, mt: 0.5 }}>
              {t('meeting.generating')}
            </PhosphorText>
          </Box>
        )}

        {/* 템플릿 목록 */}
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {templates.map((tp) => (
            <Box
              key={tp.id}
              onClick={() => !generating && setSelectedId(tp.id)}
              sx={{
                cursor: generating ? 'default' : 'pointer',
                opacity: generating ? 0.6 : 1,
                border:
                  selectedId === tp.id
                    ? `2px solid ${d3roPalette.accent.amber}`
                    : `2px solid transparent`,
                borderRadius: d3roRadius.inner,
                transition: 'border-color 0.15s',
                '&:hover': {
                  borderColor: generating ? undefined : d3roPalette.accent.amberDim,
                },
              }}
            >
              <MetalCard>
                <PhosphorText variant="compact">{tp.name}</PhosphorText>
                <PhosphorText variant="dim" sx={{ fontSize: 11, mt: 0.25 }}>
                  {tp.description}
                </PhosphorText>
              </MetalCard>
            </Box>
          ))}
        </Box>

        {/* 커스텀 템플릿 추가 입력 */}
        {isCustom && (
          <Box sx={{ mt: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
            <TextField
              label={t('meeting.templateName')}
              size="small"
              fullWidth
              value={customTitle}
              onChange={(e) => setCustomTitle(e.target.value)}
              disabled={generating}
              sx={{
                '& .MuiInputBase-root': { fontSize: d3roTypo.compact.size },
              }}
            />
            <TextField
              label={t('meeting.customPrompt')}
              size="small"
              fullWidth
              multiline
              rows={3}
              value={customPrompt}
              onChange={(e) => setCustomPrompt(e.target.value)}
              disabled={generating}
              placeholder={t('meeting.templatePrompt')}
              sx={{
                '& .MuiInputBase-root': { fontSize: d3roTypo.compact.size },
              }}
            />
          </Box>
        )}
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 2, gap: 1 }}>
        <PhysicalButton
          size="small"
          onClick={handleClose}
          disabled={generating}
          sx={{ height: 36, fontSize: d3roTypo.engrave.size }}
        >
          {t('common.cancel')}
        </PhysicalButton>
        <PhysicalButton
          size="small"
          onClick={handleGenerate}
          disabled={!selectedId || generating}
          sx={{
            height: 36,
            fontSize: d3roTypo.engrave.size,
            color: d3roPalette.accent.amber,
          }}
        >
          {generating ? t('meeting.generating') : t('meeting.generate')}
        </PhysicalButton>
      </DialogActions>
    </Dialog>
  )
}