'use client'

// apps/admin/src/components/memo-dialog.tsx
// 메모 입력 다이얼로그 — 감사로그 기록 시 필수

import { useState } from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
} from '@mui/material'
import { PhosphorText } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roFontMono } from '@d3ro/ui/theme'

interface MemoDialogProps {
  open: boolean
  title: string
  description?: string
  onConfirm: (memo: string) => void
  onCancel: () => void
  loading?: boolean
}

export function MemoDialog({ open, title, description, onConfirm, onCancel, loading }: MemoDialogProps): React.ReactElement {
  const [memo, setMemo] = useState('')

  const handleConfirm = (): void => {
    if (memo.trim()) {
      onConfirm(memo.trim())
      setMemo('')
    }
  }

  const handleCancel = (): void => {
    setMemo('')
    onCancel()
  }

  return (
    <Dialog
      open={open}
      onClose={handleCancel}
      maxWidth="sm"
      fullWidth
      PaperProps={{ sx: { bgcolor: d3roPalette.bg.card, color: d3roPalette.text.primary } }}
    >
      <DialogTitle sx={{ fontFamily: d3roFontMono }}>
        <PhosphorText variant="heading">{title}</PhosphorText>
      </DialogTitle>
      <DialogContent>
        {description && (
          <PhosphorText variant="dim" sx={{ display: 'block', mb: 2 }}>
            {description}
          </PhosphorText>
        )}
        <TextField
          autoFocus
          fullWidth
          multiline
          rows={3}
          placeholder="Reason for this action (required)..."
          value={memo}
          onChange={(e) => setMemo(e.target.value)}
          sx={{
            mt: 1,
            '& .MuiInputBase-root': {
              fontFamily: d3roFontMono,
              fontSize: 13,
              color: d3roPalette.text.primary,
              bgcolor: d3roPalette.bg.inset,
            },
          }}
        />
      </DialogContent>
      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button onClick={handleCancel} sx={{ fontFamily: d3roFontMono, color: d3roPalette.text.secondary }}>
          Cancel
        </Button>
        <Button
          onClick={handleConfirm}
          disabled={!memo.trim() || loading}
          variant="contained"
          sx={{ fontFamily: d3roFontMono }}
        >
          {loading ? 'Processing...' : 'Confirm'}
        </Button>
      </DialogActions>
    </Dialog>
  )
}