/* =========================================================
   커플 연결(온보딩) + 요청/응답 패널
   ========================================================= */
const { Icon: SI, CoupleMark: SCouple } = window;

/* ---------- 온보딩: 커플코드 + 나 ---------- */
function Onboarding({ onDone }){
  const [code, setCode] = React.useState('');
  const [name, setName] = React.useState('준영');
  const go = () => {
    const c = code.trim().toLowerCase();
    if (!c) return;
    window.saveIdentity({ code: c, name });
    onDone({ code: c, name });
  };
  return (
    <div className="scrim" style={{ alignItems:'center', padding:'20px' }}>
      <div className="sheet" style={{ borderRadius:'24px', maxWidth:'380px' }} onClick={e => e.stopPropagation()}>
        <div className="sheet-body" style={{ paddingTop:'26px', textAlign:'center' }}>
          <SCouple size={58} />
          <h2 style={{ fontWeight:900, fontSize:'1.3rem', color:'var(--green-900)', margin:'12px 0 4px' }}>우리 둘만의 공간</h2>
          <p style={{ fontSize:'.86rem', color:'var(--muted)', marginBottom:18 }}>
            둘이 똑같은 <b>커플 코드</b>를 입력하면<br/>추억과 약속을 함께 보게 돼요 💕
          </p>

          <div className="field" style={{ textAlign:'left', marginTop:0 }}>
            <label><span className="dot"></span>커플 코드 (둘이 같은 값)</label>
            <div className="input-wrap">
              <span className="lead"><SI name="heart" /></span>
              <input type="text" value={code} placeholder="예) sojeong-junyoung"
                onChange={e => setCode(e.target.value)} />
            </div>
          </div>

          <div className="field" style={{ textAlign:'left' }}>
            <label><span className="dot"></span>나는</label>
            <div className="seg-ctrl">
              {['준영','소정'].map(n => (
                <button key={n} className={name === n ? 'on' : ''} onClick={() => setName(n)}>{n}</button>
              ))}
            </div>
          </div>

          <button className="btn btn-primary btn-full" style={{ marginTop:20 }} onClick={go} disabled={!code.trim()}>
            <SI name="heart" />시작하기
          </button>
          <p className="map-note" style={{ marginTop:10 }}>코드는 비밀번호처럼 둘만 아는 값으로 정해요.</p>
        </div>
      </div>
    </div>
  );
}

/* ---------- 요청/응답 패널 ---------- */
function fmtP(s){
  if (!s) return '';
  const dt = new Date(s + 'T00:00:00');
  if (isNaN(dt)) return s;
  const d = ['일','월','화','수','목','금','토'];
  return `${dt.getMonth()+1}월 ${dt.getDate()}일 (${d[dt.getDay()]})`;
}
function ProposalsPanel({ proposals, myName, onRespond }){
  const [replyFor, setReplyFor] = React.useState(null);
  const [replyTxt, setReplyTxt] = React.useState('');
  if (!proposals) return <div className="empty"><p>불러오는 중…</p></div>;
  if (proposals.length === 0) {
    return (
      <div className="empty">
        <div className="ic" style={{ background:'transparent' }}><SCouple size={50} /></div>
        <h4>아직 주고받은 제안이 없어</h4>
        <p>결과 화면에서 ‘상대에게 보내기’로<br/>“여기 어때?”를 보내봐 💌</p>
      </div>
    );
  }
  return (
    <div className="prop-list">
      {proposals.map(p => {
        const mine = p.from_name === myName;
        const pay = p.payload || {};
        return (
          <div className={'prop-card ' + p.status} key={p.id}>
            <div className="prop-head">
              <span className={'prop-who ' + (p.from_name === '준영' ? 'j' : 's')}>{p.from_name || '?'}</span>
              <span className="prop-arrow">{mine ? '내가 보냄' : '나에게'}</span>
              <span className={'prop-status ' + p.status}>
                {p.status === 'pending' ? '대기중' : p.status === 'accepted' ? '여기 가자 💚' : '다음에 🥲'}
              </span>
            </div>
            <div className="prop-title">{p.title || '데이트 제안'}</div>
            <div className="prop-meta">
              {pay.dest && <span>📍 {pay.dest}</span>}
              {pay.date && <span>📅 {fmtP(pay.date)}{pay.time ? ' · ' + pay.time : ''}</span>}
              {pay.place && <span>🍽️ {pay.place}</span>}
            </div>
            {p.reply && <div className="prop-reply">“{p.reply}”</div>}

            {!mine && p.status === 'pending' && (
              replyFor === p.id ? (
                <div className="prop-replybox">
                  <input value={replyTxt} placeholder="한마디 남기기 (선택)" onChange={e => setReplyTxt(e.target.value)} />
                  <div style={{ display:'flex', gap:7, marginTop:8 }}>
                    <button className="btn btn-sm btn-primary" style={{ flex:1 }} onClick={() => { onRespond(p.id, 'accepted', replyTxt); setReplyFor(null); setReplyTxt(''); }}>그래 여기 가자 💚</button>
                    <button className="btn btn-sm btn-ghost" onClick={() => { onRespond(p.id, 'declined', replyTxt); setReplyFor(null); setReplyTxt(''); }}>다음에</button>
                  </div>
                </div>
              ) : (
                <div style={{ display:'flex', gap:7, marginTop:10 }}>
                  <button className="btn btn-sm btn-primary" style={{ flex:1 }} onClick={() => onRespond(p.id, 'accepted', '')}>그래 여기 가자 💚</button>
                  <button className="btn btn-sm btn-ghost" onClick={() => setReplyFor(p.id)}>답장</button>
                </div>
              )
            )}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Onboarding, ProposalsPanel });