/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// SHARED: Top Bar (persistent chrome)
// ============================================================
function LiveClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(now.getHours()).padStart(2, '0');
  const mm = String(now.getMinutes()).padStart(2, '0');
  const ss = String(now.getSeconds()).padStart(2, '0');
  return <div className="tb-clock">{hh}:{mm}<span style={{opacity:0.5}}>:{ss}</span></div>;
}

function TopBar({ deviceCount, onlineCount, alerts, lowStock, onHome, onDevices, onAlerts, onTweaks }) {
  const offline = deviceCount - onlineCount;
  return (
    <header className="topbar">
      <div className="tb-left">
        <div className="kfc-logo press" onClick={onHome}>
          <div className="mark">
            <img src="../logos/logos_kfc-white.png" alt="KFC" />
          </div>
          <div className="text">
            <span style={{letterSpacing:'1px'}}>Ar</span><span style={{color:'var(--kfc-gold)', fontStyle:'italic', letterSpacing:'0'}}>Dh</span>
            <small>KITCHEN INTELLIGENCE · v4.2</small>
          </div>
        </div>
      </div>
      <div className="tb-center">
        <div className="tb-loc">
          <span>STORE</span>
          <strong>CP-082 Connaught Pl.</strong>
        </div>
        <div className="tb-divider"></div>
        <div className="tb-shift"><span className="pulse"></span>EVENING SHIFT</div>
        <div className="tb-divider"></div>
        <LiveClock />
      </div>
      <div className="tb-right">
        <button className="tb-icon" onClick={onDevices} title="Discover devices">
          <span className="material-symbols-rounded">sensors</span>
          <span className={"badge" + (offline>0 ? "" : " gold")}>{deviceCount}</span>
        </button>
        <button className="tb-icon" onClick={onAlerts} title="Alerts">
          <span className="material-symbols-rounded">notifications_active</span>
          <span className="badge">{alerts}</span>
        </button>
        <button className="tb-icon" onClick={onTweaks} title="Tweaks &amp; Settings">
          <span className="material-symbols-rounded">settings</span>
        </button>
        <div className="tb-user">
          <div className="av">RK</div>
          <div className="name">
            <strong>Ravi K.</strong>
            <small>SHIFT MGR · ID 0182</small>
          </div>
        </div>
      </div>
    </header>
  );
}

// ============================================================
// SHARED: Subhead (back + title)
// ============================================================
function SubHead({ onBack, en, hi, stats }) {
  return (
    <div className="subhead">
      <button className="back-btn" onClick={onBack}>
        <span className="material-symbols-rounded">arrow_back</span>
        BACK
      </button>
      <div className="subhead-title">
        <div className="en">{en}</div>
        <div className="hi hindi-text">{hi}</div>
      </div>
      <div className="subhead-spacer"></div>
      {stats && stats.map((s,i)=>(
        <div key={i} className={"subhead-stat" + (s.urgent?" urgent":"")}>
          <div className="v">{s.v}</div>
          <div className="l">{s.l}</div>
        </div>
      ))}
    </div>
  );
}

// ============================================================
// SHARED: Confirm overlay
// ============================================================
function Confirm({ title, hi, body, onYes, onNo, danger }) {
  return (
    <div className="overlay" onClick={onNo}>
      <div className="confirm" onClick={e=>e.stopPropagation()}>
        <div className="icon" style={danger ? null : { background: 'var(--kfc-gold)' }}>
          <span className="material-symbols-rounded">{danger ? 'warning' : 'help'}</span>
        </div>
        <h2>{title}</h2>
        <div className="hi hindi-text">{hi}</div>
        {body && <p>{body}</p>}
        <div className="btn-row">
          <button className="btn-no" onClick={onNo}>
            <span className="material-symbols-rounded">close</span>
            NO <span className="hindi-text">/ नहीं</span>
          </button>
          <button className="btn-yes" onClick={onYes}>
            <span className="material-symbols-rounded">check</span>
            YES <span className="hindi-text">/ हाँ</span>
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SHARED: Food photo placeholder
// ============================================================
function FoodPhoto({ name, sub, className, style }) {
  return (
    <div className={"food-photo " + (className||"")} style={style}>
      <div className="label-stack">
        <div className="name">[{name}]</div>
        {sub && <div className="sub">{sub}</div>}
      </div>
    </div>
  );
}

// ============================================================
// SHARED: Circular timer ring
// ============================================================
function TimerRing({ remaining, total }) {
  const pct = Math.max(0, Math.min(1, remaining / total));
  const r = 28;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - pct);
  const cls = pct > 0.5 ? "" : pct > 0.2 ? "warn" : "urgent";
  const mins = Math.floor(remaining / 60);
  const secs = Math.floor(remaining % 60);
  return (
    <div className={"ring " + cls}>
      <svg viewBox="0 0 64 64">
        <circle className="bg" cx="32" cy="32" r={r} />
        <circle
          className="fg"
          cx="32" cy="32" r={r}
          strokeDasharray={c}
          strokeDashoffset={offset}
        />
      </svg>
      <div className="label">{mins}:{String(secs).padStart(2,'0')}</div>
    </div>
  );
}

// expose
Object.assign(window, { LiveClock, TopBar, SubHead, Confirm, FoodPhoto, TimerRing });