'use client';

import * as React from 'react';
import { useFormStatus } from 'react-dom';
import AdminModal from '@/app/components/admin/admin-modal.jsx';
import { deleteProjectAction } from './actions.js';

function ConfirmButton({ disabled }) {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      className="admin-button danger"
      disabled={pending || disabled}
      aria-busy={pending ? 'true' : undefined}
    >
      {pending ? 'Deleting…' : 'Delete project'}
    </button>
  );
}

export default function DeleteProjectButton({ projectId, projectName, projectSlug, isProtected }) {
  const [open, setOpen] = React.useState(false);
  const [confirmText, setConfirmText] = React.useState('');

  if (isProtected) {
    return (
      <span className="admin-button secondary project-delete is-locked" aria-disabled="true" title="The Personal project is the default scope and cannot be deleted.">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ marginRight: 6, verticalAlign: '-1px' }}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        Protected
      </span>
    );
  }

  React.useEffect(() => {
    if (!open) setConfirmText('');
  }, [open]);

  const canConfirm = confirmText.trim() === projectSlug;

  return (
    <>
      <button
        type="button"
        className="admin-button secondary project-delete"
        onClick={() => setOpen(true)}
        aria-label={`Delete ${projectName}`}
      >
        Delete
      </button>

      <AdminModal
        open={open}
        onClose={() => setOpen(false)}
        eyebrow="Delete project"
        title={`Delete ${projectName}?`}
        tone="danger"
      >
        <form className="agents-modal-form" action={deleteProjectAction}>
          <input type="hidden" name="project_id" value={projectId} />

          <p className="agents-modal-help">
            This removes the project, its agents, Disk files, memory, secrets, and audit history.
            The folder on your local drive is left untouched.
          </p>

          <section className="agents-modal-section">
            <label className="agents-modal-field wide">
              <span>Type <code className="agents-modal-inline-code">{projectSlug}</code> to confirm</span>
              <input
                type="text"
                autoComplete="off"
                spellCheck={false}
                value={confirmText}
                onChange={(e) => setConfirmText(e.target.value)}
                placeholder={projectSlug}
                autoFocus
              />
            </label>
          </section>

          <footer className="agents-modal-foot">
            <button
              type="button"
              className="admin-button secondary"
              onClick={() => setOpen(false)}
            >
              Cancel
            </button>
            <ConfirmButton disabled={!canConfirm} />
          </footer>
        </form>
      </AdminModal>
    </>
  );
}
