// hf-admin.jsx — Admin shell (PUC-8 / PUC-9) hi-fi. Honestly empty + states.
const { HFScreen: AScreen, HFTopBar: ATopBar, HFAccountChip: AChip, HFBanner: ABanner,
  HFStateCard: AStateCard, HFStates: AStates, HF_H: A, HF_STORE: ASTORE, HF_DSC: ADS } = window;
const { Eyebrow: AEyebrow, Soul: ASoul } = ADS;

// storefront identity lockup — the admin's anchor
function StoreId({ size = 17 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 11 }}>
      <img src={window.HF_ASSET('markTile', 'assets/mark-tile.svg')} width={size + 7} height={size + 7} style={{ borderRadius: 7, display: 'block' }} alt="" />
      <span style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1.12 }}>
        <span style={{ fontFamily: A.disp, fontWeight: 700, fontSize: size, color: A.star, letterSpacing: '-0.01em' }}>{ASTORE}</span>
        <span style={{ fontFamily: A.body, fontSize: 11, color: A.mute }}>ecomm storefront</span>
      </span>
    </span>
  );
}

// the honest-empty centerpiece — intentional, not sparse
function EmptyHome({ compact = false }) {
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', padding: compact ? '40px 24px' : '0 64px', position: 'relative',
    }}>
      {/* faint constellation seal — one decorative mark, low alpha */}
      <div style={{ width: compact ? 64 : 76, height: compact ? 64 : 76, borderRadius: '50%', border: `1px solid ${A.hairCard}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 26, background: 'var(--wv-lilac-08)' }}>
        <img src={window.HF_ASSET('markGold', 'assets/mark-mono-gold.svg')} width={compact ? 30 : 36} height={compact ? 30 : 36} alt="" style={{ opacity: 0.9 }} />
      </div>
      <AEyebrow style={{ margin: '0 0 12px' }}>Your storefront</AEyebrow>
      <h1 style={{ fontFamily: A.disp, fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.04, fontSize: compact ? 30 : 42, color: A.star, margin: '0 0 16px' }}>{ASTORE}</h1>
      <p style={{ fontFamily: A.body, fontSize: compact ? 15 : 17, lineHeight: 1.6, color: A.soft, maxWidth: 460, margin: '0 0 28px', textWrap: 'pretty' }}>
        There's nothing to manage yet — and that's a finished state, not a missing one.
        Catalog, orders, and settings will appear here as ecomm grows.
      </p>
    </div>
  );
}

function HFAdmin({ device = 'desktop' }) {
  const desktop = device === 'desktop';
  return (
    <AScreen stars={false}>
      <ATopBar pad={desktop ? '0 36px' : '0 20px'} left={<StoreId size={desktop ? 17 : 15} />}
        right={desktop ? <AChip /> : <button className="signout">Sign out</button>} />
      <EmptyHome compact={!desktop} />
    </AScreen>
  );
}

function HFAdminStates() {
  return (
    <AStates>
      <AStateCard label="Loading" note="skeleton while /me resolves">
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 13 }}>
          <Skel w={56} h={56} r={28} />
          <Skel w={90} h={11} />
          <Skel w={180} h={26} />
          <Skel w={300} h={11} />
          <Skel w={260} h={11} />
        </div>
      </AStateCard>
      <AStateCard label="Session expired" note="PUC-9 · redirect to sign-in">
        <ABanner tone="info" title="Your session ended">
          For your security you've been signed out. <a className="lk" href="#">Sign in again →</a>
        </ABanner>
      </AStateCard>
      <AStateCard label="Account menu" note="PUC-9 · sign out">
        <div style={{ position: 'relative', height: 150, display: 'flex', justifyContent: 'flex-end' }}>
          <AChip menu />
        </div>
      </AStateCard>
    </AStates>
  );
}
function Skel({ w, h, r = 6 }) {
  return <div style={{ width: w, height: h, borderRadius: r, background: 'linear-gradient(90deg, rgba(237,234,255,.06), rgba(237,234,255,.12), rgba(237,234,255,.06))' }} />;
}

Object.assign(window, { HFAdmin, HFAdminStates });