WebVNWrite/src/components/editor/RevertConfirmDialog.tsx

'use client'

type RevertConfirmDialogProps = {
  actionType: string
  entityDescription: string
  previousState: Record<string, unknown> | null
  newState: Record<string, unknown> | null
  onConfirm: () => void
  onCancel: () => void
}

const ACTION_LABELS: Record<string, string> = {
  node_add: 'node addition',
  node_update: 'node update',
  node_delete: 'node deletion',
  edge_add: 'edge addition',
  edge_update: 'edge update',
  edge_delete: 'edge deletion',
}

function formatStatePreview(state: Record<string, unknown> | null): string {
  if (!state) return '(none)'

  const type = state.type as string | undefined
  const data = state.data as Record<string, unknown> | undefined

  if (type === 'dialogue' && data) {
    const speaker = (data.speaker as string) || '(no speaker)'
    const text = (data.text as string) || '(no text)'
    return `Dialogue: ${speaker}\n"${text.slice(0, 80)}${text.length > 80 ? '…' : ''}"`
  }
  if (type === 'choice' && data) {
    const prompt = (data.prompt as string) || '(no prompt)'
    const options = (data.options as { label: string }[]) || []
    const optionLabels = options.map((o) => o.label || '(empty)').join(', ')
    return `Choice: ${prompt.slice(0, 60)}${prompt.length > 60 ? '…' : ''}\nOptions: ${optionLabels}`
  }
  if (type === 'variable' && data) {
    const name = (data.variableName as string) || '(unnamed)'
    const op = (data.operation as string) || 'set'
    const val = data.value ?? 0
    return `Variable: ${name} ${op} ${val}`
  }

  // Edge state
  if (state.source && state.target) {
    const condition = (state.data as Record<string, unknown> | undefined)?.condition as Record<string, unknown> | undefined
    if (condition) {
      return `Edge: ${state.source} → ${state.target}\nCondition: ${condition.variableName} ${condition.operator} ${condition.value}`
    }
    return `Edge: ${state.source} → ${state.target}`
  }

  return JSON.stringify(state, null, 2).slice(0, 200)
}

function getRevertDescription(actionType: string): string {
  switch (actionType) {
    case 'node_add':
      return 'This will delete the node that was added.'
    case 'node_update':
      return 'This will restore the node to its previous state.'
    case 'node_delete':
      return 'This will re-create the deleted node.'
    case 'edge_add':
      return 'This will delete the edge that was added.'
    case 'edge_update':
      return 'This will restore the edge to its previous state.'
    case 'edge_delete':
      return 'This will re-create the deleted edge.'
    default:
      return 'This will undo the change.'
  }
}

export default function RevertConfirmDialog({
  actionType,
  entityDescription,
  previousState,
  newState,
  onConfirm,
  onCancel,
}: RevertConfirmDialogProps) {
  const label = ACTION_LABELS[actionType] || actionType
  const description = getRevertDescription(actionType)

  // For revert, the "before" is the current state (newState) and "after" is what we're restoring to (previousState)
  const isAddition = actionType.endsWith('_add')
  const isDeletion = actionType.endsWith('_delete')

  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/50" onClick={onCancel}>
      <div
        className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
          <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
            Revert {label}
          </h3>
          <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
            {entityDescription}
          </p>
        </div>

        <div className="px-5 py-4">
          <p className="mb-3 text-sm text-zinc-700 dark:text-zinc-300">
            {description}
          </p>

          <div className="grid grid-cols-2 gap-3">
            {!isAddition && (
              <div>
                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
                  Current State
                </div>
                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
                  {formatStatePreview(newState)}
                </pre>
              </div>
            )}
            {!isDeletion && (
              <div>
                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
                  {isAddition ? 'Will be removed' : 'Restored State'}
                </div>
                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
                  {isAddition ? formatStatePreview(newState) : formatStatePreview(previousState)}
                </pre>
              </div>
            )}
            {isDeletion && (
              <div className="col-span-2">
                <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
                  Will be restored
                </div>
                <pre className="max-h-32 overflow-auto rounded bg-zinc-100 p-2 text-[11px] text-zinc-700 dark:bg-zinc-900 dark:text-zinc-300">
                  {formatStatePreview(previousState)}
                </pre>
              </div>
            )}
          </div>
        </div>

        <div className="flex justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-700">
          <button
            onClick={onCancel}
            className="rounded px-3 py-1.5 text-xs font-medium text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-700"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            className="rounded bg-amber-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-700"
          >
            Revert
          </button>
        </div>
      </div>
    </div>
  )
}