/* global React */

function SpotDetail({ spot }) {
  const { I, Seal, Placeholder } = window.UI;
  const s = spot;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'auto' }}>
      <div style={{ position: 'relative', padding: 20, borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ position: 'absolute', top: 28, right: 28, zIndex: 2 }}>
          <Seal size="sm" rotate={-6}>{s.region}</Seal>
        </div>
        <Placeholder label={`${s.flower} · 景点近景`} aspect="16/10"/>
        <div style={{ marginTop: 16 }}>
          <div className="cn-caps">{s.region} · 第 {Math.floor(Math.random()*45)+1} 候</div>
          <div className="serif" style={{ fontSize: 22, marginTop: 6, letterSpacing: '0.05em' }}>{s.name}</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
            <span className="pill zhusha"><I.flower/> {s.flower}</span>
            <span className="pill">{s.status === 'peak' ? '盛花期' : s.status === 'bud' ? '含苞' : '末花'}</span>
            <span className="pill qing"><I.thermo/> 积温 412°C·d</span>
          </div>
        </div>
      </div>

      <section style={{ padding: 20, borderBottom: '1px solid var(--line-2)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div className="cn-caps">花期预测</div>
            <div className="serif" style={{ fontSize: 16, marginTop: 4 }}>盛花 · 今日起约 4 日</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="serif" style={{ fontSize: 28, color: 'var(--zhusha)' }}>93<span style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 2 }}>%</span></div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>CONFIDENCE</div>
          </div>
        </div>

        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-serif)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.15em' }}>
            <span>休眠</span><span>营养</span><span>花芽</span><span>初花</span><span>盛花</span><span>末花</span>
          </div>
          <div style={{ position: 'relative', height: 28, marginTop: 6 }}>
            <div style={{ position: 'absolute', top: 13, left: 0, right: 0, height: 2, background: 'var(--line)' }}/>
            <div style={{ position: 'absolute', top: 13, left: 0, width: '72%', height: 2, background: 'var(--zhusha)' }}/>
            {[0, 20, 40, 60, 72, 90].map((p, i) => (
              <div key={i} style={{
                position: 'absolute', left: `${p}%`, top: i === 4 ? 8 : 11, transform: 'translateX(-50%)',
                width: i === 4 ? 12 : 6, height: i === 4 ? 12 : 6, borderRadius: '50%',
                background: p <= 72 ? 'var(--zhusha)' : 'var(--bg)',
                border: p <= 72 ? 'none' : '1.5px solid var(--ink-4)',
                boxShadow: i === 4 ? '0 0 0 3px var(--bg), 0 0 0 4px var(--zhusha)' : 'none',
              }}/>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span className="cn-caps">活动积温</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>412 / 480 °C·d</span>
          </div>
          <div style={{ height: 6, background: 'var(--bg-sunk)', borderRadius: 3, overflow: 'hidden', position: 'relative' }}>
            <div style={{ width: '86%', height: '100%', background: 'linear-gradient(90deg, var(--qing), var(--zhusha))' }}/>
            <div style={{ position: 'absolute', left: '86%', top: -3, width: 2, height: 12, background: 'var(--ink)' }}/>
          </div>
        </div>
      </section>

      <section style={{ padding: 20, borderBottom: '1px solid var(--line-2)' }}>
        <div className="cn-caps" style={{ marginBottom: 12 }}>七日花气 · Open-Meteo</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, alignItems: 'end', height: 80 }}>
          {[14, 16, 18, 21, 19, 17, 20].map((t, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-2)' }}>{t}°</span>
              <div style={{
                width: 14, height: t * 2,
                background: i === 3 ? 'var(--zhusha)' : 'var(--ink-4)',
                opacity: i === 3 ? 1 : 0.5,
                borderRadius: '2px 2px 0 0',
              }}/>
              <span className="serif" style={{ fontSize: 10, color: 'var(--ink-3)' }}>
                {['今', '周六', '周日', '周一', '周二', '周三', '周四'][i]}
              </span>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: 20, borderBottom: '1px solid var(--line-2)', background: 'var(--paper)' }}>
        <div className="cn-caps" style={{ marginBottom: 10 }}>诗词 · 刘禹锡《赏牡丹》</div>
        <div className="serif" style={{ fontSize: 15, lineHeight: 2, color: 'var(--ink)', letterSpacing: '0.08em' }}>
          庭前芍药妖无格 · 池上芙蕖净少情<br/>
          唯有牡丹真国色 · 花开时节动京城
        </div>
      </section>

      <section style={{ padding: 20, display: 'flex', gap: 8 }}>
        <button className="btn zhusha" style={{ flex: 1 }}><I.pin/> 打卡</button>
        <button className="btn"><I.heart/></button>
        <button className="btn"><I.bookmark/></button>
        <button className="btn"><I.share/></button>
      </section>
    </div>
  );
}

window.SpotDetail = SpotDetail;