var { Icon: DIcon } = window.GloryWaveDesignSystem_1a6704;

// 1 window unit = 3×3 A4 modules = 1 string
function WindowUnit({ size = 180, inverse, label = true }) {
  const cell = { background: inverse ? 'var(--ink-700)' : 'var(--ink-800)', borderRadius: 1 };
  return (
    <div style={{ display: 'grid', gap: 8, justifyItems: 'center' }}>
      <div style={{ width: size, aspectRatio: '210/297', padding: 8, border: `3px solid ${inverse ? 'var(--ink-400)' : 'var(--ink-500)'}`, borderRadius: 2, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gridTemplateRows: 'repeat(3,1fr)', gap: 4, background: inverse ? 'var(--surface-ink-soft)' : 'var(--surface-card)' }}>
        {Array.from({ length: 9 }).map((_, i) => <div key={i} style={cell}></div>)}
      </div>
      {label && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: inverse ? 'var(--ink-300)' : 'var(--text-muted)' }}>3 × 3 A4 = 1 string</div>}
    </div>
  );
}

// Façade → MPPT → SPB → monitoring
function SystemFlow({ inverse }) {
  const steps = [
    ['layout-grid', '立面 BIPV', '鈣鈦礦窗單元', 'TPSC 模組'],
    ['cpu', '鈣鈦礦專用 MPPT', '8 通道・Buck 40W', '群來自主開發'],
    ['battery-charging', 'SPB 儲能', '16S LFP・52 V 匯流排', 'BMS'],
    ['activity', '監控 IoT', '發電・儲能・告警', '雲端監控'],
  ];
  const fg = inverse ? 'var(--white)' : 'var(--text-primary)';
  const sub = inverse ? 'var(--ink-300)' : 'var(--text-secondary)';
  const line = inverse ? 'var(--border-inverse)' : 'var(--border-default)';
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr)', alignItems: 'stretch' }}>
      {steps.map(([icon, t, a, b], i) => (
        <React.Fragment key={t}>
          <div style={{ border: `1px solid ${line}`, borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', background: inverse ? 'var(--surface-ink-soft)' : 'var(--surface-card)', borderTop: i === 1 ? '3px solid var(--accent)' : `1px solid ${line}` }}>
            <span style={{ color: 'var(--accent)', display: 'inline-flex' }}><DIcon name={icon} size={24} /></span>
            <div style={{ fontFamily: 'var(--font-cjk)', fontWeight: 700, fontSize: 'var(--size-subheading)', color: fg, marginTop: 12 }}>{t}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: sub, marginTop: 6 }}>{a}</div>
            <div style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', color: sub, marginTop: 2 }}>{b}</div>
          </div>
          {i < steps.length - 1 && <div style={{ display: 'grid', placeItems: 'center', color: inverse ? 'var(--ink-400)' : 'var(--text-muted)' }}><DIcon name="arrow-right" size={18} /></div>}
        </React.Fragment>
      ))}
    </div>
  );
}

// 8-channel MPPT → SPB
function MpptChannels({ active = 8 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 40px 220px', alignItems: 'center', gap: 0 }}>
      <div style={{ display: 'grid', gap: 6 }}>
        {Array.from({ length: 8 }).map((_, i) => {
          const on = i < active;
          return (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '96px 1fr 96px', alignItems: 'center', gap: 10, fontSize: 'var(--size-caption)', opacity: on ? 1 : 0.4 }}>
              <span style={{ fontFamily: 'var(--font-cjk)', color: 'var(--text-secondary)' }}>窗單元 {i + 1}</span>
              <span style={{ height: 1, background: on ? 'var(--grid-500)' : 'var(--border-default)' }}></span>
              <span style={{ fontFamily: 'var(--font-mono)', padding: '4px 8px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', textAlign: 'center' }}>MPPT {i + 1}</span>
            </div>
          );
        })}
      </div>
      <div style={{ alignSelf: 'stretch', display: 'grid', placeItems: 'center', color: 'var(--text-muted)' }}><DIcon name="arrow-right" size={18} /></div>
      <div style={{ background: 'var(--surface-ink)', color: 'var(--white)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', borderTop: '3px solid var(--accent)' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--size-title)' }}>SPB</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: 'var(--ink-300)', marginTop: 8, lineHeight: 1.8 }}>16S LFP<br />52 V bus<br />MCU NXP S32K144</div>
      </div>
    </div>
  );
}

Object.assign(window, { WindowUnit, SystemFlow, MpptChannels });