/* global React */

const { useState: useStateM } = React;

function MapWorkspace({ onNav, selectedId, setSelectedId }) {
  const { I, Seal, PetalMark } = window.UI;
  const [filter, setFilter] = useStateM('season');
  const [region, setRegion] = useStateM('全国');

  const sel = window.SPOTS.find(s => s.id === selectedId) || window.SPOTS[0];

  return (
    <div className="map-workspace" style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(260px, 300px) minmax(480px, 1fr) minmax(340px, 380px)',
      height: 'calc(100vh - 42px)',
      minWidth: 1280,
    }}
      data-screen-label="02 Map Workspace">

      <aside style={{
        background: 'var(--bg-elev)',
        borderRight: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid var(--line-2)' }}>
          <Seal size="sm">花信<br/>风</Seal>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
            <span className="serif" style={{ fontSize: 15, letterSpacing: '0.08em' }}>花信风</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>v1.0 · 2026 春</span>
          </div>
          <div style={{ flex: 1 }}/>
          <button className="btn sm ghost" title="搜索"><I.search/></button>
        </div>

        <div style={{ padding: '16px 24px 8px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '10px 12px',
            border: '1px solid var(--line)',
            borderRadius: 'var(--radius-md)',
            background: 'var(--bg)',
          }}>
            <I.search/>
            <input placeholder="景点 · 花种 · 区域" style={{
              border: 'none', outline: 'none', background: 'transparent',
              flex: 1, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--ink)',
            }} defaultValue="樱花"/>
            <kbd>⌘K</kbd>
          </div>
        </div>

        <div style={{ padding: '8px 24px 16px' }}>
          <div className="cn-caps" style={{ margin: '12px 0 8px' }}>花期状态</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {[['season', '当季'], ['all', '全年'], ['next', '未来一月']].map(([k, l]) => (
              <button key={k}
                onClick={() => setFilter(k)}
                className="btn sm"
                style={{
                  background: filter === k ? 'var(--ink)' : 'transparent',
                  color: filter === k ? 'var(--bg)' : 'var(--ink-2)',
                  borderColor: filter === k ? 'var(--ink)' : 'var(--line)',
                }}>{l}</button>
            ))}
          </div>

          <div className="cn-caps" style={{ margin: '18px 0 8px' }}>区域</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {['全国', '华北', '华东', '华中', '华南', '西南', '西北', '东北', '西藏'].map(r => (
              <button key={r} onClick={() => setRegion(r)} className="btn sm"
                style={{
                  background: region === r ? 'var(--zhusha)' : 'transparent',
                  color: region === r ? 'var(--paper)' : 'var(--ink-2)',
                  borderColor: region === r ? 'var(--zhusha)' : 'var(--line)',
                  fontFamily: 'var(--font-serif)', letterSpacing: '0.1em',
                }}>{r}</button>
            ))}
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          <div style={{ padding: '16px 24px', borderTop: '1px solid var(--line-2)' }}>
            <div className="cn-caps">今日花信</div>
            <div style={{ marginTop: 10, padding: 14, background: 'var(--bg-sunk)', borderRadius: 'var(--radius-md)' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span className="serif" style={{ fontSize: 22, letterSpacing: '0.1em' }}>谷雨</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>GU YU · 第二候</span>
              </div>
              <div className="serif" style={{ marginTop: 6, fontSize: 14, color: 'var(--ink-2)' }}>
                荼蘼风 · 盛花期 · 第 3 日
              </div>
              <div style={{ height: 4, background: 'var(--line-2)', borderRadius: 2, marginTop: 12, overflow: 'hidden' }}>
                <div style={{ width: '62%', height: '100%', background: 'var(--zhusha)' }}/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>04.22</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>04.27</span>
              </div>
            </div>
          </div>

          <div style={{ padding: '4px 24px 16px' }}>
            <div className="cn-caps">附近花事 · 12</div>
            {[
              ['玉渊潭', '樱花', '盛花', 3.2],
              ['颐和园', '桃花', '末花', 8.1],
              ['植物园', '牡丹', '初花', 12.5],
              ['元大都', '海棠', '盛花', 5.7],
            ].map(([n, f, s, km], i) => (
              <div key={n} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 0', borderBottom: i < 3 ? '1px dotted var(--line)' : 'none',
              }}>
                <PetalMark active={s === '盛花'}/>
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 13 }}>{n}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{f} · {s}</div>
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{km}km</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--line-2)', padding: '12px 24px', display: 'flex', gap: 12 }}>
          <button className="btn sm ghost" onClick={() => onNav('huaxin')} title="二十四番花信风"><I.wind/> 花信</button>
          <button className="btn sm ghost" onClick={() => onNav('mood')} title="花签"><I.sparkle/> 花签</button>
          <button className="btn sm ghost" onClick={() => onNav('diary')} title="花历"><I.diary/> 花历</button>
        </div>
      </aside>

      <main style={{ position: 'relative', background: 'var(--paper)', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 20, left: 24, right: 24, zIndex: 5,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        }}>
          <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '10px 16px', boxShadow: 'var(--shadow-sm)', whiteSpace: 'nowrap' }}>
            <div className="cn-caps" style={{ marginBottom: 4 }}>当前花事 · 2026.04.18</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'nowrap' }}>
              <span className="serif" style={{ fontSize: 16 }}>487 处盛花</span>
              <span className="pill zhusha">樱 118</span>
              <span className="pill">桃 89</span>
              <span className="pill">杜鹃 52</span>
              <span className="pill">牡丹 34</span>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn sm ghost"><I.cloud/> 气象层</button>
            <button className="btn sm ghost"><I.share/> 分享</button>
            <button className="btn sm"><I.globe/> 中</button>
          </div>
        </div>

        <div style={{ position: 'absolute', inset: 0 }}>
          <window.InkMap selectedId={sel.id} onSelect={(s) => setSelectedId(s.id)}/>
        </div>

        <div style={{
          position: 'absolute', right: 24, bottom: 24,
          display: 'flex', flexDirection: 'column',
          background: 'var(--bg-elev)', border: '1px solid var(--line)',
          borderRadius: 'var(--radius-md)', overflow: 'hidden',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <button className="btn sm ghost" style={{ borderRadius: 0, border: 'none' }}><I.plus/></button>
          <div style={{ height: 1, background: 'var(--line-2)' }}/>
          <button className="btn sm ghost" style={{ borderRadius: 0, border: 'none' }}><I.minus/></button>
        </div>

        <div style={{
          position: 'absolute', left: 24, bottom: 24,
          display: 'flex', gap: 8,
          background: 'var(--bg-elev)', border: '1px solid var(--line)',
          borderRadius: 999, padding: 6, boxShadow: 'var(--shadow-sm)',
        }}>
          {[
            ['📊', '概览'], ['🤖', 'AI'], ['✨', '推荐'],
            ['🌺', '花事圈'], ['🗓', '日历'], ['📡', '播报'], ['📜', '诗词'],
          ].map(([e, l]) => (
            <button key={l} className="btn sm ghost" title={l}
              style={{ borderRadius: 999, border: 'none', padding: '6px 10px', fontFamily: 'var(--font-serif)' }}>
              <span style={{ fontSize: 13, filter: 'grayscale(.6)' }}>{e}</span>
              <span style={{ fontSize: 12 }}>{l}</span>
            </button>
          ))}
        </div>
      </main>

      <aside style={{
        background: 'var(--bg)',
        borderLeft: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        <window.SpotDetail spot={sel}/>
      </aside>
    </div>
  );
}

window.MapWorkspace = MapWorkspace;