/* global React */

const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// Top bar
// ============================================================
const TopBar = ({ crumbs, onHome, status }) => (
  <div className="topbar">
    <div className="brand" onClick={onHome}>
      <div className="brand-mark"></div>
      <div className="brand-name">AM<b>/</b>FM <span style={{color:'var(--text-secondary)'}}>Telecom Lab</span></div>
    </div>
    {crumbs && crumbs.length > 0 && (
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.length - 1 ? 'here' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
    )}
    <div className="topbar-status">
      {status}
      <span className="status-pill">
        <span className="dot"></span>
        <span>SIGNAL · LIVE</span>
      </span>
    </div>
  </div>
);

// ============================================================
// Page wrapper
// ============================================================
const Page = ({ title, eyebrow, sub, narrow, actions, children }) => (
  <div className={`page ${narrow ? 'page-narrow' : ''}`}>
    {(eyebrow || title) && (
      <div className="row between" style={{ marginBottom: 32, alignItems: 'flex-start' }}>
        <div>
          {eyebrow && <div className="eyebrow">{eyebrow}</div>}
          {title && <h1 className="page-title">{title}</h1>}
          {sub && <div className="page-sub">{sub}</div>}
        </div>
        {actions && <div className="row">{actions}</div>}
      </div>
    )}
    {children}
  </div>
);

// ============================================================
// Scope (oscilloscope) frame
// ============================================================
const Scope = ({ label, color = 'var(--cyan)', height = 140, children }) => (
  <div className="scope" style={{ height }}>
    <div className="scope-grid"></div>
    <div className="scope-label">
      <span className="ch-dot" style={{ background: color, boxShadow: `0 0 8px ${color}` }}></span>
      {label}
    </div>
    {children}
  </div>
);

// ============================================================
// Footer nav (lesson navigation)
// ============================================================
const LessonFooter = ({ onPrev, onNext, prevLabel, nextLabel, onMenu }) => (
  <div className="row between" style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border-subtle)' }}>
    {onPrev ? (
      <button className="btn btn-ghost" onClick={onPrev}>← {prevLabel || 'Προηγούμενο'}</button>
    ) : <span />}
    <button className="btn btn-ghost" onClick={onMenu}>Πίσω στο μενού</button>
    {onNext ? (
      <button className="btn btn-primary" onClick={onNext}>{nextLabel || 'Επόμενο'} →</button>
    ) : <span />}
  </div>
);

Object.assign(window, { TopBar, Page, Scope, LessonFooter });