// src/renderer/components/TemplateSection.tsx
// Phase 12.3: 딕테이션 템플릿 관리 UI (CommandsPage 내 섹션)

import { useState, useEffect, useCallback, useRef } from 'react'
import { Box, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, TextField, Tooltip } from '@mui/material'
import { Plus, Trash2, Pencil, Play } from 'lucide-react'
import { MetalCard, PhosphorText, Led, PhysicalButton } from '@d3ro/ui/components/ds'
import { PageHeader, EmptyStateCard } from './shared'
import { d3roPalette, d3roTypo } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import type { DictationTemplate, TemplateField, TemplateSessionInfo } from '@d3ro/core/types'

export function TemplateSection(): React.ReactElement {
  const { t } = useI18n()
  const [templates, setTemplates] = useState<DictationTemplate[]>([])
  const [loading, setLoading] = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [editId, setEditId] = useState<string | null>(null)
  const [formName, setFormName] = useState('')
  const [formDesc, setFormDesc] = useState('')
  const [formOutput, setFormOutput] = useState('')
  const [formFields, setFormFields] = useState<TemplateField[]>([])
  const [session, setSession] = useState<TemplateSessionInfo | null>(null)
  /** 마지막으로 완성된 템플릿 결과 — 활성 앱 삽입이 꺼져 있거나 실패해도 복사할 수 있게 보여 준다 */
  const [lastOutput, setLastOutput] = useState<string | null>(null)

  const [saving, setSaving] = useState(false)
  const isSavingRef = useRef(false)
  const isDeletingRef = useRef(false)

  const loadData = useCallback(async () => {
    setLoading(true)
    const result = await window.electronAPI.dictationTemplate.getAll()
    if (result.success) setTemplates(result.data)
    const sessionResult = await window.electronAPI.dictationTemplate.getSessionState()
    if (sessionResult.success) setSession(sessionResult.data)
    setLoading(false)
  }, [])

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

  // 다른 기기에서 바뀐 템플릿이 반영되면 다시 불러온다.
  useEffect(
    () =>
      window.electronAPI.app.onDataChanged((data) => {
        if (data.type === 'cloud-sync' && data.entities?.includes('user_templates')) loadData()
      }),
    [loadData],
  )

  useEffect(() => {
    const unsub = window.electronAPI.dictationTemplate.onSessionStateChanged((data) => {
      setSession(data)
    })
    const unsubComplete = window.electronAPI.dictationTemplate.onSessionCompleted((data) => {
      setSession(null)
      setLastOutput(data.outputText.length > 0 ? data.outputText : null)
      loadData()
    })
    return () => { unsub(); unsubComplete() }
  }, [loadData])

  const openCreate = () => {
    if (dialogOpen) return
    setEditId(null)
    setFormName('')
    setFormDesc('')
    setFormOutput('{{field1}}')
    setFormFields([{ id: 'field1', name: 'field1', label: 'Field 1', promptText: '', required: true, maxDurationSec: 30 }])
    setDialogOpen(true)
  }

  const openEdit = (template: DictationTemplate) => {
    if (dialogOpen) return
    setEditId(template.id)
    setFormName(template.name)
    setFormDesc(template.description)
    setFormOutput(template.outputFormat)
    setFormFields([...template.fields])
    setDialogOpen(true)
  }

  const handleSave = async () => {
    if (!formName.trim() || formFields.length === 0 || saving || isSavingRef.current) return
    isSavingRef.current = true
    setSaving(true)
    try {
      if (editId) {
        await window.electronAPI.dictationTemplate.update({
          id: editId,
          name: formName.trim(),
          description: formDesc.trim(),
          fields: formFields,
          outputFormat: formOutput,
        })
      } else {
        await window.electronAPI.dictationTemplate.create({
          name: formName.trim(),
          description: formDesc.trim(),
          fields: formFields,
          outputFormat: formOutput,
        })
      }
      setDialogOpen(false)
      loadData()
    } finally {
      setSaving(false)
      isSavingRef.current = false
    }
  }

  const handleDelete = async (id: string) => {
    if (isDeletingRef.current) return
    isDeletingRef.current = true
    try {
      await window.electronAPI.dictationTemplate.delete({ id })
      loadData()
    } finally {
      isDeletingRef.current = false
    }
  }

  const handleStartSession = async (templateId: string) => {
    setLastOutput(null)
    await window.electronAPI.dictationTemplate.startSession({ templateId })
  }

  const handleCopyOutput = () => {
    if (lastOutput) void navigator.clipboard.writeText(lastOutput)
  }

  const handleCancelSession = async () => {
    await window.electronAPI.dictationTemplate.cancelSession()
    setSession(null)
  }

  const addField = () => {
    const idx = formFields.length + 1
    setFormFields([...formFields, {
      id: `field${idx}`,
      name: `field${idx}`,
      label: `Field ${idx}`,
      promptText: '',
      required: true,
      maxDurationSec: 30,
    }])
  }

  const updateField = (index: number, updates: Partial<TemplateField>) => {
    const updated = [...formFields]
    updated[index] = { ...updated[index], ...updates }
    setFormFields(updated)
  }

  const removeField = (index: number) => {
    setFormFields(formFields.filter((_, i) => i !== index))
  }

  return (
    <Box sx={{ mt: 5 }}>
      <PageHeader
        title={t('template.title').toUpperCase()}
        action={
          <PhysicalButton size="small" onClick={openCreate}>
            <Plus size={14} style={{ marginRight: 4 }} /> {t('template.create')}
          </PhysicalButton>
        }
      />

      {/* 활성 세션 표시 */}
      {session && (
        <MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.accent.main}` }}>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Led color="amber" pulse />
              <PhosphorText variant="body">
                {session.templateName}: {session.currentField?.label ?? '...'}
              </PhosphorText>
              <PhosphorText variant="dim">
                ({session.currentFieldIndex + 1}/{session.totalFields})
              </PhosphorText>
            </Box>
            <PhysicalButton size="small" onClick={handleCancelSession}>
              {t('template.cancelSession')}
            </PhysicalButton>
          </Box>
          {/* 현재 필드의 음성 프롬프트 — 받아쓰기 결과가 이 필드 값으로 들어간다 */}
          {session.currentField?.promptText && (
            <PhosphorText variant="dim" sx={{ mt: 1 }}>
              {session.currentField.promptText}
            </PhosphorText>
          )}
        </MetalCard>
      )}

      {/* 마지막 완성 결과 */}
      {!session && lastOutput && (
        <MetalCard sx={{ mb: 2 }}>
          <PhosphorText variant="body" sx={{ whiteSpace: 'pre-wrap' }}>
            {lastOutput}
          </PhosphorText>
          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
            <PhysicalButton size="small" onClick={handleCopyOutput}>
              {t('common.copy')}
            </PhysicalButton>
            <PhysicalButton size="small" onClick={() => setLastOutput(null)}>
              {t('common.close')}
            </PhysicalButton>
          </Box>
        </MetalCard>
      )}

      {/* 템플릿 목록 */}
      {templates.length === 0 && !loading ? (
        <EmptyStateCard message={t('template.empty')} />
      ) : (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {templates.map((tmpl) => (
            <MetalCard key={tmpl.id}>
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                <Box sx={{ flex: 1 }}>
                  <PhosphorText variant="body" sx={{ fontWeight: d3roTypo.body.weight }}>
                    {tmpl.name}
                    {tmpl.isBuiltin && (
                      <Box component="span" sx={{ ml: 1, fontSize: d3roTypo.micro.size, color: d3roPalette.text.dimLabel }}>
                        PRESET
                      </Box>
                    )}
                  </PhosphorText>
                  <PhosphorText variant="dim" sx={{ mt: 0.25 }}>
                    {tmpl.fields.length} {t('template.fields').toLowerCase()} — {tmpl.description}
                  </PhosphorText>
                </Box>
                <Box sx={{ display: 'flex', gap: 0.5 }}>
                  <Tooltip title={t('template.startSession')}>
                    <IconButton
                      size="small"
                      onClick={() => handleStartSession(tmpl.id)}
                      disabled={!!session}
                      sx={{ color: d3roPalette.accent.main, '&:hover': { opacity: 0.8 } }}
                    >
                      <Play size={18} />
                    </IconButton>
                  </Tooltip>
                  <IconButton
                    size="small"
                    onClick={() => openEdit(tmpl)}
                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
                  >
                    <Pencil size={16} />
                  </IconButton>
                  {!tmpl.isBuiltin && (
                    <IconButton
                      size="small"
                      onClick={() => handleDelete(tmpl.id)}
                      sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.tag.red } }}
                    >
                      <Trash2 size={16} />
                    </IconButton>
                  )}
                </Box>
              </Box>
            </MetalCard>
          ))}
        </Box>
      )}

      {/* 편집 다이얼로그 */}
      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle>{editId ? t('template.edit') : t('template.create')}</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '8px !important' }}>
          <TextField
            label={t('template.name')}
            value={formName}
            onChange={(e) => setFormName(e.target.value)}
            size="small"
            fullWidth
          />
          <TextField
            label={t('template.description')}
            value={formDesc}
            onChange={(e) => setFormDesc(e.target.value)}
            size="small"
            fullWidth
          />

          <PhosphorText variant="label" sx={{ mt: 1, color: d3roPalette.text.dimLabel }}>
            {t('template.fields').toUpperCase()}
          </PhosphorText>

          {formFields.map((field, idx) => (
            <Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
              <TextField
                label={t('template.fieldName')}
                value={field.name}
                onChange={(e) => updateField(idx, { name: e.target.value, id: e.target.value })}
                size="small"
                sx={{ flex: 1 }}
              />
              <TextField
                label={t('template.fieldLabel')}
                value={field.label}
                onChange={(e) => updateField(idx, { label: e.target.value })}
                size="small"
                sx={{ flex: 1 }}
              />
              <TextField
                label={t('template.fieldPrompt')}
                value={field.promptText}
                onChange={(e) => updateField(idx, { promptText: e.target.value })}
                size="small"
                sx={{ flex: 2 }}
              />
              <IconButton
                size="small"
                onClick={() => removeField(idx)}
                disabled={formFields.length <= 1}
                sx={{ color: d3roPalette.text.inactive }}
              >
                <Trash2 size={16} />
              </IconButton>
            </Box>
          ))}

          <Button onClick={addField} startIcon={<Plus size={16} />} size="small" sx={{ alignSelf: 'flex-start' }}>
            {t('template.addField')}
          </Button>

          <TextField
            label={t('template.outputFormat')}
            value={formOutput}
            onChange={(e) => setFormOutput(e.target.value)}
            size="small"
            fullWidth
            multiline
            rows={3}
            helperText={t('template.outputHelperText')}
          />
        </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={!formName.trim() || formFields.length === 0 || saving}>
            {saving ? t('common.saving') : t('common.save')}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}