import React from 'react';
import type { PageContext } from './DevShell';

interface Props {
  getPageContext: () => PageContext | null;
  onConfirm: (prompt: string) => void;
  onCancel: () => void;
}

export default function DeleteDataConfirm({
  getPageContext,
  onConfirm,
  onCancel,
}: Props) {
  const r = getPageContext()?.resourceName || '';

  function handleConfirm() {
    onConfirm(
      '请帮我删除' +
        (r ? ' ' + r : '') +
        ' 的数据表以及对应的管理页面。\n\n请按顺序执行：\n1. 使用 prisma-schema-update skill 删除 prisma model（两步安全操作：先注释掉字段/model，下次发版再彻底移除）并执行数据库迁移\n2. 使用 menu-management skill 从 t_page 表中移除对应的菜单记录\n3. 使用 permission-management skill 撤销所有角色对该页面的访问权限',
    );
  }

  return (
    <div
      id="delete-data-confirm-overlay"
      onClick={(e) => {
        if (e.target === e.currentTarget) onCancel();
      }}
    >
      <div id="delete-data-confirm-card">
        <h3>⚠️ 确认删除数据表？</h3>
        <p
          dangerouslySetInnerHTML={{
            __html:
              '将删除' +
              (r ? ' <strong>' + r + '</strong> ' : '') +
              '数据表及其所有数据迁移记录。',
          }}
        />
        <p className="delete-data-warning">
          此操作将同步删除对应的管理页面，无法恢复。
        </p>
        <div className="delete-confirm-actions">
          <button className="undo-btn-cancel" onClick={onCancel}>
            取消
          </button>
          <button className="delete-data-btn-confirm" onClick={handleConfirm}>
            确认删除
          </button>
        </div>
      </div>
    </div>
  );
}
