/* Day Trip Planner — screens A: Welcome · Input · Loading */
const { Icon, INTEREST_ICON, StatusBar, RoadIllustration, Compass,
        Placeholder, Tag, Button, IconButton } = window;

// ─────────────────────────────────────────────────────────────
// 1 · Welcome / first-open splash
// ─────────────────────────────────────────────────────────────
function WelcomeScreen({ onStart }) {
  return (
    <div className="screen scr-enter" style={{ background:
      'radial-gradient(120% 70% at 50% 0%, var(--sky-soft) 0%, var(--sand) 46%, var(--sand) 100%)' }}>
      <StatusBar theme="dark" />
      <div className="screen-body" style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 22px 0', display: 'flex', alignItems: 'center', gap: 9 }}>
          <div style={{ width: 30, height: 30, borderRadius: 9, background: 'var(--accent)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
            boxShadow: '0 3px 8px color-mix(in oklab, var(--accent) 40%, transparent)' }}>
            <Icon name="pin" size={17} fill />
          </div>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em' }}>
            Day&nbsp;Trip</span>
        </div>

        <div style={{ flex: '0 0 auto', marginTop: 2 }}>
          <RoadIllustration style={{ width: '100%', height: 248, display: 'block' }} />
        </div>

        <div className="screen-pad" style={{ marginTop: 'auto', paddingBottom: 6 }}>
          <span className="tag tag-sage" style={{ marginBottom: 14 }}>
            <Icon name="sparkle" size={13} fill /> One tap, one plan
          </span>
          <h1 style={{ fontSize: 37, lineHeight: 1.05, marginTop: 13 }}>
            You've got a free day.<br/><span style={{ color: 'var(--accent)' }}>We'll plan it!</span>
          </h1>
          <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.5, marginTop: 12, maxWidth: 300 }}>
            Tell us where you're starting and how long you've got — we'll hand back
            a ready-to-go day.
          </p>
        </div>
      </div>
      <div className="screen-pad" style={{ flex: '0 0 auto', padding: '14px 22px 34px' }}>
        <Button icon="arrowR" iconR onClick={onStart}>Plan my day</Button>
        <p className="faint" style={{ textAlign: 'center', fontSize: 12.5, marginTop: 12 }}>
          No account needed. Takes about a minute.
        </p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · Input
// ─────────────────────────────────────────────────────────────
function InputScreen({ form, setForm, onGenerate }) {
  const f = form;
  const upd = (patch) => setForm({ ...f, ...patch });
  const toggleInterest = (k) =>
    upd({ interests: f.interests.includes(k) ? f.interests.filter((x) => x !== k) : [...f.interests, k] });
  const ready = f.location.trim().length > 0 && f.interests.length > 0;

  return (
    <div className="screen scr-enter" style={{ background: 'var(--sand)' }}>
      <StatusBar theme="dark" />
      <div className="scr-head" style={{ paddingTop: 6 }}>
        <div style={{ flex: 1 }}>
          <div className="scr-title" style={{ fontSize: 24 }}>Plan your day</div>
          <div className="scr-sub">A few quick things and we'll do the rest.</div>
        </div>
      </div>

      <div className="screen-body screen-pad" style={{ paddingBottom: 8 }}>
        {/* location */}
        <div className="field-label">Starting from</div>
        <div className="field">
          <Icon name="pin" size={20} style={{ color: 'var(--accent)', flex: '0 0 auto' }} />
          <input value={f.location} placeholder="Tell us where you're starting from"
            onChange={(e) => upd({ location: e.target.value })} />
          <button className="row gap8" onClick={() => upd({ location: 'Roseville, CA', detected: true })}
            style={{ border: 'none', background: 'var(--sky-soft)', color: 'var(--sky)', cursor: 'pointer',
              borderRadius: 99, padding: '7px 11px', fontWeight: 700, fontSize: 12, fontFamily: 'var(--font-body)',
              flex: '0 0 auto', whiteSpace: 'nowrap' }}>
            <Icon name="crosshair" size={14} /> {f.detected ? 'Located' : 'Detect'}
          </button>
        </div>

        {/* time slider */}
        <div className="row between" style={{ margin: '24px 4px 10px' }}>
          <span className="field-label" style={{ margin: 0 }}>Time available</span>
          <span className="slider-val" style={{ fontSize: 18 }}>
            {f.hours} <span className="muted" style={{ fontSize: 13, fontWeight: 600 }}>
              hour{f.hours > 1 ? 's' : ''}</span>
          </span>
        </div>
        <div className="card card-inset slider-wrap" style={{ padding: '18px 18px 14px' }}>
          <input type="range" className="range" min="1" max="10" step="1" value={f.hours}
            onChange={(e) => upd({ hours: Number(e.target.value) })} />
          <div className="row between" style={{ marginTop: 9 }}>
            <span className="faint" style={{ fontSize: 11.5, fontWeight: 600 }}>1 hr</span>
            <span className="faint" style={{ fontSize: 11.5, fontWeight: 600 }}>a half day</span>
            <span className="faint" style={{ fontSize: 11.5, fontWeight: 600 }}>10 hrs</span>
          </div>
        </div>

        {/* interests */}
        <div className="row between" style={{ margin: '24px 4px 12px' }}>
          <span className="field-label" style={{ margin: 0 }}>What are you into?</span>
          <span className="faint" style={{ fontSize: 12, fontWeight: 600 }}>{f.interests.length} picked</span>
        </div>
        <div className="chip-grid">
          {window.INTERESTS.map((k) => (
            <div key={k} className="chip" data-on={f.interests.includes(k) ? '1' : '0'}
              onClick={() => toggleInterest(k)}>
              <span className="chip-ico"><Icon name={INTEREST_ICON[k]} size={18} /></span>
              <span style={{ lineHeight: 1.1 }}>{k}</span>
            </div>
          ))}
        </div>

        {/* more filters */}
        <MoreFilters form={f} upd={upd} />
        <div style={{ height: 8 }} />
      </div>

      <div className="screen-pad" style={{ flex: '0 0 auto', padding: '12px 22px 30px',
        background: 'linear-gradient(180deg, rgba(244,236,221,0), var(--sand) 38%)' }}>
        <Button onClick={onGenerate} disabled={!ready} icon="sparkle">
          {ready ? `Plan my ${f.hours} hours` : 'Pick a start & an interest'}
        </Button>
      </div>
    </div>
  );
}

function MoreFilters({ form, upd }) {
  const [open, setOpen] = React.useState(form.filtersOpen || false);
  const Seg = ({ value, options, onChange }) => (
    <div className="seg" style={{ width: '100%' }}>
      <div className="seg-thumb" style={{
        left: `calc(3px + ${options.indexOf(value)} * (100% - 6px) / ${options.length})`,
        width: `calc((100% - 6px) / ${options.length})`, background: 'var(--accent)' }} />
      {options.map((o) => (
        <button key={o} data-on={o === value ? '1' : '0'} style={{ flex: 1 }}
          onClick={() => onChange(o)}>{o}</button>
      ))}
    </div>
  );
  return (
    <div className="expander" style={{ marginTop: 16 }}>
      <div className="expander-head" onClick={() => setOpen(!open)}>
        <span className="row gap12">
          <Icon name="sun" size={18} style={{ color: 'var(--ink-2)' }} />
          More filters
          <span className="faint" style={{ fontWeight: 600, fontSize: 12.5 }}>
            {form.budget} · {form.vehicle} · {form.party}</span>
        </span>
        <span style={{ color: 'var(--ink-3)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
          <Icon name="chevD" size={18} /></span>
      </div>
      {open && (
        <div className="expander-body scr-enter">
          <div className="field-label" style={{ marginLeft: 0 }}>Budget</div>
          <Seg value={form.budget} options={['$', '$$', '$$$']} onChange={(v) => upd({ budget: v })} />
          <div className="field-label" style={{ marginLeft: 0, marginTop: 16 }}>Getting around</div>
          <Seg value={form.vehicle} options={['Car', 'Walk', 'Transit']} onChange={(v) => upd({ vehicle: v })} />
          <div className="field-label" style={{ marginLeft: 0, marginTop: 16 }}>Who's going</div>
          <Seg value={form.party} options={['Solo', 'Couple', 'Family']} onChange={(v) => upd({ party: v })} />
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · Loading
// ─────────────────────────────────────────────────────────────
const LOADING_MSGS = ['Picking your stops', 'Checking who\'s open', 'Plotting the route', 'Adding up the day'];

function LoadingScreen({ form }) {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setStep((s) => (s + 1) % LOADING_MSGS.length), 950);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="screen scr-enter" style={{ background:
      'radial-gradient(115% 60% at 50% 32%, var(--sand-soft) 0%, var(--sand) 70%)' }}>
      <StatusBar theme="dark" />
      <div className="screen-body" style={{ display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 30px' }}>
        <div style={{ position: 'relative', marginBottom: 38 }}>
          <div style={{ position: 'absolute', inset: -22, borderRadius: '50%',
            background: 'var(--accent-soft)', opacity: 0.5, animation: 'dtp-pulse 1.9s ease-in-out infinite' }} />
          <Compass size={138} spin style={{ position: 'relative', filter: 'drop-shadow(0 12px 24px rgba(43,38,32,0.14))' }} />
        </div>
        <h2 style={{ fontSize: 27 }}>Generating your day...</h2>
        <p className="muted" style={{ fontSize: 15.5, marginTop: 10 }}>
          {(form?.location || 'Roseville, CA')} · {form?.hours || 6} hours
        </p>
        <div key={step} className="scr-enter row gap8" style={{ marginTop: 26,
          color: 'var(--accent)', fontWeight: 700, fontSize: 16 }}>
          <Icon name="check" size={17} /> {LOADING_MSGS[step]}...
        </div>
        <div className="row gap8" style={{ marginTop: 22 }}>
          {LOADING_MSGS.map((_, i) => (
            <span key={i} style={{ width: i === step ? 22 : 7, height: 7, borderRadius: 99,
              background: i === step ? 'var(--accent)' : 'var(--line)', transition: 'all .3s' }} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WelcomeScreen, InputScreen, LoadingScreen });