// screens-collection.jsx — 여정 보관함(컬렉션). 손님은 본인 것만, 호스트는 전부.
// 각 여정의 사용 금액 · 이동 루트(km) · 사진 · 추억을 모아 본다.

function JourneyCard({ j, onClick, isHost }) {
  return (
    <Card onClick={onClick} pad={0} style={{ overflow: 'hidden' }}>
      <div style={{ position: 'relative', height: 110 }}>
        <Photo scene={j.cover} h={110} r={0} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.05), rgba(20,30,40,.55))' }} />
        {j.current && <div style={{ position: 'absolute', top: 9, right: 9 }}><Tag tone="coral" solid>진행 중</Tag></div>}
        <div style={{ position: 'absolute', left: 13, bottom: 11, right: 13, display: 'flex', alignItems: 'center', gap: 9 }}>
          {isHost && <Avatar name={j.initial} tone={j.tone} size={30} ring />}
          <div style={{ flex: 1 }}>
            {isHost && <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 15, color: '#fff', textShadow: '0 1px 6px rgba(0,0,0,.5)' }}>{j.guest}</div>}
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 11.5, color: 'rgba(255,255,255,.9)', textShadow: '0 1px 4px rgba(0,0,0,.5)' }}>{j.dates} · {j.nights}박</div>
          </div>
        </div>
      </div>
      <div style={{ padding: '11px 13px', display: 'flex', alignItems: 'center', gap: 0 }}>
        {[['사용', j.spent.toLocaleString() + '원'], ['이동', j.km + 'km'], ['사진', j.photos + '장']].map(([l, v], i) => (
          <div key={l} style={{ flex: 1, textAlign: 'center', borderLeft: i ? '1px solid var(--line-soft)' : 'none' }}>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 14.5, color: 'var(--ink)' }}>{v}</div>
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 10, color: 'var(--ink-3)', marginTop: 1 }}>{l}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// 이동 루트 지도 — 정류 지점을 부드러운 곡선으로 잇는다
function RouteMap({ route }) {
  const n = route.length;
  const W = 300, H = 150;
  const pts = route.map((r, i) => {
    const x = 26 + (i / Math.max(1, n - 1)) * (W - 52);
    const y = 38 + (Math.sin(i * 1.25) * 0.5 + 0.5) * (H - 76);
    return [x, y];
  });
  const path = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(0) + ' ' + p[1].toFixed(0)).join(' ');
  return (
    <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line-soft)', background: 'linear-gradient(155deg,#A9CBD6 0%,#C7DBDE 35%,#EBDEC0 60%,#E6D2A8 100%)' }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', width: '100%', height: H }}>
        <path d={`M0,96 Q70,78 140,104 T300,96 L300,150 L0,150 Z`} fill="rgba(233,210,168,.5)" />
        <path d={path} fill="none" stroke="var(--coral)" strokeWidth="2.5" strokeDasharray="2 6" strokeLinecap="round" opacity="0.85" />
        {pts.map((p, i) => (
          <g key={i}>
            <circle cx={p[0]} cy={p[1]} r={i === 0 || i === n - 1 ? 7 : 5} fill="#fff" stroke="var(--coral)" strokeWidth="2.5" />
            {(i === 0 || i === n - 1) && <circle cx={p[0]} cy={p[1]} r="2.5" fill="var(--coral)" />}
          </g>
        ))}
      </svg>
      <div style={{ position: 'absolute', left: 12, top: 10, fontFamily: 'var(--f-hand)', fontSize: 'calc(17px * var(--hand-scale))', color: 'rgba(32,89,107,.7)' }}>우리가 다닌 길</div>
    </div>
  );
}

function JourneyDetail({ j, onBack, isHost, openSheet }) {
  const totalKm = j.route.reduce((s, r) => s + r.km, 0);
  const photoScenes = j.route.slice(1).map(r => r.scene);
  return (
    <div>
      <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'none', border: 'none', cursor: 'pointer', padding: '0 0 10px', fontFamily: 'var(--f-body)', fontSize: 12.5, fontWeight: 600, color: 'var(--ink-2)' }}>
        <JJIcon name="chevL" size={15} color="var(--ink-2)" sw={2.2} />여정 목록
      </button>
      {/* cover */}
      <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden' }}>
        <Photo scene={j.cover} h={150} r={18} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 35%, rgba(20,30,40,.6))' }} />
        <div style={{ position: 'absolute', left: 15, bottom: 13, right: 15, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Avatar name={j.initial} tone={j.tone} size={36} ring />
          <div>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, color: '#fff', textShadow: '0 2px 8px rgba(0,0,0,.5)' }}>{j.guest}의 부산</div>
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 11.5, color: 'rgba(255,255,255,.9)' }}>{j.dates} · {j.nights}박</div>
          </div>
          {j.current && <div style={{ marginLeft: 'auto' }}><Tag tone="coral" solid>진행 중</Tag></div>}
        </div>
      </div>
      {/* stats */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
        {[['wallet', j.spent.toLocaleString(), '원 사용'], ['pin', j.km, 'km 이동'], ['album', j.photos, '장 사진'], ['heart', j.places, '곳 방문']].map(([ic, v, l]) => (
          <Card key={l} pad={11} style={{ textAlign: 'center' }}>
            <JJIcon name={ic} size={17} color="var(--coral)" style={{ margin: '0 auto' }} />
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 16, color: 'var(--ink)', marginTop: 5 }}>{v}</div>
            <div style={{ fontFamily: 'var(--f-body)', fontSize: 9.5, color: 'var(--ink-3)' }}>{l}</div>
          </Card>
        ))}
      </div>
      {/* route map */}
      <div style={{ marginTop: 16, marginBottom: 9, display: 'flex', alignItems: 'center', gap: 8 }}>
        <JJIcon name="map" size={17} color="var(--sea)" />
        <span style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 16, color: 'var(--ink)', flex: 1 }}>이동한 루트</span>
        <Tag tone="sea">총 {totalKm}km</Tag>
      </div>
      <RouteMap route={j.route} />
      {/* route stops */}
      <div style={{ marginTop: 12 }}>
        {j.route.map((r, i) => (
          <div key={i} style={{ display: 'flex', gap: 11 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 14, flexShrink: 0 }}>
              <div style={{ width: 11, height: 11, borderRadius: '50%', background: i === 0 ? 'var(--sea)' : 'var(--coral)', border: '2px solid var(--card)', boxShadow: '0 0 0 1.5px ' + (i === 0 ? 'var(--sea)' : 'var(--coral)'), marginTop: 4 }} />
              {i < j.route.length - 1 && <div style={{ flex: 1, width: 2, background: 'var(--line)', marginTop: 2, minHeight: 18 }} />}
            </div>
            <div style={{ flex: 1, paddingBottom: 12, display: 'flex', alignItems: 'center', gap: 9 }}>
              <Photo scene={r.scene} h={36} r={9} style={{ width: 44, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>{r.name}</div>
                <div style={{ fontFamily: 'var(--f-body)', fontSize: 11, color: 'var(--ink-3)' }}>{i === 0 ? '출발' : `이전에서 ${r.km}km`}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* photo strip */}
      <div style={{ marginTop: 4, marginBottom: 9, fontFamily: 'var(--f-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: '.04em', color: 'var(--ink-3)' }}>이 여정의 사진</div>
      <div style={{ display: 'flex', gap: 7, overflowX: 'auto', paddingBottom: 4 }}>
        {photoScenes.map((s, i) => <Photo key={i} scene={s} h={66} r={11} style={{ width: 66, flexShrink: 0 }} />)}
      </div>
      {/* memory link */}
      <Card pad={13} onClick={() => openSheet && openSheet('memory')} style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 11, background: 'var(--paper-2)' }}>
        <div style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><JJIcon name="gift" size={19} color="var(--coral)" /></div>
        <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 14, color: 'var(--ink)' }}>추억 선물 열기</div><div style={{ fontFamily: 'var(--f-body)', fontSize: 11.5, color: 'var(--ink-3)' }}>이 여정을 한 편의 이야기로</div></div>
        <JJIcon name="chevron" size={15} color="var(--line)" sw={2.2} />
      </Card>
    </div>
  );
}

function CollectionView({ persona, openSheet }) {
  const isHost = persona === 'host';
  const mine = isHost ? JJ.journeys : JJ.journeys.filter(j => j.guest === '민서');
  const [sel, setSel] = React.useState(null);
  if (sel) return <JourneyDetail j={sel} onBack={() => setSel(null)} isHost={isHost} openSheet={openSheet} />;

  const totalSpent = mine.reduce((s, j) => s + j.spent, 0);
  const totalKm = mine.reduce((s, j) => s + j.km, 0);
  return (
    <div>
      <ScreenTitle kicker="여정 보관함 · Collection" title={isHost ? '손님들의 여정' : '나의 부산 여정'} sub={isHost ? '거쳐간 모든 손님의 여정이 집에 쌓여요.' : '내가 머문 며칠이 한 장씩 모여요.'} kickerColor="var(--coral)" />
      <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
        <Card pad={12} style={{ flex: 1, textAlign: 'center' }}><div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 19, color: 'var(--coral)' }}>{mine.length}</div><div style={{ fontFamily: 'var(--f-body)', fontSize: 10.5, color: 'var(--ink-3)' }}>{isHost ? '여정' : '나의 방문'}</div></Card>
        <Card pad={12} style={{ flex: 1, textAlign: 'center' }}><div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 19, color: 'var(--sea)' }}>{totalKm}</div><div style={{ fontFamily: 'var(--f-body)', fontSize: 10.5, color: 'var(--ink-3)' }}>총 km</div></Card>
        <Card pad={12} style={{ flex: 1, textAlign: 'center' }}><div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 19, color: 'var(--amber)' }}>{(totalSpent / 10000).toFixed(0)}<span style={{ fontSize: 12 }}>만</span></div><div style={{ fontFamily: 'var(--f-body)', fontSize: 10.5, color: 'var(--ink-3)' }}>누적 사용</div></Card>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
        {mine.map(j => <JourneyCard key={j.id} j={j} isHost={isHost} onClick={() => setSel(j)} />)}
      </div>
      {!isHost && (
        <div style={{ marginTop: 14, textAlign: 'center', fontFamily: 'var(--f-hand)', fontSize: 'calc(19px * var(--hand-scale))', color: 'var(--coral)' }}>또 한 장, 쌓으러 갈까요?</div>
      )}
    </div>
  );
}

Object.assign(window, { CollectionView, JourneyDetail, JourneyCard, RouteMap });