// src/renderer/pages/CommandsPage.tsx
// Custom LLM Commands, Voice Keywords & Multi-Step LLM Pipeline Chains

import React, { useState, useEffect, useCallback, useRef } from 'react'
import {
  Box,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Tooltip,
  Typography,
  IconButton,
} from '@mui/material'
import {
  Plus,
  Trash2,
  Pencil,
  CircleCheck,
  Play,
  Zap,
  ArrowRight,
  Sparkles,
  CheckCircle2,
  Mic,
  Cpu,
  ClipboardCopy,
  TriangleAlert,
} from 'lucide-react'
import {
  MetalCard,
  PhosphorText,
  Led,
  PhysicalButton,
  DoubleBezelCard,
  TactileBadge,
} from '@d3ro/ui/components/ds'
import { PageHeader, EmptyStateCard } from '../components/shared'
import { d3roPalette, d3roFontSans, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import { TemplateSection } from '../components/TemplateSection'

interface CustomInstruction {
  id: string
  name: string
  description: string
  prompt: string
  icon: string
  isBuiltin: boolean
  order: number
}

export function CommandsPage(): React.ReactElement {
  const { t } = useI18n()
  const [instructions, setInstructions] = useState<CustomInstruction[]>([])
  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 [formPrompt, setFormPrompt] = useState('')
  const [activeId, setActiveId] = useState<string | null>(null)

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

  // Interactive Pipeline Test State
  const [testInput, setTestInput] = useState('')
  const [testResult, setTestResult] = useState<string | null>(null)
  const [testError, setTestError] = useState<string | null>(null)
  const [testing, setTesting] = useState(false)

  const loadData = useCallback(async () => {
    setLoading(true)
    const [instrResult, configResult] = await Promise.all([
      window.electronAPI.instruction.getAll(),
      window.electronAPI.config.getAll(),
    ])
    if (instrResult.success) {
      setInstructions(instrResult.data as CustomInstruction[])
    }
    if (configResult.success) {
      const cfg = configResult.data as Record<string, unknown>
      setActiveId((cfg['activeInstructionId'] as string) ?? null)
    }
    setLoading(false)
  }, [])

  useEffect(() => {
    loadData()
    const unsub = window.electronAPI.app.onDataChanged((data) => {
      if (data.type === 'command-changed' && data.activeId) {
        setActiveId(data.activeId)
      }
      loadData()
    })
    return unsub
  }, [loadData])

  const handleActivate = (id: string) => {
    const newId = activeId === id ? null : id
    setActiveId(newId)
    if (newId) {
      window.electronAPI.config.set({
        key: 'activeInstructionId' as keyof import('@d3ro/core/types').AppConfig,
        value: newId as never,
      })
      window.electronAPI.config.set({ key: 'defaultLLMAction', value: 'custom' })
    } else {
      window.electronAPI.config.set({
        key: 'activeInstructionId' as keyof import('@d3ro/core/types').AppConfig,
        value: '' as never,
      })
      window.electronAPI.config.set({ key: 'defaultLLMAction', value: 'none' })
    }
  }

  const openAdd = () => {
    if (dialogOpen) return
    setEditId(null)
    setFormName('')
    setFormDesc('')
    setFormPrompt(t('commands.defaultPrompt'))
    setDialogOpen(true)
  }

  const openEdit = (inst: CustomInstruction) => {
    if (dialogOpen) return
    setEditId(inst.id)
    setFormName(inst.name)
    setFormDesc(inst.description)
    setFormPrompt(inst.prompt)
    setDialogOpen(true)
  }

  const handleSave = async () => {
    if (!formName.trim() || saving || isSavingRef.current) return
    isSavingRef.current = true
    setSaving(true)
    try {
      if (editId) {
        await window.electronAPI.instruction.update({
          id: editId,
          name: formName.trim(),
          description: formDesc.trim(),
          prompt: formPrompt.trim(),
        })
      } else {
        await window.electronAPI.instruction.create({
          name: formName.trim(),
          description: formDesc.trim(),
          prompt: formPrompt.trim(),
        })
      }
      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.instruction.delete({ id })
      if (activeId === id) {
        setActiveId(null)
        window.electronAPI.config.set({ key: 'defaultLLMAction', value: 'none' })
      }
      loadData()
    } finally {
      isDeletingRef.current = false
    }
  }

  // 이 벤치는 실제 받아쓰기와 같은 경로(llm.process → processText)를 탄다.
  // 지시문 원문을 customPrompt로 넘기면 메인 프로세스가 플레이스홀더 치환과
  // 시스템 프롬프트 배치를 처리한다 — 치환 규칙을 렌더러에 복제하지 않는다.
  const handleRunPipelineTest = async () => {
    if (!testInput.trim()) return
    setTesting(true)
    setTestResult(null)
    setTestError(null)
    try {
      const activeInst = instructions.find((i) => i.id === activeId)
      const res = await window.electronAPI.llm.process(
        activeInst
          ? { text: testInput.trim(), action: 'custom', customPrompt: activeInst.prompt }
          : { text: testInput.trim(), action: 'refine' },
      )
      if (res.success) {
        setTestResult(res.data.processedText)
      } else {
        setTestError(res.error.message || t('popup.error.default'))
      }
    } catch (error) {
      setTestError(error instanceof Error ? error.message : t('popup.error.default'))
    } finally {
      setTesting(false)
    }
  }

  const activeInstruction = instructions.find((i) => i.id === activeId)

  return (
    <Box sx={{ maxWidth: 1060, mx: 'auto', p: { xs: 2.5, md: 4 }, pb: 10 }}>
      <PageHeader
        title={t('commands.title')}
        count={t('commands.count', { count: instructions.length })}
        action={
          <PhysicalButton tone="accent" onClick={openAdd} size="small" trailingIcon={<Plus size={14} />}>
            {t('commands.add')}
          </PhysicalButton>
        }
      />

      {/* ── 1. Active Command Hero Cockpit & Pipeline Architecture ── */}
      <DoubleBezelCard innerPadding={3} sx={{ mb: 3.5 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Box
              sx={{
                width: 44,
                height: 44,
                borderRadius: d3roRadius.inner,
                bgcolor: activeInstruction ? d3roPalette.accent.dim : d3roPalette.bg.inset,
                border: `1px solid ${activeInstruction ? d3roPalette.accent.main : d3roPalette.border.subtle}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: activeInstruction ? d3roPalette.accent.light : d3roPalette.text.disabled,
              }}
            >
              <Zap size={22} />
            </Box>
            <Box>
              <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel, mb: 0.25 }}>
                {t('commands.activeCommand').toUpperCase()}
              </PhosphorText>
              <Typography
                sx={{
                  fontFamily: d3roFontSans,
                  fontSize: '18px',
                  fontWeight: 500,
                  color: activeInstruction ? d3roPalette.text.primary : d3roPalette.text.disabled,
                }}
              >
                {activeInstruction ? activeInstruction.name : t('commands.none')}
              </Typography>
            </Box>
          </Box>

          <TactileBadge
            ledColor={activeInstruction ? 'green' : 'off'}
            ledPulse={Boolean(activeInstruction)}
            tone={activeInstruction ? 'success' : 'default'}
          >
            {activeInstruction ? 'PIPELINE ACTIVE' : 'RAW DICTATION MODE'}
          </TactileBadge>
        </Box>

        {/* Visual Pipeline Flow Schematic */}
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: 'repeat(4, 1fr)' },
            gap: 1.5,
            p: 2,
            bgcolor: d3roPalette.bg.inset,
            borderRadius: d3roRadius.inner,
            border: `1px solid ${d3roPalette.glass.hairline}`,
          }}
        >
          {/* Step 1 */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
            <Box
              sx={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                bgcolor: d3roPalette.glass.raised,
                border: `1px solid ${d3roPalette.glass.hairline}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: d3roPalette.accent.light,
                flexShrink: 0,
              }}
            >
              <Mic size={15} />
            </Box>
            <Box sx={{ minWidth: 0, flex: 1 }}>
              <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
                STEP 01
              </PhosphorText>
              <Typography sx={{ fontFamily: d3roFontSans, fontSize: '12px', fontWeight: 600, color: d3roPalette.text.primary, whiteSpace: 'nowrap' }}>
                faster-whisper
              </Typography>
            </Box>
            <ArrowRight size={14} style={{ color: d3roPalette.text.disabled, opacity: 0.5 }} />
          </Box>

          {/* Step 2 */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
            <Box
              sx={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                bgcolor: d3roPalette.glass.raised,
                border: `1px solid ${d3roPalette.glass.hairline}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: d3roPalette.tag.green,
                flexShrink: 0,
              }}
            >
              <CheckCircle2 size={15} />
            </Box>
            <Box sx={{ minWidth: 0, flex: 1 }}>
              <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
                STEP 02
              </PhosphorText>
              <Typography sx={{ fontFamily: d3roFontSans, fontSize: '12px', fontWeight: 600, color: d3roPalette.text.primary, whiteSpace: 'nowrap' }}>
                Phonetic Fix
              </Typography>
            </Box>
            <ArrowRight size={14} style={{ color: d3roPalette.text.disabled, opacity: 0.5 }} />
          </Box>

          {/* Step 3 */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
            <Box
              sx={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                bgcolor: activeInstruction ? d3roPalette.accent.dim : d3roPalette.glass.raised,
                border: `1px solid ${activeInstruction ? d3roPalette.accent.main : d3roPalette.glass.hairline}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: activeInstruction ? d3roPalette.accent.light : d3roPalette.text.disabled,
                flexShrink: 0,
              }}
            >
              <Cpu size={15} />
            </Box>
            <Box sx={{ minWidth: 0, flex: 1 }}>
              <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
                STEP 03
              </PhosphorText>
              <Typography sx={{ fontFamily: d3roFontSans, fontSize: '12px', fontWeight: 600, color: d3roPalette.text.primary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                {activeInstruction ? activeInstruction.name : 'No LLM Polish'}
              </Typography>
            </Box>
            <ArrowRight size={14} style={{ color: d3roPalette.text.disabled, opacity: 0.5 }} />
          </Box>

          {/* Step 4 */}
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
            <Box
              sx={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                bgcolor: d3roPalette.glass.raised,
                border: `1px solid ${d3roPalette.glass.hairline}`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: d3roPalette.text.primary,
                flexShrink: 0,
              }}
            >
              <ClipboardCopy size={15} />
            </Box>
            <Box sx={{ minWidth: 0 }}>
              <PhosphorText variant="meta" sx={{ color: d3roPalette.text.dimLabel }}>
                STEP 04
              </PhosphorText>
              <Typography sx={{ fontFamily: d3roFontSans, fontSize: '12px', fontWeight: 600, color: d3roPalette.text.primary, whiteSpace: 'nowrap' }}>
                Active Window
              </Typography>
            </Box>
          </Box>
        </Box>
      </DoubleBezelCard>

      {/* ── 2. Commands Grid ──────────────────────────────────────── */}
      <Box sx={{ mb: 4 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.75 }}>
          <PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel }}>
            AVAILABLE AI INSTRUCTIONS ({instructions.length})
          </PhosphorText>
        </Box>

        {loading ? (
          <Box sx={{ py: 6, textAlign: 'center' }}>
            <PhosphorText variant="dim">{t('common.loading')}</PhosphorText>
          </Box>
        ) : instructions.length === 0 ? (
          <EmptyStateCard message={t('commands.noCommands')} />
        ) : (
          <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 1.75 }}>
            {instructions.map((inst) => {
              const isActive = inst.id === activeId
              return (
                <Box
                  key={inst.id}
                  onClick={() => handleActivate(inst.id)}
                  sx={{
                    cursor: 'pointer',
                    borderRadius: d3roRadius.card,
                    border: `1px solid ${isActive ? d3roPalette.accent.main : 'transparent'}`,
                    transition: 'all 0.2s ease',
                  }}
                >
                  <MetalCard sx={{ p: 2.5, height: '100%' }}>
                    <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2 }}>
                      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5, flex: 1, minWidth: 0 }}>
                        <Box sx={{ pt: 0.25 }}>
                          {isActive ? (
                            <CircleCheck size={18} style={{ color: d3roPalette.accent.light }} />
                          ) : (
                            <Led color={inst.isBuiltin ? 'amber' : 'green'} size={7} />
                          )}
                        </Box>
                        <Box sx={{ flex: 1, minWidth: 0 }}>
                          <Box
                            sx={{
                              fontSize: d3roTypo.heading.size,
                              fontWeight: 500,
                              fontFamily: d3roFontSans,
                              color: isActive ? d3roPalette.accent.light : d3roPalette.text.primary,
                              mb: 0.5,
                            }}
                          >
                            {inst.name}
                          </Box>
                          <Box
                            sx={{
                              fontSize: d3roTypo.small.size,
                              color: d3roPalette.text.secondary,
                              lineHeight: 1.5,
                            }}
                          >
                            {inst.description}
                          </Box>
                        </Box>
                      </Box>

                      <Box sx={{ display: 'flex', gap: 0.5 }} onClick={(e) => e.stopPropagation()}>
                        <Tooltip title={t('common.edit')}>
                          <IconButton
                            size="small"
                            onClick={() => openEdit(inst)}
                            sx={{
                              p: 0.6,
                              color: d3roPalette.text.inactive,
                              bgcolor: d3roPalette.glass.raised,
                              border: `1px solid ${d3roPalette.glass.hairline}`,
                              '&:hover': { color: d3roPalette.accent.light, bgcolor: d3roPalette.glass.hairlineStrong },
                            }}
                          >
                            <Pencil size={14} />
                          </IconButton>
                        </Tooltip>
                        {!inst.isBuiltin && (
                          <Tooltip title={t('common.delete')}>
                            <IconButton
                              size="small"
                              onClick={() => handleDelete(inst.id)}
                              sx={{
                                p: 0.6,
                                color: d3roPalette.text.inactive,
                                bgcolor: d3roPalette.glass.raised,
                                border: `1px solid ${d3roPalette.glass.hairline}`,
                                '&:hover': { color: d3roPalette.tag.red, bgcolor: d3roPalette.tag.redBg },
                              }}
                            >
                              <Trash2 size={14} />
                            </IconButton>
                          </Tooltip>
                        )}
                      </Box>
                    </Box>
                  </MetalCard>
                </Box>
              )
            })}
          </Box>
        )}
      </Box>

      {/* ── 3. Interactive Pipeline Test Sandbox ───────────────────── */}
      <Box sx={{ mb: 4 }}>
        <PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel, mb: 1.5, display: 'block' }}>
          PIPELINE TEST BENCH
        </PhosphorText>
        <MetalCard sx={{ p: 2.75 }}>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
              <TextField
                value={testInput}
                onChange={(e) => setTestInput(e.target.value)}
                placeholder="테스트할 음성 전사 문장을 입력하거나 마이크로 받아쓰기 해보세요..."
                size="small"
                fullWidth
                sx={{
                  '& .MuiOutlinedInput-root': {
                    fontFamily: d3roFontSans,
                    fontSize: '13px',
                    bgcolor: d3roPalette.bg.inset,
                    borderRadius: d3roRadius.inner,
                  },
                }}
              />
              <PhysicalButton
                tone="accent"
                onClick={handleRunPipelineTest}
                disabled={!testInput.trim() || testing}
                sx={{ height: 40, px: 2.5, whiteSpace: 'nowrap' }}
              >
                <Play size={14} style={{ marginRight: 4 }} />
                {testing ? 'Processing...' : 'Run Pipeline'}
              </PhysicalButton>
            </Box>

            {testResult && (
              <Box
                sx={{
                  p: 2,
                  bgcolor: d3roPalette.bg.inset,
                  borderRadius: d3roRadius.inner,
                  border: `1px solid ${d3roPalette.glass.hairline}`,
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: 1.5,
                }}
              >
                <Sparkles size={16} style={{ color: d3roPalette.accent.light, marginTop: 2, flexShrink: 0 }} />
                <Typography sx={{ fontFamily: d3roFontSans, fontSize: '13.5px', color: d3roPalette.text.primary, lineHeight: 1.6 }}>
                  {testResult}
                </Typography>
              </Box>
            )}

            {testError && (
              <Box
                sx={{
                  p: 2,
                  bgcolor: d3roPalette.status.dangerBg,
                  borderRadius: d3roRadius.inner,
                  border: `1px solid ${d3roPalette.status.danger}`,
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: 1.5,
                }}
              >
                <TriangleAlert size={16} style={{ color: d3roPalette.status.danger, marginTop: 2, flexShrink: 0 }} />
                <Typography sx={{ fontFamily: d3roFontSans, fontSize: '13.5px', color: d3roPalette.status.danger, lineHeight: 1.6 }}>
                  {testError}
                </Typography>
              </Box>
            )}
          </Box>
        </MetalCard>
      </Box>

      {/* ── 4. Voice Keyword Triggers Section ─────────────────────── */}
      <Box sx={{ mt: 4 }}>
        <VoiceKeywordsSection />
      </Box>

      {/* Add / Edit Dialog */}
      <Dialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        maxWidth="sm"
        fullWidth
        PaperProps={{
          sx: {
            bgcolor: d3roPalette.bg.card,
            borderRadius: d3roRadius.doubleBezelOuter,
            border: `1px solid ${d3roPalette.glass.hairlineStrong}`,
            boxShadow: d3roShadow.dialog,
            p: 1,
          },
        }}
      >
        <DialogTitle sx={{ fontWeight: 500, fontFamily: d3roFontSans, color: d3roPalette.text.primary, pt: 2, px: 2.5 }}>
          {editId ? t('commands.editTitle') : t('commands.addTitle')}
        </DialogTitle>
        <DialogContent sx={{ px: 2.5 }}>
          <TextField
            label={t('commands.name')}
            value={formName}
            onChange={(e) => setFormName(e.target.value)}
            fullWidth
            autoFocus
            sx={{ mt: 1.5 }}
          />
          <TextField
            label={t('commands.description')}
            value={formDesc}
            onChange={(e) => setFormDesc(e.target.value)}
            fullWidth
            sx={{ mt: 2.5 }}
          />
          <TextField
            label={t('commands.promptTemplate')}
            value={formPrompt}
            onChange={(e) => setFormPrompt(e.target.value)}
            fullWidth
            multiline
            rows={4}
            sx={{ mt: 2.5 }}
            helperText={t('commands.promptHelp')}
          />
        </DialogContent>
        <DialogActions sx={{ px: 2.5, pb: 2, pt: 1, gap: 1 }}>
          <PhysicalButton tone="glass" onClick={() => setDialogOpen(false)}>
            {t('common.cancel')}
          </PhysicalButton>
          <PhysicalButton tone="accent" onClick={handleSave} disabled={!formName.trim() || saving}>
            {saving ? t('common.saving') || '저장 중...' : t('common.save')}
          </PhysicalButton>
        </DialogActions>
      </Dialog>
    </Box>
  )
}

function VoiceKeywordsSection(): React.ReactElement {
  return (
    <Box sx={{ mt: 3 }}>
      <PhosphorText variant="label" sx={{ color: d3roPalette.text.dimLabel, mb: 1.5, display: 'block' }}>
        VOICE KEYWORD TRIGGERS & FILLER FILTER
      </PhosphorText>
      <TemplateSection />
    </Box>
  )
}