/* =========================================================================
   DR. BANANA CLUB — MEMBERSHIP APP KIT · SCREENS
   Six surfaces — Home, Events, Node, Vault, Perks, Unlocks. Copy / data
   lifted 1:1 from canonical source (FILE 029). Both theatres handled via
   a single `dark` prop per screen.
   ========================================================================= */

/* Shared color helpers so we don't repeat ternaries everywhere */
const t = (dark) => ({
  bg: dark ? 'var(--db-d-bg)' : 'var(--db-paper)',
  surface: dark ? 'var(--db-d-surface)' : 'var(--db-cream)',
  elevated: dark ? 'var(--db-d-elevated)' : 'var(--db-cream)',
  ink: dark ? 'var(--db-d-ink)' : 'var(--db-ink)',
  ink2: dark ? 'var(--db-d-ink-2)' : 'var(--db-ink-2)',
  graphite: dark ? 'var(--db-d-graphite)' : 'var(--db-graphite)',
  silver: dark ? 'var(--db-d-silver)' : 'var(--db-silver)',
  hairline: dark ? 'var(--db-d-hairline)' : 'var(--db-hairline)',
});

/* =========================================================================
   01 · HOME
   ========================================================================= */
const HomeScreen = ({ dark, onNav, onDetail }) => {
  const c = t(dark);
  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />

      <div style={{ padding: '20px 0 18px', borderBottom: `1px solid ${c.hairline}` }}>
        <div style={kicker(c)}>MEMBER RECOGNIZED</div>
        <div
          style={{
            marginTop: 4,
            fontFamily: 'var(--font-sans-narrow)',
            fontWeight: 700,
            fontSize: 34,
            lineHeight: 1,
            letterSpacing: '-0.02em',
            color: c.ink,
          }}
        >
          Rodrigo Nogueira
        </div>
        <div
          style={{
            marginTop: 12,
            display: 'inline-flex',
            gap: 8,
            alignItems: 'baseline',
            padding: '6px 10px',
            border: `1px solid ${c.ink}`,
            borderRadius: 2,
          }}
        >
          <span style={{ ...mono(c), color: c.ink }}>TIER 03 /</span>
          <span
            style={{
              fontFamily: 'var(--font-serif-italic)',
              fontStyle: 'italic',
              fontSize: 17,
              color: c.ink,
            }}
          >
            Inner Circle
          </span>
        </div>
      </div>

      <div style={{ padding: '18px 0', borderBottom: `1px solid ${c.hairline}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', ...mono(c) }}>
          <span>ACCESS EVOLVING</span>
          <span>1,247 PT</span>
        </div>
        <SegmentedBar filled={8} total={10} dark={dark} />
        <div
          style={{
            fontSize: 14,
            lineHeight: 1.5,
            color: c.graphite,
            marginTop: 2,
          }}
        >
          You are{' '}
          <em
            style={{
              fontFamily: 'var(--font-serif-italic)',
              fontStyle: 'italic',
              color: c.ink,
            }}
          >
            78% closer
          </em>{' '}
          to the next tier.{' '}
          <span style={{ ...mono(c), fontSize: 11 }}>
            253 PT TO <span style={{ color: c.ink }}>RESIDENT</span>.
          </span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '14px 0', borderBottom: `1px solid ${c.hairline}` }}>
        <HomeCard dark={dark} kicker="NEXT UNLOCK" body="Backroom access" foot="+ 253 PT" />
        <HomeCard
          dark={dark}
          kicker="TONIGHT"
          body="Drop 1.0 opening"
          foot="23:00 · PASS READY"
          accent
          onClick={() => onDetail && onDetail({ kind: 'tonight' })}
        />
      </div>

      <div style={{ padding: '14px 0 8px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', ...mono(c), marginBottom: 8 }}>
          <span>LEDGER · LAST 14d</span>
          <span>+ 340 PT</span>
        </div>
        {[
          ['19.04', 'Residency · night 08', '+ 120'],
          ['12.04', 'Bar credit spent', '+ 80'],
          ['08.04', 'Guest pass used', '+ 60'],
          ['03.04', 'Vault drop · Nightshift', '+ 80'],
        ].map(([d, t, p], i) => (
          <div
            key={i}
            style={{
              display: 'grid',
              gridTemplateColumns: '52px 1fr auto',
              gap: 10,
              padding: '10px 0',
              borderTop: i === 0 ? 'none' : `1px dashed ${c.hairline}`,
              alignItems: 'baseline',
            }}
          >
            <span style={{ ...mono(c), color: c.graphite }}>{d}</span>
            <span style={{ fontSize: 14, color: c.ink2 }}>{t}</span>
            <span style={{ ...mono(c), color: c.graphite }}>{p}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const HomeCard = ({ dark, kicker, body, foot, accent, onClick }) => {
  const c = t(dark);
  const Tag = onClick ? 'button' : 'div';
  const buttonProps = onClick ? { type: 'button', onClick } : {};
  return (
    <Tag
      {...buttonProps}
      style={{
        position: 'relative',
        padding: '12px 12px 10px',
        background: c.surface,
        border: `1px solid ${accent ? 'var(--db-acid)' : c.hairline}`,
        borderRadius: 2,
        minHeight: 90,
        display: 'flex',
        flexDirection: 'column',
        textAlign: 'left',
        font: 'inherit',
        color: 'inherit',
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      {accent && (
        <span
          style={{
            position: 'absolute',
            top: 0,
            right: 0,
            width: 16,
            height: 16,
            background: 'var(--db-acid)',
            clipPath: 'polygon(100% 0, 0 0, 100% 100%)',
          }}
        />
      )}
      <div style={mono(c)}>{kicker}</div>
      <div
        style={{
          marginTop: 6,
          flex: 1,
          fontFamily: 'var(--font-sans-narrow)',
          fontWeight: 600,
          fontSize: 18,
          lineHeight: 1.1,
          letterSpacing: '-0.01em',
          color: c.ink,
        }}
      >
        {body}
      </div>
      <div style={{ ...mono(c), marginTop: 6 }}>{foot}</div>
    </Tag>
  );
};

/* =========================================================================
   02 · EVENTS
   ========================================================================= */
const EventsScreen = ({ dark, onNav, onDetail }) => {
  const c = t(dark);
  const events = window.EVENTS;
  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />
      <ScreenHead kicker="§ AGENDA" title="Next four" meta="04 EVENTS · 02 MONTHS" dark={dark} />
      <div style={{ paddingTop: 8, paddingBottom: 8 }}>
        {events.map((e, i) => (
          <button
            type="button"
            key={i}
            onClick={() => onDetail && onDetail({ kind: 'event', id: i })}
            style={{
              display: 'grid',
              gridTemplateColumns: '76px 1fr',
              gap: 14,
              padding: '16px 0',
              background: 'transparent',
              border: 0,
              borderBottom: `1px solid ${c.hairline}`,
              width: '100%',
              textAlign: 'left',
              cursor: 'pointer',
              font: 'inherit',
              color: 'inherit',
            }}
          >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ ...mono(c), color: c.ink }}>{e.date}</span>
              <span style={{ ...mono(c), color: c.graphite }}>{e.time}</span>
            </div>
            <div>
              <div
                style={{
                  fontFamily: 'var(--font-sans-narrow)',
                  fontWeight: 700,
                  fontSize: 22,
                  lineHeight: 1,
                  letterSpacing: '-0.01em',
                  color: c.ink,
                }}
              >
                {e.title}
              </div>
              <div
                style={{
                  marginTop: 6,
                  fontFamily: 'var(--font-serif-italic)',
                  fontStyle: 'italic',
                  fontSize: 14,
                  color: c.ink2,
                }}
              >
                {e.artist}
              </div>
              <EventTag variant={e.variant} label={e.tag} dark={dark} />
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};

const EventTag = ({ variant, label, dark }) => {
  const c = t(dark);
  const map = {
    accent: { bg: 'var(--db-acid)', fg: 'var(--db-ink)', border: 'var(--db-acid)' },
    light: { bg: 'transparent', fg: c.ink, border: c.ink },
    secret: { bg: c.ink, fg: dark ? 'var(--db-d-bg)' : 'var(--db-paper)', border: c.ink },
    muted: { bg: 'transparent', fg: c.graphite, border: c.hairline },
  }[variant];
  return (
    <span
      style={{
        display: 'inline-block',
        marginTop: 10,
        padding: '4px 8px',
        background: map.bg,
        color: map.fg,
        border: `1px solid ${map.border}`,
        borderRadius: 2,
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
      }}
    >
      {label}
    </span>
  );
};

/* =========================================================================
   03 · NODE (NFC)
   ========================================================================= */
const NodeScreen = ({ dark, onNav }) => {
  const c = t(dark);
  const [tapped, setTapped] = React.useState(false);
  React.useEffect(() => {
    if (!tapped) return;
    const id = setTimeout(() => setTapped(false), 1800);
    return () => clearTimeout(id);
  }, [tapped]);

  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />

      <div style={{ padding: '12px 0 10px', display: 'flex', justifyContent: 'space-between' }}>
        <span style={mono(c)}>NODE // 0x2A7F</span>
        <span style={{ ...mono(c), color: tapped ? 'var(--db-acid)' : c.ink }}>
          ● {tapped ? 'CONTACT' : 'ONLINE'}
        </span>
      </div>

      <div
        style={{
          flex: 1,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
        }}
      >
        {[3, 2, 1].map((r) => (
          <span
            key={r}
            style={{
              position: 'absolute',
              width: 60 + r * 60,
              height: 60 + r * 60,
              border: `1px solid ${c.hairline}`,
              borderRadius: '50%',
              opacity: tapped ? 0.9 - r * 0.2 : 0.6 - r * 0.15,
              transition: 'opacity 300ms ease, transform 600ms ease',
              transform: tapped ? `scale(${1 + r * 0.06})` : 'scale(1)',
            }}
          />
        ))}
        <button
          onClick={() => setTapped(true)}
          style={{
            position: 'relative',
            width: 140,
            height: 140,
            borderRadius: '50%',
            border: `1px solid ${c.ink}`,
            background: tapped ? 'var(--db-acid)' : c.surface,
            color: tapped ? 'var(--db-ink)' : c.ink,
            cursor: 'pointer',
            transition: 'background 200ms ease',
            fontFamily: 'var(--font-mono)',
            fontSize: 10,
            letterSpacing: '0.12em',
            textTransform: 'uppercase',
          }}
        >
          <span style={{ display: 'block', marginBottom: 4 }}>◉</span>
          {tapped ? 'READING' : 'TAP'}
        </button>
      </div>

      <div style={{ textAlign: 'center', paddingBottom: 18 }}>
        <div style={{ ...mono(c), color: c.graphite }}>ACCESS NODE READY</div>
        <div
          style={{
            fontFamily: 'var(--font-sans-narrow)',
            fontWeight: 700,
            fontSize: 26,
            lineHeight: 1,
            letterSpacing: '-0.02em',
            color: c.ink,
            margin: '6px 0 4px',
          }}
        >
          Hold near <em style={{ fontFamily: 'var(--font-serif-italic)' }}>any reader</em>
        </div>
        <div style={{ fontSize: 13, color: c.graphite }}>
          Door · bar · booth · backroom — same node.
        </div>
      </div>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          borderTop: `1px solid ${c.hairline}`,
          padding: '10px 0 8px',
          ...mono(c),
        }}
      >
        <span>MEMBER NO. 023</span>
        <span>●</span>
        <span>SIG 4F:8A:22:E1</span>
      </div>
    </div>
  );
};

/* =========================================================================
   04 · VAULT
   ========================================================================= */
const VaultScreen = ({ dark, onNav, onDetail }) => {
  const c = t(dark);
  const [chip, setChip] = React.useState('ALL');
  const items = window.VAULT_ITEMS;
  const filtered = chip === 'ALL' ? items : items.filter((i) => i.kind === chip);
  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />
      <ScreenHead kicker="§ VAULT" title="Private archive" meta="47 ITEMS · RESTRICTED" dark={dark} />
      <div style={{ display: 'flex', gap: 6, padding: '14px 0', flexWrap: 'wrap' }}>
        {['ALL', 'SET', 'FRAGMENT', 'PLAYLIST', 'DOC'].map((x) => {
          const on = chip === x;
          return (
            <button
              key={x}
              onClick={() => setChip(x)}
              style={{
                padding: '5px 9px',
                background: on ? c.ink : 'transparent',
                color: on ? (dark ? 'var(--db-d-bg)' : 'var(--db-paper)') : c.ink,
                border: `1px solid ${on ? c.ink : c.hairline}`,
                borderRadius: 2,
                cursor: 'pointer',
                fontFamily: 'var(--font-mono)',
                fontSize: 10,
                letterSpacing: '0.08em',
              }}
            >
              {x}
            </button>
          );
        })}
      </div>
      <div style={{ paddingBottom: 80 }}>
        {filtered.map((v) => {
          const realId = items.indexOf(v);
          return (
            <button
              type="button"
              key={realId}
              onClick={() => onDetail && onDetail({ kind: 'vault', id: realId })}
              style={{
                display: 'grid',
                gridTemplateColumns: '72px 1fr auto',
                gap: 12,
                alignItems: 'baseline',
                padding: '12px 0',
                background: 'transparent',
                border: 0,
                borderTop: `1px dashed ${c.hairline}`,
                width: '100%',
                textAlign: 'left',
                cursor: 'pointer',
                font: 'inherit',
                color: 'inherit',
              }}
            >
              <span style={{ ...mono(c), color: c.ink }}>{v.kind}</span>
              <div>
                <div
                  style={{
                    fontFamily: 'var(--font-sans-narrow)',
                    fontWeight: 600,
                    fontSize: 17,
                    lineHeight: 1.1,
                    letterSpacing: '-0.01em',
                    color: c.ink,
                  }}
                >
                  {v.title}
                </div>
                <div style={{ fontSize: 12, color: c.graphite, marginTop: 2 }}>{v.meta}</div>
              </div>
              <span style={{ ...mono(c), color: c.graphite }}>{v.year}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

/* =========================================================================
   05 · PERKS (Benefits)
   ========================================================================= */
const PerksScreen = ({ dark, onNav }) => {
  const c = t(dark);
  const perks = [
    { kicker: 'B/01', title: 'Priority access', state: 'ACTIVE', note: 'Skip queue · always', variant: 'active' },
    { kicker: 'B/02', title: '−20% bar credit', state: 'ACTIVE', note: 'Resets monthly', variant: 'active' },
    { kicker: 'B/03', title: 'Guest pass +1', state: 'ACTIVE', note: '1 of 2 remaining', variant: 'active' },
    { kicker: 'B/04', title: 'Secret events', state: 'ACTIVE', note: 'Invited only', variant: 'accent' },
    { kicker: 'B/05', title: 'Residency seat', state: 'LOCKED', note: 'Unlocks at Resident tier', variant: 'locked' },
  ];
  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />
      <ScreenHead kicker="§ BENEFITS" title="Perk tokens" meta="05 TOTAL · 04 ACTIVE" dark={dark} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '14px 0 8px' }}>
        {perks.map((p) => {
          const isAccent = p.variant === 'accent';
          const isLocked = p.variant === 'locked';
          return (
            <div
              key={p.kicker}
              style={{
                position: 'relative',
                padding: '12px 14px',
                background: isLocked ? 'transparent' : c.surface,
                border: `1px solid ${isAccent ? 'var(--db-acid)' : isLocked ? c.hairline : c.hairline}`,
                borderStyle: isLocked ? 'dashed' : 'solid',
                borderRadius: 2,
                opacity: isLocked ? 0.55 : 1,
              }}
            >
              {isAccent && (
                <span
                  style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    width: 18,
                    height: 18,
                    background: 'var(--db-acid)',
                    clipPath: 'polygon(100% 0, 0 0, 100% 100%)',
                  }}
                />
              )}
              <div style={{ display: 'flex', justifyContent: 'space-between', ...mono(c) }}>
                <span>{p.kicker}</span>
                <span style={{ color: isLocked ? c.silver : isAccent ? 'var(--db-ink)' : c.ink }}>
                  {p.state}
                </span>
              </div>
              <div
                style={{
                  marginTop: 6,
                  fontFamily: 'var(--font-sans-narrow)',
                  fontWeight: 700,
                  fontSize: 22,
                  lineHeight: 1,
                  letterSpacing: '-0.02em',
                  color: c.ink,
                }}
              >
                {p.title}
              </div>
              <div style={{ fontSize: 13, color: c.graphite, marginTop: 4 }}>{p.note}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* =========================================================================
   06 · UNLOCKS
   ========================================================================= */
const UnlocksScreen = ({ dark, onNav }) => {
  const c = t(dark);
  const tiers = [
    { name: 'Inductee', state: 'cleared', items: ['App access', 'NFC provision', 'Event calendar'] },
    { name: 'Cult Member', state: 'cleared', items: ['Priority queue', 'Bar credit', 'Guest pass'] },
    { name: 'Inner Circle', state: 'current', items: ['Secret events', 'Vault access', 'Early lineup'] },
    { name: 'Resident', state: 'locked', items: ['Backroom key', 'Private booking', 'Residency night'] },
  ];
  return (
    <div style={screenBase(c)}>
      <TopMeta code="023" dark={dark} />
      <ScreenHead kicker="§ UNLOCKS" title="Layered access" meta="CURRENT · INNER CIRCLE" dark={dark} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '14px 0 8px' }}>
        {tiers.map((tier, i) => {
          const current = tier.state === 'current';
          const locked = tier.state === 'locked';
          const cleared = tier.state === 'cleared';
          return (
            <div
              key={tier.name}
              style={{
                padding: '12px 14px',
                background: current ? c.surface : 'transparent',
                border: `1px ${locked ? 'dashed' : 'solid'} ${
                  current ? 'var(--db-acid)' : c.hairline
                }`,
                borderRadius: 2,
                opacity: cleared ? 0.7 : 1,
              }}
            >
              <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
                <span style={mono(c)}>T/0{i + 1}</span>
                <span
                  style={{
                    flex: 1,
                    fontFamily: 'var(--font-serif-italic)',
                    fontStyle: 'italic',
                    fontSize: 20,
                    color: c.ink,
                  }}
                >
                  {tier.name}
                </span>
                <span
                  style={{
                    ...mono(c),
                    color: current ? 'var(--db-ink)' : c.graphite,
                    background: current ? 'var(--db-acid)' : 'transparent',
                    padding: current ? '2px 6px' : 0,
                    borderRadius: 2,
                  }}
                >
                  {cleared && 'CLEARED'}
                  {current && 'ACTIVE ACCESS'}
                  {locked && 'DORMANT'}
                </span>
              </div>
              <ul
                style={{
                  listStyle: 'none',
                  padding: 0,
                  margin: '10px 0 0',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 4,
                  filter: locked ? 'blur(4px)' : 'none',
                  opacity: locked ? 0.6 : 1,
                }}
              >
                {tier.items.map((item) => (
                  <li
                    key={item}
                    style={{
                      display: 'flex',
                      gap: 8,
                      alignItems: 'center',
                      fontSize: 14,
                      color: c.ink2,
                    }}
                  >
                    <span
                      style={{
                        width: 4,
                        height: 4,
                        borderRadius: '50%',
                        background: current ? 'var(--db-acid)' : c.graphite,
                      }}
                    />
                    <span>{locked ? item.replace(/./g, '█') : item}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* -----  style helpers  ----- */
function screenBase(c) {
  return {
    position: 'relative',
    width: '100%',
    minHeight: '100%',
    background: 'transparent',
    color: c.ink,
    fontFamily: 'var(--font-sans)',
    padding: '0 20px',
    boxSizing: 'border-box',
    WebkitFontSmoothing: 'antialiased',
  };
}
function mono(c) {
  return {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    color: c.graphite,
  };
}
function kicker(c) {
  return {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: c.silver,
  };
}

Object.assign(window, {
  HomeScreen,
  EventsScreen,
  NodeScreen,
  VaultScreen,
  PerksScreen,
  UnlocksScreen,
});
