/* ============================================================
   Shared UI: PhoneFrame, StatusBar, TabBar, BrandLockup
   ============================================================ */
const { useState, useEffect, useRef } = React;

function StatusBar() {
  return (
    <div className="statusbar">
      <span>9:41</span>
      <div className="sb-right">
        <Icon name="signal" size={17} color="#EFECEC" />
        <Icon name="wifi" size={17} color="#EFECEC" />
        <Battery />
      </div>
    </div>
  );
}

/* Phone shell. children = the app body (between status bar and optional tabbar).
   tabbar = optional react node rendered pinned at the bottom (inside screen). */
function PhoneFrame({ children }) {
  return (
    <div className="phone">
      <div className="island" />
      <div className="phone-screen">
        <StatusBar />
        {children}
      </div>
      <div className="home-ind" />
    </div>
  );
}

/* Brand lockup used on login/register/splash */
function BrandLockup({ size = 'lg', tagline = true }) {
  const big = size === 'lg';
  const d = big ? 92 : 70;
  return (
    <div className="col" style={{ alignItems: 'center', textAlign: 'center' }}>
      <img src="assets/logo-mark.png" alt="GuitarFabrik" style={{
        width: d, height: d, marginBottom: 18, borderRadius: '50%',
        boxShadow: '0 10px 30px -8px rgba(201,168,76,.5)',
      }} />
      <div style={{ fontSize: big ? 30 : 25, fontWeight: 800, letterSpacing: 1, color: 'var(--text)' }}>
        GuitarFabrik
      </div>
      <div className="brand-academy" style={{ marginTop: 3 }}>ACADEMY</div>
      {tagline && (
        <div style={{ marginTop: 12, fontSize: 14.5, fontStyle: 'italic', color: 'var(--text-2)' }}>
          Siente la música aquí
        </div>
      )}
    </div>
  );
}

/* Bottom tab bar */
function TabBar({ active, onTab, tabs }) {
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button key={t.key} className={'tab' + (active === t.key ? ' on' : '')}
          onClick={() => onTab(t.key)}>
          <div style={{ position: 'relative' }}>
            <Icon name={t.icon} size={24} stroke={active === t.key ? 2.2 : 1.9} />
            {t.badge > 0 && (
              <span style={{
                position: 'absolute', top: -5, right: -8, background: 'var(--gold)',
                color: '#1c1a16', fontSize: 10, fontWeight: 800, minWidth: 16, height: 16,
                borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: '0 4px', border: '2px solid var(--surface)',
              }}>{t.badge}</span>
            )}
          </div>
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
}

/* Text input row with icon + optional eye toggle */
function Field({ icon, type = 'text', placeholder, value, onChange, eye = false }) {
  const [show, setShow] = useState(false);
  const realType = eye ? (show ? 'text' : 'password') : type;
  return (
    <div className="field">
      {icon && <Icon name={icon} size={20} />}
      <input type={realType} placeholder={placeholder} value={value}
        onChange={e => onChange(e.target.value)} />
      {eye && (
        <button onClick={() => setShow(s => !s)} style={{ display: 'flex', padding: 4 }}>
          <Icon name={show ? 'eyeOff' : 'eye'} size={20} color="var(--muted)" />
        </button>
      )}
    </div>
  );
}

/* Topbar inside a screen with optional back button + title */
function ScreenHeader({ title, sub, onBack, right }) {
  return (
    <div className="row" style={{ alignItems: 'center', gap: 12, padding: '6px 20px 14px' }}>
      {onBack && (
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12, flex: 'none',
          background: 'var(--card)', border: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="back" size={20} color="var(--text)" />
        </button>
      )}
      <div className="col" style={{ flex: 1, minWidth: 0 }}>
        {sub && <div style={{ fontSize: 12, color: 'var(--text-2)' }}>{sub}</div>}
        <div style={{ fontSize: 19, fontWeight: 700 }}>{title}</div>
      </div>
      {right}
    </div>
  );
}

Object.assign(window, { StatusBar, PhoneFrame, BrandLockup, TabBar, Field, ScreenHeader });