d3ro-voice/src/renderer/pages/CommandsPage.tsx

// src/renderer/pages/CommandsPage.tsx
// 인스트루먼트 미학: MetalCard + PhosphorText + Led

import { useState, useEffect, useCallback } from 'react'
import { Box, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@mui/material'
import AddIcon from '@mui/icons-material/Add'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import { MetalCard, PhosphorText, Led } from '../components/ds'
import type { IPCResult } from '@shared/errors'

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

export function CommandsPage(): React.ReactElement {
  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 loadData = useCallback(async () => {
    setLoading(true)
    try {
      const ipcResult = await (window.electronAPI as Record<string, unknown> & {
        invoke: (channel: string, ...args: unknown[]) => Promise<IPCResult<CustomInstruction[]>>
      }).invoke?.('instruction:getAll') as unknown as IPCResult<CustomInstruction[]> | undefined
      if (ipcResult && ipcResult.success) setInstructions(ipcResult.data)
    } catch { /* noop */ }
    setLoading(false)
  }, [])

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

  const openAdd = () => { setEditId(null); setFormName(''); setFormDesc(''); setFormPrompt(''); setDialogOpen(true) }
  const openEdit = (inst: CustomInstruction) => { setEditId(inst.id); setFormName(inst.name); setFormDesc(inst.description); setFormPrompt(inst.prompt); setDialogOpen(true) }
  const handleSave = async () => { setDialogOpen(false); loadData() }

  return (
    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
          LLM INSTRUCTIONS — {instructions.length} COMMANDS
        </PhosphorText>
        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">ADD</Button>
      </Box>

      {loading ? (
        <PhosphorText variant="dim">LOADING...</PhosphorText>
      ) : instructions.length === 0 ? (
        <MetalCard>
          <Box sx={{ py: 6, textAlign: 'center' }}>
            <PhosphorText variant="dim">BUILT-IN: TRANSLATE, SUMMARIZE, FORMAL, CODE, FREE</PhosphorText>
          </Box>
        </MetalCard>
      ) : (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {instructions.map((inst) => (
            <MetalCard key={inst.id}>
              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
                  <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
                  <Box>
                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{inst.name}</Box>
                    <Box sx={{ fontSize: '11px', color: '#77797c', mt: 0.25 }}>{inst.description}</Box>
                  </Box>
                </Box>
                <Box sx={{ display: 'flex', gap: 0.5 }}>
                  <IconButton size="small" onClick={() => openEdit(inst)} sx={{ color: '#77797c', '&:hover': { color: '#f25b29' } }}>
                    <EditIcon sx={{ fontSize: 16 }} />
                  </IconButton>
                  {!inst.isBuiltin && (
                    <IconButton size="small" sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
                      <DeleteIcon sx={{ fontSize: 16 }} />
                    </IconButton>
                  )}
                </Box>
              </Box>
            </MetalCard>
          ))}
        </Box>
      )}

      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle sx={{ fontWeight: 700 }}>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
        <DialogContent>
          <TextField label="Name" value={formName} onChange={(e) => setFormName(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
          <TextField label="Description" value={formDesc} onChange={(e) => setFormDesc(e.target.value)} fullWidth sx={{ mt: 2 }} />
          <TextField label="Prompt Template" value={formPrompt} onChange={(e) => setFormPrompt(e.target.value)} fullWidth multiline rows={4} sx={{ mt: 2 }} helperText="Use {{text}} for transcribed text" />
        </DialogContent>
        <DialogActions sx={{ px: 3, pb: 2 }}>
          <Button onClick={() => setDialogOpen(false)} color="secondary" variant="contained">Cancel</Button>
          <Button onClick={handleSave} variant="contained" disabled={!formName.trim()}>Save</Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
}