'use client';

import AdminModal from '@/app/components/admin/admin-modal.jsx';

/**
 * Phase 1 UI shell for "Import from GitHub". Opens an informational modal
 * with a disabled URL input + CTA. The form action wires to a server action
 * that audits the attempt so we can quantify demand before Phase 2 lands.
 *
 * Also reused for the bundle "Coming Phase 2" pointer modal.
 *
 * @param {{
 *   open: boolean,
 *   onClose: () => void,
 *   action: any,
 *   mode?: 'github' | 'bundle',
 *   bundleSlug?: string,
 * }} props
 */
export default function ImportFromGithubModal({ open, onClose, action, mode = 'github', bundleSlug }) {
  const isBundle = mode === 'bundle';
  const eyebrow = isBundle ? 'Bundle install · Phase 2' : 'Import from GitHub · Phase 2';
  const heading = isBundle
    ? `Installing ${bundleSlug || 'this bundle'} lands in Phase 2`
    : 'Importer lands in Phase 2';
  const body = isBundle
    ? 'Bundle installs walk through every contained tool and skill, surface a per-item risk roll-up, and let you confirm selectively. Phase 1 catalogs bundles so the UI shape is ready — install execution arrives in the next phase.'
    : 'Paste any public GitHub repo URL. Phase 2 will clone the repo read-only into workspace/imports/, parse skills/ and tools/ directories, classify each item by risk, and surface them for selective install with a code-review gate on JS adapters.';

  return (
    <AdminModal open={open} onClose={onClose} eyebrow={eyebrow} title={heading}>
      <form className="agents-modal-form" action={action}>
        <p className="agents-modal-help">{body}</p>

        {!isBundle ? (
          <section className="agents-modal-section">
            <label className="agents-modal-field wide">
              <span>Repository URL</span>
              <input
                name="url"
                type="url"
                placeholder="https://github.com/owner/repo"
                disabled
                readOnly
                aria-label="GitHub repository URL"
              />
            </label>
          </section>
        ) : (
          <input
            type="hidden"
            name="url"
            value={bundleSlug ? `bundle:${bundleSlug}` : 'bundle:unknown'}
          />
        )}

        <p className="agents-modal-help" style={{ fontSize: 11, color: '#9aa0aa' }}>
          {isBundle
            ? 'Agent personas are managed in the Agent Marketplace (coming soon).'
            : 'No code is fetched in Phase 1. Click queues an audit row so the team can prioritise.'}
        </p>

        <footer className="agents-modal-foot">
          <button type="button" className="admin-button secondary" onClick={onClose}>
            Close
          </button>
          <button className="admin-button" type="submit" disabled>
            {isBundle ? 'Coming Phase 2' : 'Coming next'}
          </button>
        </footer>
      </form>
    </AdminModal>
  );
}
