// Onboarding — shown when no active trip exists. Single screen with three
// optional sub-states (setup form, create-first-trip, plain "create trip").

const Onboarding = ({ mode, initial, onDone }) => {
  if (mode === 'setup') return <SetupForm initial={initial} onDone={onDone} />;
  return <NewTripForm onDone={onDone} />;
};

const SetupForm = ({ initial, onDone }) => {
  const [s, setS] = React.useState(initial || { github_owner: '', github_repo: '', content_prefix: 'content/travel', branch_prefix: 'travel/', timezone: '' });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const save = async () => {
    if (!s.github_owner.trim()) { setErr('github username required'); return; }
    setBusy(true); setErr('');
    try {
      const out = await api.putSetup(s);
      onDone(out);
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  return (
    <div className="onboard-wrap">
      <div className="onboard">
        <div className="step">01 · connect github</div>
        <h2>Where do posts land?</h2>
        <p className="sub">Only asked once. Stored per install.</p>

        <label className="field">github username
          <input value={s.github_owner} onChange={(e) => setS({ ...s, github_owner: e.target.value })} placeholder="octocat" autoFocus />
        </label>
        <label className="field">repo <span style={{ color: 'var(--ink-3)', letterSpacing: 0, textTransform: 'none' }}>(blank = &lt;user&gt;.github.io)</span>
          <input value={s.github_repo} onChange={(e) => setS({ ...s, github_repo: e.target.value })} placeholder={s.github_owner ? s.github_owner + '.github.io' : ''} />
        </label>
        <label className="field">branch prefix
          <input value={s.branch_prefix} onChange={(e) => setS({ ...s, branch_prefix: e.target.value })} placeholder="travel/" />
        </label>
        <label className="field">content prefix
          <input value={s.content_prefix} onChange={(e) => setS({ ...s, content_prefix: e.target.value })} placeholder="content/travel" />
        </label>

        {err && <div style={{ color: 'var(--accent-2)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 10 }}>{err}</div>}

        <div className="actions">
          <button className="primary" onClick={save} disabled={busy}>{busy ? 'saving…' : 'save'}</button>
        </div>
      </div>
    </div>
  );
};

const NewTripForm = ({ onDone }) => {
  const [slug, setSlug] = React.useState('');
  const [title, setTitle] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [discovered, setDiscovered] = React.useState(null); // null = loading, [] = none

  React.useEffect(() => {
    let cancelled = false;
    api.discoverTrips()
      .then((list) => { if (!cancelled) setDiscovered((list || []).filter((t) => !t.known)); })
      .catch(() => { if (!cancelled) setDiscovered([]); });
    return () => { cancelled = true; };
  }, []);

  const create = async () => {
    const s = slug.trim().toLowerCase();
    if (!s) { setErr('slug required'); return; }
    setBusy(true); setErr('');
    try {
      const trip = await api.createTrip({ slug: s, title: title.trim() });
      onDone(trip);
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  const adopt = async (candSlug) => {
    setBusy(true); setErr('');
    try {
      const trip = await api.adoptTrip(candSlug);
      onDone(trip);
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  const hasExisting = Array.isArray(discovered) && discovered.length > 0;

  return (
    <div className="onboard-wrap">
      <div className="onboard">
        <div className="step">02 · open a trip</div>
        <h2>{hasExisting ? 'Pick an existing trip, or start a new one.' : 'Name your trip.'}</h2>
        <p className="sub">
          {hasExisting
            ? 'Branches already on your GitHub repo are listed below. Or type a new slug to start fresh.'
            : 'Creates the branch and a section page on GitHub now. Day posts still wait for you to hit publish.'}
        </p>

        {hasExisting && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, margin: '14px 0 22px' }}>
            {discovered.map((c) => (
              <button key={c.slug} onClick={() => adopt(c.slug)} disabled={busy}
                style={{
                  padding: '12px 16px', textAlign: 'left',
                  background: 'var(--fill)', borderRadius: 10, cursor: 'pointer',
                  fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}>
                <span>{c.slug}</span>
                <span style={{ color: 'var(--ink-3)', fontSize: 11 }}>{c.branch} →</span>
              </button>
            ))}
          </div>
        )}

        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: hasExisting ? 0 : undefined }}>
          {hasExisting ? 'or — new trip' : ''}
        </div>

        <label className="field">slug
          <input value={slug} onChange={(e) => setSlug(e.target.value)} placeholder="japan-2026" autoFocus={!hasExisting} />
        </label>
        <label className="field">title
          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={slug || '(optional)'} />
        </label>

        {err && <div style={{ color: 'var(--accent-2)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 10 }}>{err}</div>}

        <div className="actions">
          <button className="primary" onClick={create} disabled={busy || !slug.trim()}>
            {busy ? 'working…' : 'open editor →'}
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Onboarding });