/* 彩云间 — 我的观云记录（时间线）
   每次拍摄（无论是否新种类）都会记录一条：云种 + 时间 + 是否新收集 + 照片(若有)。
   按"今天 / 昨天 / 日期"分组展示，点击进入云详情。 */

function relDay(ts) {
  const d = new Date(ts), now = new Date();
  const dd = new Date(d.getFullYear(), d.getMonth(), d.getDate());
  const nn = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const diff = Math.round((nn - dd) / 86400000);
  if (diff === 0) return '今天';
  if (diff === 1) return '昨天';
  if (diff < 7) return diff + ' 天前';
  return `${d.getMonth()+1}月${d.getDate()}日`;
}
function clockStr(ts) {
  const d = new Date(ts);
  return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}

function JournalScreen({ records, onOpenCloud, onClose, onCapture }) {
  const sorted = (records || []).slice().sort((a, b) => b.ts - a.ts);
  // 分组
  const groups = [];
  sorted.forEach(r => {
    const key = relDay(r.ts);
    let g = groups.find(x => x.key === key);
    if (!g) { g = { key, items: [] }; groups.push(g); }
    g.items.push(r);
  });
  const cloudById = id => (window.CY_CLOUDS || []).find(c => c.id === id);
  const speciesCount = new Set(sorted.map(r => r.id)).size;

  return (
    <div style={{ position:'absolute', inset:0, background:'var(--cy-bg)', zIndex:40 }}>
    <div className="cy-scroll" style={{ height:'100%' }}>
      {/* 顶栏 */}
      <div style={{ position:'sticky', top:0, zIndex:5, background:'var(--cy-bg)', padding:'calc(env(safe-area-inset-top) + 12px) 18px 10px',
        display:'flex', alignItems:'center', gap:12 }}>
        <button onClick={onClose} className="cy-tap" style={{ width:38, height:38, borderRadius:99, border:'1px solid var(--cy-line)',
          background:'var(--cy-card)', color:'var(--cy-ink)', cursor:'pointer', display:'grid', placeItems:'center', flexShrink:0 }}>
          <Icon name="back" size={20}/>
        </button>
        <div>
          <div style={{ fontFamily:'var(--cy-brand)', fontSize:25, color:'var(--cy-ink)', lineHeight:1 }}>观云记录</div>
          <div style={{ fontSize:12, color:'var(--cy-ink-soft)', marginTop:4 }}>
            共 {sorted.length} 次观云 · 遇见 {speciesCount} 种云
          </div>
        </div>
      </div>

      <div style={{ padding:'4px 18px 130px' }}>
        {sorted.length === 0 && (
          <div className="cy-card" style={{ padding:'40px 24px', textAlign:'center', marginTop:20 }}>
            <div style={{ width:120, height:80, margin:'0 auto 12px' }}>
              <CloudArt shape="puff" tone="white" style={{ width:'100%', height:'100%' }}/>
            </div>
            <div style={{ fontFamily:'var(--cy-serif)', fontSize:16, color:'var(--cy-ink)' }}>还没有观云记录</div>
            <div style={{ fontSize:13, color:'var(--cy-ink-soft)', marginTop:6, lineHeight:1.6 }}>抬头拍下第一朵云，<br/>这里会记下你与云相遇的每一刻。</div>
          </div>
        )}

        {groups.map((g, gi) => (
          <div key={gi} style={{ marginTop: gi === 0 ? 10 : 22 }}>
            {/* 日期节点 */}
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:12 }}>
              <span style={{ width:9, height:9, borderRadius:99, background:'var(--cy-accent)' }}/>
              <span style={{ fontFamily:'var(--cy-serif)', fontSize:15.5, fontWeight:700, color:'var(--cy-ink)' }}>{g.key}</span>
              <span style={{ fontSize:12, color:'var(--cy-ink-soft)' }}>· {g.items.length} 次</span>
            </div>
            {/* 时间线条目 */}
            <div style={{ position:'relative', paddingLeft:14, borderLeft:'2px solid var(--cy-line)', display:'flex', flexDirection:'column', gap:12 }}>
              {g.items.map((r, i) => {
                const c = cloudById(r.id);
                if (!c) return null;
                return (
                  <button key={i} onClick={() => onOpenCloud(c.id)} className="cy-card cy-tap"
                    style={{ border:'none', cursor:'pointer', textAlign:'left', padding:10, display:'flex', gap:12, alignItems:'center' }}>
                    {/* 缩略：真实照片优先 */}
                    <div style={{ width:64, height:64, borderRadius:14, overflow:'hidden', flexShrink:0,
                      background: r.photo ? '#000' : skyGradient(c.art.tone), display:'grid', placeItems:'center' }}>
                      {r.photo
                        ? <img src={r.photo} alt="" style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
                        : <div style={{ width:'92%', height:'92%' }}><CloudArt shape={c.art.shape} tone={c.art.tone} style={{ width:'100%', height:'100%' }}/></div>}
                    </div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:7 }}>
                        <span style={{ fontFamily:'var(--cy-serif)', fontSize:16, fontWeight:600, color:'var(--cy-ink)' }}>{c.name}</span>
                        {r.isNew && <span style={{ fontSize:10.5, fontWeight:700, color:'#fff', background:'var(--cy-accent)', padding:'1px 7px', borderRadius:99 }}>新</span>}
                      </div>
                      <div style={{ fontSize:12, color:'var(--cy-ink-soft)', marginTop:3 }}>{c.tagline}</div>
                      <div style={{ display:'flex', alignItems:'center', gap:5, fontSize:11.5, color:'var(--cy-ink-soft)', marginTop:5 }}>
                        <Icon name="cal" size={13}/> {clockStr(r.ts)}
                        {r.conf ? <span style={{ marginLeft:4 }}>· 匹配 {r.conf}%</span> : null}
                      </div>
                    </div>
                    <Icon name="chev" size={18} style={{ color:'var(--cy-ink-soft)', flexShrink:0 }}/>
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      </div>

      {/* 浮动拍云（固定不随滚动）*/}
      <button onClick={onCapture} className="cy-btn-primary cy-tap" style={{ position:'absolute', bottom:'calc(env(safe-area-inset-bottom) + 26px)', left:'50%',
        transform:'translateX(-50%)', zIndex:10, height:50, padding:'0 26px', fontSize:15.5, borderRadius:99,
        boxShadow:'0 8px 22px rgba(90,140,190,.35)' }}>
        <Icon name="camera" size={20}/> 再观一朵云
      </button>
    </div>
  );
}

Object.assign(window, { JournalScreen });