/* =========================================================
   Wizard steps
   ========================================================= */
const { Icon, Field, MiniToggle, Segmented, CondChips, Mascot } = window;

const MODE_OPTS = [
  { key:'transit',   label:'대중교통', icon:'bus'  },
  { key:'driving',   label:'자동차',   icon:'car'  },
  { key:'walking',   label:'도보',     icon:'walk' },
  { key:'bicycling', label:'자전거',   icon:'bike' }
];

/* ---------- PERSON STEP ---------- */
function PersonStep({ person, onChange, onClearAll }){
  const set = (k, v) => onChange({ [k]: v });
  return (
    <div className="fadein">
      <div className="step-head">
        <div className="eyebrow">{person.key === 'j' ? '우리 준영이' : '우리 소정이'}</div>
        <h2>{person.name}이는<br/>어디서 만나러 와? 💚</h2>
        <p>출발지부터 집까지, 우리 동선 미리 맞춰보자.</p>
      </div>

      <div className="card">
        <div className="person-tag">
          <span className={'av ' + person.key} style={{ background:'transparent', padding:0 }}><Mascot variant={person.key} size={36} /></span>
          <div style={{ flex:1 }}>
            <div className="nm">{person.name}이</div>
            <div className="role">오늘의 데이트 메이트 💕</div>
          </div>
          <button className="clearall" onClick={onClearAll}>
            <Icon name="trash" />전체 삭제
          </button>
        </div>

        <Field label="출발지" icon="pin" value={person.start}
          placeholder="예) 판교 안랩"
          onChange={v => set('start', v)} onClear={() => set('start', '')} />

        <Field label="만날 곳 (경유지)" icon="flag" value={person.waypointNone ? '' : person.waypoint}
          placeholder="예) 영통역 1번 출구"
          disabled={person.waypointNone}
          onChange={v => set('waypoint', v)} onClear={() => set('waypoint', '')} />
        <div className="field-row">
          <span className="hint"><Icon name="info" />바로 만나러 가면 체크해줘 ✨</span>
          <MiniToggle on={person.waypointNone} label="경유지 없음"
            onToggle={() => set('waypointNone', !person.waypointNone)} />
        </div>

        <Field label="도착지 (함께 갈 곳)" icon="utensils" value={person.dest}
          placeholder="예) 영통역 먹자골목"
          onChange={v => set('dest', v)} onClear={() => set('dest', '')} />

        <Field label="귀가지" icon="home" value={person.home}
          placeholder="예) 기흥역"
          onChange={v => set('home', v)} onClear={() => set('home', '')} />

        <div className="field">
          <label><span className="dot"></span>이동 수단</label>
          <Segmented options={MODE_OPTS} value={person.mode} onChange={v => set('mode', v)} />
        </div>
      </div>
    </div>
  );
}

/* ---------- CONDITIONS STEP ---------- */
function ChipEditor({ presets, selectedKeys, customs, onTogglePreset, onAddCustom, onRemoveCustom, placeholder }){
  const [txt, setTxt] = React.useState('');
  const add = () => { const v = txt.trim(); if (!v) return; onAddCustom(v); setTxt(''); };
  return (
    <React.Fragment>
      <div className="chips">
        {presets.map(p => {
          const on = selectedKeys.includes(p.key);
          return (
            <button key={p.key} className={'chip' + (on ? ' on' : '')} onClick={() => onTogglePreset(p.key)}>
              <span className="tick"><Icon name="check" /></span>{p.label}
            </button>
          );
        })}
        {(customs || []).map(c => (
          <span key={c} className="chip on custom">
            <span className="tick"><Icon name="check" /></span>{c}
            <button className="chip-x" title="삭제" onClick={() => onRemoveCustom(c)}><Icon name="x" /></button>
          </span>
        ))}
      </div>
      <div className="cond-add">
        <input value={txt} placeholder={placeholder}
          onChange={e => setTxt(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); add(); } }} />
        <button className="cond-add-btn" onClick={add}><Icon name="plus" />추가</button>
      </div>
    </React.Fragment>
  );
}

function ConditionsStep({ conditions, onChange }){
  const togglePreset = (key) => {
    const has = conditions.presets.includes(key);
    onChange({ presets: has ? conditions.presets.filter(k => k !== key) : [...conditions.presets, key] });
  };
  const addCustom = (v) => { if ((conditions.custom || []).includes(v)) return; onChange({ custom: [...(conditions.custom || []), v] }); };
  const removeCustom = (v) => onChange({ custom: (conditions.custom || []).filter(x => x !== v) });
  const toggleExtra = (key) => {
    const has = (conditions.extras || []).includes(key);
    onChange({ extras: has ? conditions.extras.filter(k => k !== key) : [...(conditions.extras || []), key] });
  };
  const addExtraCustom = (v) => { if ((conditions.extraCustom || []).includes(v)) return; onChange({ extraCustom: [...(conditions.extraCustom || []), v] }); };
  const removeExtraCustom = (v) => onChange({ extraCustom: (conditions.extraCustom || []).filter(x => x !== v) });

  return (
    <div className="fadein">
      <div className="step-head">
        <div className="eyebrow">우리 입맛</div>
        <h2>우리, 오늘은<br/>어떤 데가 좋아? 🍶</h2>
        <p>둘이 딱 좋아할 곳만 쏙쏙 골라줄게.</p>
      </div>

      <div className="card">
        <div className="field" style={{ marginTop:0 }}>
          <label><span className="dot"></span>연령층</label>
          <Segmented
            options={window.AGE_OPTS.map(a => ({ key:a, label:a }))}
            value={conditions.age} onChange={v => onChange({ age:v })} />
        </div>

        <div className="field">
          <label><span className="dot"></span>분위기 · 조건</label>
          <ChipEditor presets={window.COND_PRESETS} selectedKeys={conditions.presets} customs={conditions.custom}
            onTogglePreset={togglePreset} onAddCustom={addCustom} onRemoveCustom={removeCustom}
            placeholder="원하는 조건 직접 추가 (예: 노포 감성)" />
        </div>

        <div className="field">
          <label><span className="dot"></span>최소 평점</label>
          <div className="rating-row">
            <span className="rating-val">{conditions.rating.toFixed(1)}<small>이상</small></span>
            <input type="range" min="3.5" max="4.8" step="0.1" value={conditions.rating}
              onChange={e => onChange({ rating: parseFloat(e.target.value) })} />
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop:13 }}>
        <div className="field" style={{ marginTop:0 }}>
          <label><span className="dot"></span>그외 조건</label>
          <ChipEditor presets={window.EXTRA_PRESETS} selectedKeys={conditions.extras || []} customs={conditions.extraCustom}
            onTogglePreset={toggleExtra} onAddCustom={addExtraCustom} onRemoveCustom={removeExtraCustom}
            placeholder="그외 조건 직접 추가 (예: 콜키지 가능)" />
          <p className="hint" style={{ marginTop:9 }}><Icon name="info" />‘실내 포차’를 켜면 분위기 좋은 포차 4곳을 따로 찾아줘 🏮</p>
        </div>
      </div>
    </div>
  );
}

/* ---------- SCHEDULE STEP ---------- */
function ScheduleStep({ meet, onChange }){
  const fmt = (d) => {
    if (!d) return '';
    const dt = new Date(d + 'T00:00:00');
    const days = ['일','월','화','수','목','금','토'];
    return `${dt.getMonth()+1}월 ${dt.getDate()}일 (${days[dt.getDay()]})`;
  };
  return (
    <div className="fadein">
      <div className="step-head">
        <div className="eyebrow">우리 약속</div>
        <h2>우리 언제 볼까? 💕</h2>
        <p>날짜랑 시간 정하면 달력에 콕 찍어두고, 추억으로도 남겨줄게.</p>
      </div>

      <div className="card">
        <div className="field" style={{ marginTop:0 }}>
          <label><span className="dot"></span>만날 날짜</label>
          <div className="input-wrap">
            <span className="lead"><Icon name="calendar" /></span>
            <input type="date" value={meet.date} onChange={e => onChange({ date:e.target.value })} />
          </div>
        </div>
        <div className="field">
          <label><span className="dot"></span>만날 시간</label>
          <div className="input-wrap">
            <span className="lead"><Icon name="clock" /></span>
            <input type="time" value={meet.time} onChange={e => onChange({ time:e.target.value })} />
          </div>
        </div>

        {meet.date && (
          <div style={{ marginTop:16, padding:'14px', background:'var(--green-700)', borderRadius:13, color:'#fff', display:'flex', alignItems:'center', gap:10 }}>
            <Icon name="calendar" style={{ width:20, height:20, color:'#CFE0D6' }} />
            <div>
              <div style={{ fontWeight:900, fontSize:'1.02rem' }}>{fmt(meet.date)}</div>
              <div className="ral" style={{ fontWeight:700, fontSize:'.78rem', color:'#CFE0D6' }}>
                {meet.time ? meet.time + ' 에 만나기로 💚' : '시간은 아직 미정'}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- TRIP MODE SWITCH (따로 / 같이) ---------- */
function TripModeSwitch({ value, onChange }){
  const opts = [
    { key:'separate', emoji:'👫', label:'따로 만나기', sub:'각자 출발' },
    { key:'together', emoji:'🚗', label:'같이 이동',   sub:'한 차로 함께' }
  ];
  return (
    <div style={{ display:'flex', gap:9, marginBottom:18 }}>
      {opts.map(o => {
        const on = value === o.key;
        return (
          <button key={o.key} onClick={() => onChange(o.key)}
            style={{ flex:1, textAlign:'left', borderRadius:14, padding:'13px 14px', cursor:'pointer',
              border: on ? '2px solid var(--green-600)' : '2px solid var(--line)',
              background: on ? 'var(--green-50)' : 'var(--paper)',
              boxShadow: on ? 'var(--shadow-sm)' : 'none', transition:'.15s' }}>
            <div style={{ fontSize:'1.3rem', lineHeight:1 }}>{o.emoji}</div>
            <div style={{ fontWeight:900, fontSize:'.96rem', marginTop:6, color: on ? 'var(--green-800)' : 'var(--ink)' }}>{o.label}</div>
            <div className="ral" style={{ fontWeight:700, fontSize:'.72rem', color:'var(--faint)', marginTop:1 }}>{o.sub}</div>
          </button>
        );
      })}
    </div>
  );
}

/* ---------- TRIP STEP (together / 자차) ---------- */
function TripStep({ trip, onChange, onClearAll }){
  const set = (k, v) => onChange({ [k]: v });
  return (
    <div className="fadein">
      <div className="step-head">
        <div className="eyebrow">우리 드라이브</div>
        <h2>오늘은 한 차로<br/>같이 달려볼까? 🚗💕</h2>
        <p>출발지 · 경유지 · 목적지만 정하면 돼. 목적지 주변으로 맛집 찾아줄게.</p>
      </div>

      <div className="card">
        <div className="person-tag">
          <span className="av" style={{ background:'transparent', padding:0 }}><Mascot variant="j" size={36} /></span>
          <div style={{ flex:1 }}>
            <div className="nm">우리 둘이서 🚗</div>
            <div className="role">한 차로 함께 이동</div>
          </div>
          <button className="clearall" onClick={onClearAll}>
            <Icon name="trash" />전체 삭제
          </button>
        </div>

        <Field label="출발지" icon="pin" value={trip.start}
          placeholder="예) 판교 안랩"
          onChange={v => set('start', v)} onClear={() => set('start', '')} />

        <Field label="경유지 (들렀다 가기)" icon="flag" value={trip.waypointNone ? '' : trip.waypoint}
          placeholder="예) 동탄 디웨이브 (픽업)"
          disabled={trip.waypointNone}
          onChange={v => set('waypoint', v)} onClear={() => set('waypoint', '')} />
        <div className="field-row">
          <span className="hint"><Icon name="info" />바로 목적지로 가면 체크해줘 ✨</span>
          <MiniToggle on={trip.waypointNone} label="경유지 없음"
            onToggle={() => set('waypointNone', !trip.waypointNone)} />
        </div>

        <Field label="목적지 (함께 갈 곳)" icon="utensils" value={trip.dest}
          placeholder="예) 영통역 먹자골목"
          onChange={v => set('dest', v)} onClear={() => set('dest', '')} />

        <div className="field">
          <label><span className="dot"></span>이동 수단</label>
          <Segmented options={MODE_OPTS} value={trip.mode} onChange={v => set('mode', v)} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PersonStep, ConditionsStep, ScheduleStep, TripModeSwitch, TripStep });