// HIFA OIL Loyalty — screens: Nearby, Catalog, Profile, Settings, Menu

// ── shared: toggle, list row, tile ────────────────────────────
function Toggle({ on, onChange }) {
  return (
    <div onClick={() => onChange(!on)} style={{ width: 48, height: 28, borderRadius: 999, flexShrink: 0,
      background: on ? 'var(--hifa-gold)' : 'var(--surface-3)', padding: 3, cursor: 'pointer',
      transition: 'background .2s' }}>
      <div style={{ width: 22, height: 22, borderRadius: '50%', background: on ? 'var(--on-gold)' : '#fff',
        transform: on ? 'translateX(20px)' : 'translateX(0)', transition: 'transform .2s' }} />
    </div>
  );
}

function Row({ icon, title, detail, trailing, onClick, danger, last }) {
  return (
    <Pressable onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 16px',
      borderBottom: last ? 'none' : '1px solid var(--border)' }}>
      {icon && (
        <div style={{ width: 36, height: 36, borderRadius: 10, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: danger ? 'color-mix(in srgb, var(--danger) 16%, transparent)' : 'var(--surface-2)' }}>
          <Icon name={icon} size={19} color={danger ? 'var(--danger)' : 'var(--hifa-gold)'} />
        </div>
      )}
      <span className="t-body" style={{ flex: 1, fontWeight: 600, color: danger ? 'var(--danger)' : 'var(--text)' }}>{title}</span>
      {detail && <span className="t-small" style={{ color: 'var(--text-3)' }}>{detail}</span>}
      {trailing !== undefined ? trailing : <Icon name="chevron-right" size={18} color="var(--text-3)" />}
    </Pressable>
  );
}

function Group({ children }) {
  return <div style={{ background: 'var(--surface)', borderRadius: 'var(--r-card)', overflow: 'hidden',
    border: '1px solid var(--border)' }}>{children}</div>;
}

// ── Nearby (U blizini) ────────────────────────────────────────
function NearbyScreen() {
  return (
    <div style={{ padding: '0 0 24px' }}>
      {/* faux map */}
      <div style={{ height: 200, position: 'relative', overflow: 'hidden',
        background: 'repeating-linear-gradient(0deg, #1b1b18 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, #1b1b18 0 1px, transparent 1px 44px), #141412' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 80% at 40% 50%, rgba(244,164,30,0.10), transparent 70%)' }} />
        {[{ x: '32%', y: '44%', big: true }, { x: '62%', y: '30%' }, { x: '74%', y: '64%' }].map((p, i) => (
          <div key={i} style={{ position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%,-100%)' }}>
            <Icon name="map-pin" size={p.big ? 38 : 28} color="var(--hifa-gold)" fill="var(--hifa-gold)" stroke={0}
              style={{ filter: 'drop-shadow(0 4px 8px rgba(0,0,0,.5))' }} />
          </div>
        ))}
        <div style={{ position: 'absolute', right: 14, bottom: 14, width: 44, height: 44, borderRadius: 14,
          background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-card)' }}>
          <Icon name="navigation" size={20} color="var(--hifa-gold)" fill="var(--hifa-gold)" stroke={0} />
        </div>
      </div>

      <div style={{ padding: '18px 18px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <SectionTitle>Pumpe u blizini</SectionTitle>
        {HIFA.stations.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 13, background: 'var(--surface)', borderRadius: 'var(--r-card)',
            padding: 12, border: '1px solid var(--border)', boxShadow: 'var(--shadow-card)' }}>
            <div style={{ width: 92, height: 92, borderRadius: 16, flexShrink: 0, backgroundImage: `url(${s.img})`,
              backgroundSize: 'cover', backgroundPosition: 'center' }} />
            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="t-h3" style={{ color: 'var(--text)', fontSize: 15 }}>{s.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
                  <Icon name="clock" size={13} color="var(--text-3)" />
                  <span className="t-small" style={{ color: 'var(--text-3)', fontSize: 12 }}>{s.hours}</span>
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 9 }}>
                  {s.services.map(sv => <Icon key={sv} name={sv === 'fuel' ? 'fuel' : sv} size={15} color="var(--text-2)" />)}
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                <span className="t-small" style={{ color: 'var(--hifa-gold)', fontWeight: 700 }}>{s.distance} · {s.time}</span>
                <Pressable style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '7px 12px', borderRadius: 999,
                  background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
                  <Icon name="navigation" size={13} color="var(--hifa-gold)" />
                  <span className="t-label" style={{ fontSize: 10, color: 'var(--hifa-gold)' }}>Ruta</span>
                </Pressable>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Catalog (Katalog) ─────────────────────────────────────────
function CatalogScreen() {
  return (
    <div style={{ padding: '18px 18px 24px', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ borderRadius: 'var(--r-card)', padding: '20px 20px', background: 'var(--hifa-gold-grad)',
        color: 'var(--on-gold)', boxShadow: 'var(--shadow-gold)', position: 'relative', overflow: 'hidden' }}>
        <Icon name="gift" size={120} color="rgba(26,21,0,0.12)" style={{ position: 'absolute', right: -14, bottom: -22 }} />
        <div className="t-label" style={{ letterSpacing: '0.12em' }}>Akcijski katalog</div>
        <div className="t-h1" style={{ margin: '6px 0 4px' }}>Juni 2026.</div>
        <p className="t-small" style={{ margin: 0, fontWeight: 600, maxWidth: '78%' }}>Zamijenite litre za nagrade i HIFA proizvode.</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {HIFA.catalog.map((c, i) => (
          <div key={i} style={{ background: 'var(--surface)', borderRadius: 'var(--r-tile)', padding: 14,
            border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ height: 78, borderRadius: 12, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="package" size={34} color="var(--text-3)" stroke={1.5} />
            </div>
            <div className="t-small" style={{ color: 'var(--text)', fontWeight: 700, lineHeight: 1.3, minHeight: 34 }}>{c.name}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 9px', borderRadius: 999,
                background: 'color-mix(in srgb, var(--hifa-gold) 16%, transparent)' }}>
                <Icon name="flame" size={12} color="var(--hifa-amber)" fill="var(--hifa-amber)" stroke={0} />
                <span className="t-num" style={{ fontSize: 12, color: 'var(--hifa-gold)' }}>{c.litres} L</span>
              </span>
            </div>
          </div>
        ))}
      </div>

      <Button full variant="dark" icon="file-down">Preuzmi PDF katalog</Button>
    </div>
  );
}

// ── Profile (Moj profil) ──────────────────────────────────────
function ProfileScreen({ onTab }) {
  const u = HIFA.user;
  const tiles = [
    { label: 'Gorivo', sub: fmtL(u.fuel) + ' L', icon: 'fuel', primary: true },
    { label: 'Potražite naše', sub: 'benzinske pumpe', icon: 'map-pin', tab: 'nearby' },
    { label: 'Ostavite', sub: 'Vaš dojam', icon: 'star' },
    { label: 'Pogledajte', sub: 'pogodnosti', icon: 'badge-percent' },
  ];
  return (
    <div style={{ padding: '16px 18px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* balance + ring */}
      <div style={{ background: 'var(--surface)', borderRadius: 'var(--r-card)', padding: 20,
        border: '1px solid var(--border)', boxShadow: 'var(--shadow-card)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div className="t-num" style={{ fontSize: 34, color: 'var(--text)' }}>{u.available} <span style={{ fontSize: 20, color: 'var(--text-2)' }}>KM</span></div>
            <span style={{ display: 'inline-block', marginTop: 10, padding: '6px 16px', borderRadius: 999, background: 'var(--hifa-red)',
              color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, letterSpacing: '0.05em' }}>ISOMAX</span>
          </div>
          <Ring pct={u.pct} size={104} stroke={9}>
            <span className="t-num" style={{ fontSize: 21, color: 'var(--hifa-gold)' }}>{fmtPct(u.pct)}</span>
          </Ring>
        </div>
        <div style={{ marginTop: 18 }}><FuelBar value={u.fuel} max={u.fuelMax} /></div>
      </div>

      {/* tiers */}
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
        {HIFA.tiers.map((t, i) => {
          const p = typeof t.max === 'number' ? (t.val / t.max) * 100 : (t.val > 0 ? 100 : 0);
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <Ring pct={p} size={88} stroke={7} color={t.reached ? 'var(--hifa-gold)' : 'var(--text-3)'}>
                <span className="t-num" style={{ fontSize: 13, color: t.reached ? 'var(--hifa-gold)' : 'var(--text-2)' }}>{fmtL(t.val)}</span>
                <span className="t-small" style={{ fontSize: 9, color: 'var(--text-3)' }}>{t.max}</span>
              </Ring>
              <span className="t-label" style={{ fontSize: 9, color: t.reached ? 'var(--text)' : 'var(--text-3)', textAlign: 'center' }}>{t.name}</span>
            </div>
          );
        })}
      </div>

      {/* tiles */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {tiles.map((t, i) => (
          <Pressable key={i} onClick={() => t.tab && onTab(t.tab)} style={{ borderRadius: 'var(--r-tile)', padding: 18, minHeight: 124,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            background: t.primary ? 'var(--hifa-gold-grad)' : 'var(--surface)',
            border: t.primary ? 'none' : '1px solid var(--border)',
            boxShadow: t.primary ? 'var(--shadow-gold)' : 'var(--shadow-card)' }}>
            <Icon name={t.icon} size={30} color={t.primary ? 'var(--on-gold)' : 'var(--hifa-gold)'}
              fill={t.icon === 'star' && !t.primary ? 'var(--hifa-gold)' : (t.primary && t.icon === 'fuel' ? 'var(--on-gold)' : 'none')}
              stroke={t.icon === 'star' && !t.primary ? 0 : 2} />
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: t.primary ? 'var(--on-gold)' : 'var(--hifa-gold)' }}>{t.label}</div>
              <div className="t-small" style={{ fontWeight: 700, color: t.primary ? 'rgba(26,21,0,0.7)' : 'var(--text)' }}>{t.sub}</div>
            </div>
          </Pressable>
        ))}
      </div>
    </div>
  );
}

// ── Menu drawer content ───────────────────────────────────────
function MenuContent({ onClose, onLogout, onNav }) {
  const u = HIFA.user;
  const items = [
    { icon: 'newspaper', title: 'Novosti', sub: 'Pogledajte posljednje dodane vijesti' },
    { icon: 'fuel', title: 'Benzinske pumpe', sub: 'Spisak lokacija naših pumpi', tab: 'nearby' },
    { icon: 'spray-can', title: 'Autopraonice', sub: 'Lokacije naših autopraonica' },
    { icon: 'newspaper', title: 'Akcijski katalog', sub: 'Katalog za tekući mjesec', tab: 'catalog' },
    { icon: 'badge-percent', title: 'Pogodnosti kod partnera', sub: 'Akcije kod naših partnera' },
    { icon: 'circle-help', title: 'FAQ', sub: 'Najčešće postavljana pitanja' },
    { icon: 'star', title: 'Ocijenite nas', sub: 'Ostavite ocjenu u trgovini' },
    { icon: 'settings', title: 'Postavke aplikacije', sub: 'Profil i postavke', tab: 'settings' },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg)' }}>
      {/* gold header */}
      <div style={{ background: 'var(--hifa-gold-grad)', padding: '54px 22px 22px', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Ring pct={u.pct} size={76} stroke={7} color="#1A1500" track="rgba(26,21,0,0.18)">
            <span className="t-num" style={{ fontSize: 16, color: '#1A1500' }}>{fmtPct(u.pct)}</span>
          </Ring>
          <span style={{ padding: '7px 16px', borderRadius: 999, background: 'var(--hifa-red)', color: '#fff',
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, letterSpacing: '0.05em' }}>ISOMAX</span>
          <Pressable onClick={onLogout} style={{ width: 40, height: 40, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'rgba(26,21,0,0.12)' }}>
            <Icon name="power" size={20} color="#1A1500" stroke={2.4} />
          </Pressable>
        </div>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 9 }}>
          <Icon name="flame" size={18} color="#1A1500" fill="#1A1500" stroke={0} />
          <span className="t-num" style={{ fontSize: 17, color: '#1A1500' }}>{fmtL(u.fuel)} <span style={{ fontWeight: 600, fontSize: 14 }}>/ {u.fuelMax}</span></span>
        </div>
      </div>

      {/* items */}
      <div style={{ flex: 1, overflow: 'auto', padding: '8px 0' }}>
        {items.map((it, i) => (
          <Pressable key={i} onClick={() => it.tab ? onNav(it.tab) : onClose()} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 22px' }}>
            <Icon name={it.icon} size={22} color="var(--hifa-gold)" />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--text)', textTransform: 'uppercase', letterSpacing: '0.03em' }}>{it.title}</div>
              <div className="t-small" style={{ color: 'var(--text-3)', fontSize: 12 }}>{it.sub}</div>
            </div>
          </Pressable>
        ))}
      </div>

      {/* footer */}
      <div style={{ flexShrink: 0, padding: '16px 22px 28px', borderTop: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoMark size={42} />
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600, fontSize: 19, color: 'var(--text)' }}>Loyal is Royal</div>
        </div>
        <div className="t-small" style={{ color: 'var(--text-3)', marginTop: 14, fontSize: 11 }}>Verzija aplikacije 2.0.0</div>
      </div>
    </div>
  );
}

Object.assign(window, { Toggle, Row, Group, NearbyScreen, CatalogScreen, ProfileScreen, MenuContent });