'use client';

import * as React from 'react';
import AdminModal from '@/app/components/admin/admin-modal.jsx';

export default function UploadFilesModal({ projectId }) {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button type="button" className="admin-button agents-new-cta" onClick={() => setOpen(true)}>
        <span aria-hidden className="agents-new-cta-glyph">+</span>
        Upload files
      </button>

      <AdminModal open={open} onClose={() => setOpen(false)} eyebrow="Upload" title="Add files to Disk">
        <form
          className="agents-modal-form"
          action="/api/disk/files"
          method="post"
          encType="multipart/form-data"
        >
          <input type="hidden" name="project_id" value={projectId} />

          <section className="agents-modal-section">
            <label className="agents-modal-field wide">
              <span>Files</span>
              <input type="file" name="files" multiple required aria-label="Choose files" />
            </label>
            <label className="agents-modal-field wide agents-modal-check">
              <input type="checkbox" name="local_only" value="true" />
              <span>Keep local only · redacted from cloud engines</span>
            </label>
          </section>

          <p className="agents-modal-help">
            Local-only files are redacted from cloud engines and stay on this machine.
          </p>

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