// HIFA OIL Loyalty — screens: Login, Home, Card
const { useState } = React;

// ── shared primitives ─────────────────────────────────────────
function Field({ label, value, onChange, type = 'text', icon, trailing }) {
  const [focus, setFocus] = useState(false);
  return (
    <label style={{ display: 'block' }}>
      <span className="t-label" style={{ color: 'var(--text-3)', display: 'block', marginBottom: 8 }}>{label}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, height: 52, padding: '0 14px',
        borderRadius: 'var(--r-input)', background: 'var(--surface-2)',
        border: `1.5px solid ${focus ? 'var(--hifa-gold)' : 'var(--border)'}`, transition: 'border-color .15s' }}>
        {icon && <Icon name={icon} size={19} color="var(--text-3)" />}
        <input value={value} onChange={e => onChange && onChange(e.target.value)} type={type}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: 'var(--text)',
            fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500, minWidth: 0 }} />
        {trailing}
      </div>
    </label>
  );
}

function Button({ children, onClick, variant = 'primary', full, icon, size = 'md' }) {
  const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    height: size === 'lg' ? 54 : 48, padding: '0 22px', borderRadius: 'var(--r-button)',
    fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size === 'lg' ? 16 : 15,
    width: full ? '100%' : undefined, border: 'none' };
  const styles = {
    primary: { ...base, background: 'var(--hifa-gold-grad)', color: 'var(--on-gold)', boxShadow: 'var(--shadow-gold)' },
    dark: { ...base, background: 'var(--surface-2)', color: 'var(--text)', border: '1px solid var(--border)' },
    ghost: { ...base, background: 'transparent', color: 'var(--hifa-gold)' },
    danger: { ...base, background: 'transparent', color: 'var(--danger)', border: '1px solid color-mix(in srgb, var(--danger) 40%, transparent)' },
  };
  return (
    <Pressable onClick={onClick} style={styles[variant]}>
      {icon && <Icon name={icon} size={19} color="currentColor" />}
      {children}
    </Pressable>
  );
}

function SectionTitle({ children, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '0 0 14px' }}>
      <h2 className="t-h2" style={{ color: 'var(--hifa-gold)', margin: 0 }}>{children}</h2>
      {action && <Pressable onClick={onAction}><span className="t-small" style={{ color: 'var(--text-2)', fontWeight: 700 }}>{action}</span></Pressable>}
    </div>
  );
}

// ── Login ─────────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState('amar.hodzic@example.com');
  const [pw, setPw] = useState('isomax2026');
  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column',
      padding: '0 26px 30px', background: 'radial-gradient(120% 60% at 50% 0%, #221d0a 0%, var(--bg) 55%)' }}>
      <div style={{ flex: '0 0 auto', paddingTop: 64, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
          <LogoMark size={52} />
          <IsoMax height={42} />
        </div>
        <div className="t-label" style={{ color: 'var(--text-3)', marginTop: 16, letterSpacing: '0.30em' }}>LOYALTY CLUB</div>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600,
          fontSize: 24, color: 'var(--text)', marginTop: 10 }}>Loyal is Royal</div>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16, marginTop: 14 }}>
        <Field label="E-mail adresa" value={email} onChange={setEmail} icon="mail" />
        <Field label="Lozinka" value={pw} onChange={setPw} type="password" icon="lock"
          trailing={<Icon name="eye" size={18} color="var(--text-3)" />} />
        <div style={{ textAlign: 'right', marginTop: -4 }}>
          <span className="t-small" style={{ color: 'var(--text-2)', fontWeight: 600 }}>Zaboravili ste lozinku?</span>
        </div>
        <Button full size="lg" onClick={onLogin}>Prijavi se</Button>
      </div>

      <div style={{ textAlign: 'center', marginTop: 20 }}>
        <span className="t-small" style={{ color: 'var(--text-3)' }}>Nemate račun? </span>
        <span className="t-small" style={{ color: 'var(--hifa-gold)', fontWeight: 700 }}>Registrujte se</span>
      </div>
    </div>
  );
}

// ── Home (Početna) ────────────────────────────────────────────
function HomeScreen({ onTab, onNews, onTx }) {
  const u = HIFA.user;
  return (
    <div style={{ padding: '16px 18px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* hero */}
      <div style={{ borderRadius: 'var(--r-card)', overflow: 'hidden', position: 'relative',
        background: 'var(--surface)', boxShadow: 'var(--shadow-card)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(assets/photos/station-shop.jpg)',
          backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.32 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, var(--surface) 38%, transparent 92%)' }} />
        <div style={{ position: 'relative', padding: '20px 20px 22px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <LogoMark size={36} />
            <IsoMax height={26} />
          </div>
          <div className="t-label" style={{ color: 'var(--hifa-gold)', margin: '0 0 8px', letterSpacing: '0.14em' }}>LOYALTY CLUB</div>
          <p className="t-small" style={{ color: 'var(--text-2)', margin: 0, maxWidth: '74%' }}>
            Uživaj u pogodnostima i vrijednim nagradama ISOMAX Loyalty cluba.</p>
        </div>
      </div>

      {/* greeting + fuel */}
      <div style={{ background: 'var(--surface)', borderRadius: 'var(--r-card)', padding: 18,
        boxShadow: 'var(--shadow-card)', border: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <div>
            <div className="t-small" style={{ color: 'var(--text-3)' }}>Zdravo,</div>
            <div className="t-h2" style={{ color: 'var(--text)' }}>{u.firstName} 👋</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="t-small" style={{ color: 'var(--text-3)' }}>Raspoloživo</div>
            <div className="t-num" style={{ fontSize: 20, color: 'var(--hifa-gold)' }}>{u.available} KM</div>
          </div>
        </div>
        <FuelBar value={u.fuel} max={u.fuelMax} />
      </div>

      {/* news */}
      <div>
        <SectionTitle action="Sve vijesti" onAction={onNews}>Najnovije vijesti</SectionTitle>
        <div style={{ display: 'flex', gap: 14, overflowX: 'auto', margin: '0 -18px', padding: '0 18px 4px', scrollbarWidth: 'none' }}>
          {HIFA.news.map((n, i) => (
            <Pressable key={i} onClick={onNews} style={{ width: 232, flexShrink: 0 }}>
              <div style={{ borderRadius: 'var(--r-tile)', overflow: 'hidden', background: 'var(--surface)',
                boxShadow: 'var(--shadow-card)', border: '1px solid var(--border)' }}>
                <div style={{ height: 124, backgroundImage: `url(${n.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                <div style={{ padding: '12px 13px 14px' }}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
                    <span className="t-label" style={{ fontSize: 10, color: 'var(--hifa-red)' }}>{n.tag}</span>
                    <span className="t-small" style={{ color: 'var(--text-3)', fontSize: 11 }}>{n.date}</span>
                  </div>
                  <div className="t-small" style={{ color: 'var(--text)', fontWeight: 700, lineHeight: 1.35,
                    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{n.title}</div>
                </div>
              </div>
            </Pressable>
          ))}
        </div>
      </div>

      {/* transactions */}
      <div>
        <SectionTitle>Transakcije</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {HIFA.transactions.slice(0, 3).map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface)',
              borderRadius: 'var(--r-input)', padding: '13px 15px', border: '1px solid var(--border)' }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: t.type === 'earn' ? 'color-mix(in srgb, var(--hifa-gold) 18%, transparent)' : 'color-mix(in srgb, var(--hifa-red) 18%, transparent)' }}>
                <Icon name={t.type === 'earn' ? 'arrow-down-left' : 'arrow-up-right'} size={19}
                  color={t.type === 'earn' ? 'var(--hifa-gold)' : 'var(--hifa-red)'} stroke={2.4} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t-small" style={{ color: 'var(--text)', fontWeight: 700 }}>Račun #{t.id}</div>
                <div className="t-small" style={{ color: 'var(--text-3)', fontSize: 12 }}>{t.date}</div>
              </div>
              <span className="t-num" style={{ fontSize: 15, color: t.type === 'earn' ? 'var(--text)' : 'var(--text-3)' }}>
                {t.type === 'earn' ? '+' : '−'}{fmtL(t.litres)} L</span>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Button variant="dark" onClick={onTx} icon="receipt-text">Pogledaj sve transakcije</Button>
        </div>
      </div>
    </div>
  );
}

// ── Card (Kartica) ────────────────────────────────────────────
function CardScreen() {
  const u = HIFA.user;
  return (
    <div style={{ padding: '24px 22px 30px', display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'center' }}>
      <div style={{ textAlign: 'center' }}>
        <div className="t-label" style={{ color: 'var(--text-3)' }}>Digitalna kartica</div>
        <h2 className="t-h1" style={{ color: 'var(--text)', margin: '6px 0 0' }}>Vaša ISOMAX kartica</h2>
      </div>

      {/* membership card */}
      <div style={{ width: '100%', borderRadius: 22, padding: 22, color: 'var(--on-gold)',
        background: 'var(--hifa-gold-grad)', boxShadow: 'var(--shadow-gold)', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -30, top: -30, width: 150, height: 150, borderRadius: '50%',
          border: '18px solid rgba(255,255,255,0.16)' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <LogoMark size={38} />
          <span className="t-label" style={{ color: 'var(--hifa-red)', fontSize: 12, letterSpacing: '0.10em' }}>ISOMAX LOYALTY</span>
        </div>
        <div className="t-num" style={{ fontSize: 18, letterSpacing: '0.10em', margin: '30px 0 18px' }}>{u.card}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Član</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16 }}>{u.firstName} {u.lastName}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 10, fontWeight: 700, opacity: 0.7, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Stanje</div>
            <div className="t-num" style={{ fontSize: 16 }}>{fmtL(u.fuel)} L</div>
          </div>
        </div>
      </div>

      {/* QR + barcode */}
      <div style={{ background: '#fff', borderRadius: 22, padding: '18px 18px 20px', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
        <div className="t-label" style={{ color: 'var(--hifa-amber)', letterSpacing: '0.12em' }}>Skeniraj QR code</div>
        <div style={{ width: 172, height: 172, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="qr-code" size={168} color="#151518" stroke={0.6} />
        </div>
        <div className="t-small" style={{ color: '#5C584F', fontWeight: 600 }}>{u.email}</div>
        <div style={{ width: '100%', height: 1, background: 'rgba(20,17,12,0.10)', margin: '8px 0 4px' }} />
        <div className="t-label" style={{ color: '#8E8A7F', letterSpacing: '0.10em' }}>Broj ISOMAX Loyalty kartice</div>
        {/* faux barcode */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 1.5, height: 52, marginTop: 2 }}>
          {Array.from({ length: 52 }).map((_, i) => (
            <div key={i} style={{ width: (i * 7 % 3) + 1.5, height: '100%', background: '#151518',
              opacity: (i * 13 % 5) > 1 ? 1 : 0.0 }} />
          ))}
        </div>
        <div className="t-num" style={{ fontSize: 15, color: '#151518', letterSpacing: '0.08em' }}>{u.cardId}</div>
      </div>
      <p className="t-small" style={{ color: 'var(--text-3)', textAlign: 'center', margin: 0, maxWidth: 260 }}>
        Pokažite QR kod ili barkod na kasi prilikom točenja goriva ili kupovine.</p>
    </div>
  );
}

Object.assign(window, { Field, Button, SectionTitle, LoginScreen, HomeScreen, CardScreen });