'use client';

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

export default function NewScheduleModal({ agents, upsertAction }) {
  const [open, setOpen] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const close = React.useCallback(() => {
    if (submitting) return;
    setOpen(false);
  }, [submitting]);

  const firstAgent = agents[0];

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

      <AdminModal open={open} onClose={close} eyebrow="New schedule" title="Upsert schedule">
        <form
          className="agents-modal-form"
          action={async (formData) => {
            setSubmitting(true);
            await upsertAction(formData);
          }}
        >
          <section className="agents-modal-section">
            <div className="agents-modal-grid">
              <label className="agents-modal-field">
                <span>Agent</span>
                <select name="agent_id" defaultValue={firstAgent?.id || ''}>
                  {agents.map((agent) => (
                    <option key={agent.id} value={agent.id}>{agent.name}</option>
                  ))}
                  <option value="custom-agent">Custom agent id</option>
                </select>
              </label>
              <label className="agents-modal-field">
                <span>Name</span>
                <input name="name" defaultValue={firstAgent?.name || 'Custom Agent'} />
              </label>
              <label className="agents-modal-field">
                <span>Schedule</span>
                <input name="schedule" defaultValue="daily 07:30" />
              </label>
              <label className="agents-modal-field">
                <span>Action kind</span>
                <select name="action_kind" defaultValue="agent-tick">
                  <option value="agent-tick">agent-tick</option>
                  <option value="heartbeat">heartbeat</option>
                  <option value="competitor-report">competitor-report</option>
                  <option value="marketing-plan">marketing-plan</option>
                </select>
              </label>
            </div>
          </section>

          <details className="agents-modal-advanced">
            <summary>Advanced</summary>
            <div className="agents-modal-grid">
              <label className="agents-modal-field">
                <span>Delivery</span>
                <input name="delivery" defaultValue="dashboard + owner approval" />
              </label>
              <label className="agents-modal-field">
                <span>Approval</span>
                <input name="approval" defaultValue="human-in-loop" />
              </label>
              <label className="agents-modal-field wide agents-modal-check">
                <input name="enabled" type="checkbox" defaultChecked />
                <span>Enabled</span>
              </label>
            </div>
          </details>

          <footer className="agents-modal-foot">
            <button
              type="button"
              className="admin-button secondary"
              onClick={close}
              disabled={submitting}
            >
              Cancel
            </button>
            <button
              type="submit"
              className="admin-button"
              disabled={submitting}
              aria-busy={submitting || undefined}
            >
              {submitting ? 'Saving…' : 'Upsert schedule'}
            </button>
          </footer>
        </form>
      </AdminModal>
    </>
  );
}
