/* global React, window, Icon, KPICard, ScoreBadge, PageHead, Sparkline, CHART, KPIS, HEAT_CARDS, WATCHLIST, REGIONS, SERIES, MONTHS */
/* ============================================================
   Dashboard — market overview
   ============================================================ */
function Dashboard({ region, setView, lang }) {
  const reg = REGIONS.find((r) => r.id === region) || REGIONS[1];
  const recent = [
    { t: 'York Detached — April Market Report', kind: 'PDF', when: '2 hr ago', ic: 'reports' },
    { t: '成交量回升 · 小红书图文', kind: 'Social', when: 'Yesterday', ic: 'sparkles' },
    { t: 'Spring Market — Live recap', kind: 'Live', when: '2 days ago', ic: 'live' },
  ];
  const tasks = [
    { t: 'Spring Market Outlook 直播', meta: 'Thu 7:30pm · 7 charts ready', tone: 'green' },
    { t: 'Prep: Condo opportunity chart', meta: 'Add to playlist', tone: 'amber' },
    { t: '12 audience questions to review', meta: 'From last live', tone: 'amber' },
  ];
  return (
    <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <PageHead eyebrow={reg.name + ' · Detached · Apr 2026'} title="Market overview"
        sub="进入平台 10 秒看懂本月市场，并快速进入常用区域。"
        actions={<>
          <button className="btn btn-ghost"><Icon name="refresh" size={15} />Refresh</button>
          <button className="btn btn-primary" onClick={() => setView('reports')}><Icon name="reports" size={15} />New report</button>
        </>} />

      {/* Hero summary band */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 2fr' }}>
          <div style={{ background: 'var(--az-dark-green,#1F281F)', color: '#fff', padding: 'var(--card-pad)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>
              <Icon name="sparkles" size={14} color="var(--accent)" /> AI Big Picture
            </div>
            <div style={{ fontSize: 21, fontWeight: 700, lineHeight: 1.32, letterSpacing: '-0.01em' }}>
              成交量回升，但价格仍未完全修复。
            </div>
            <div style={{ fontSize: 13, color: '#C3CBC3', lineHeight: 1.6 }}>
              买家正在回来，库存压力缓解，卖家定价权在恢复 —— 但还没到疯抢的程度。
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
              <ScoreBadge tone="green">Seller timing · High</ScoreBadge>
              <ScoreBadge tone="amber">Buyer · Medium</ScoreBadge>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)' }}>
            {KPIS.map((k, i) => {
              const up = k.dir === 'up'; const col = up ? CHART.up : k.dir === 'down' ? CHART.down : 'var(--ink-3)';
              return (
                <div key={k.key} style={{ padding: 'var(--card-pad)', borderLeft: i ? '1px solid var(--line)' : 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{k.label}</div>
                  <div className="tabnum" style={{ fontSize: 23, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{k.value}</div>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11.5, fontWeight: 700, color: col }}>
                    {k.dir !== 'flat' && <Icon name={up ? 'arrowUp' : 'arrowDown'} size={12} color={col} />}{k.delta}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Heat cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
        {HEAT_CARDS.map((h) => (
          <button key={h.key} onClick={() => setView('charts')} className="card" style={{ padding: 'var(--card-pad)', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', color: 'var(--ink)', display: 'flex', flexDirection: 'column', gap: 11 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontSize: 13.5, fontWeight: 700 }}>{h.title}</div>
              <ScoreBadge tone={h.tone}>{h.score}</ScoreBadge>
            </div>
            <div className="tabnum" style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-2)' }}>{h.metric}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.55 }}>{h.note}</div>
          </button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18 }}>
        {/* Watchlist */}
        <div className="card" style={{ padding: 'var(--card-pad)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>My Watchlist</h3>
            <button className="btn btn-quiet" style={{ fontSize: 12 }}><Icon name="plus" size={14} />Add area</button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {WATCHLIST.map((w, i) => {
              const up = w.dir === 'up'; const col = up ? CHART.up : CHART.down;
              return (
                <button key={w.id} onClick={() => setView('charts')} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr auto auto', alignItems: 'center', gap: 14, padding: '13px 6px', borderTop: i ? '1px solid var(--line)' : 'none', background: 'none', border: 'none', borderTopColor: 'var(--line)', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', color: 'var(--ink)' }}>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 700 }}>{w.area}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{w.type}</div>
                  </div>
                  <Sparkline data={w.spark} color={up ? CHART.green : CHART.clay} />
                  <div className="tabnum" style={{ fontSize: 14, fontWeight: 800, textAlign: 'right' }}>{w.price}</div>
                  <div className="tabnum" style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, fontWeight: 700, color: col, justifyContent: 'flex-end', minWidth: 56 }}>
                    <Icon name={up ? 'arrowUp' : 'arrowDown'} size={12} color={col} />{w.delta}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Region snapshot */}
        <div className="card" style={{ padding: 'var(--card-pad)' }}>
          <h3 style={{ margin: '0 0 14px', fontSize: 15, fontWeight: 700 }}>Region snapshot</h3>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {REGIONS.slice(0, 5).map((r, i) => (
              <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{r.name}</span>
                <span className="tabnum" style={{ fontSize: 12.5, fontWeight: 700 }}>{r.price}</span>
                <span className="tabnum" style={{ fontSize: 12, fontWeight: 700, color: CHART.up, minWidth: 46, textAlign: 'right' }}>{r.yoy}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {/* Latest reports */}
        <div className="card" style={{ padding: 'var(--card-pad)' }}>
          <h3 style={{ margin: '0 0 6px', fontSize: 15, fontWeight: 700 }}>Latest reports & content</h3>
          {recent.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderTop: i ? '1px solid var(--line)' : '1px solid var(--line)' }}>
              <div style={{ width: 34, height: 34, borderRadius: 7, background: 'var(--panel-2)', display: 'grid', placeItems: 'center', color: 'var(--accent)', border: '1px solid var(--line)' }}><Icon name={r.ic} size={17} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{r.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.kind} · {r.when}</div>
              </div>
              <button className="btn btn-quiet" style={{ padding: 6 }}><Icon name="copy" size={15} /></button>
              <button className="btn btn-quiet" style={{ padding: 6 }}><Icon name="download" size={15} /></button>
            </div>
          ))}
        </div>

        {/* Live prep */}
        <div className="card" style={{ padding: 'var(--card-pad)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>Live preparation</h3>
            <button className="btn btn-primary" style={{ fontSize: 11.5, padding: '7px 12px' }} onClick={() => setView('live')}><Icon name="play" size={13} />Live Planner</button>
          </div>
          {tasks.map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 0', borderTop: '1px solid var(--line)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: t.tone === 'green' ? CHART.green : CHART.amber, flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{t.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{t.meta}</div>
              </div>
              <Icon name="chevronR" size={16} color="var(--ink-3)" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;