// Home screen — white theme.
// Structure: hero banner carousel (full-bleed, status bar + top chrome overlaid),
// next events, shortcuts.

const IBMEC_BLUE = '#1145ff';
const IBMEC_BLUE_DARK = '#0A33CC';
const IBMEC_YELLOW = '#FFD60A';
const IBMEC_YELLOW_DEEP = '#F5AC00';

const HERO_HEIGHT = 360; // px — full-bleed hero banner

// ---------- Top chrome overlaid on the hero ----------
const HomeTopChrome = ({ user, onProfile, onNotifications }) => (
  <div style={{
    position: 'absolute',
    top: 50, // below the iOS status bar
    left: 0, right: 0,
    padding: '10px 20px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    zIndex: 3,
  }}>
    <button onClick={onProfile} aria-label="Abrir perfil" style={{
      padding: 0, background: 'none', border: 'none', cursor: 'pointer',
      borderRadius: '50%',
      boxShadow: '0 4px 12px rgba(0,0,0,0.18)',
    }}>
      <Avatar user={user} size={40} />
    </button>

    <img
      src="assets/ibmec-logo-white.svg"
      alt="Ibmec"
      style={{ height: 22, width: 'auto', display: 'block', filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.25))' }}
    />

    <button onClick={onNotifications} aria-label="Notificações" style={{
      position: 'relative', width: 40, height: 40, borderRadius: 12,
      background: 'rgba(255,255,255,0.18)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      border: '1px solid rgba(255,255,255,0.3)',
      color: '#FFFFFF',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
    }}>
      <IconBell size={18} />
      <span style={{
        position: 'absolute', top: 7, right: 7,
        width: 8, height: 8, borderRadius: '50%',
        background: IBMEC_YELLOW, border: '1.5px solid rgba(255,255,255,0.6)',
      }} />
    </button>
  </div>
);

// ---------- Hero banner carousel — full-bleed, no rounding ----------
const HeroBannerCarousel = () => {
  const [idx, setIdx] = React.useState(0);
  const banners = [
    { tone: 'blue',   label: 'Banner 1' },
    { tone: 'yellow', label: 'Banner 2' },
    { tone: 'dark',   label: 'Banner 3' },
  ];
  const stripe = (color) =>
    `repeating-linear-gradient(135deg, ${color} 0 14px, transparent 14px 28px)`;

  const stylesByTone = {
    blue:   { bg: IBMEC_BLUE,      stripe: stripe('rgba(255,255,255,0.10)'), fg: '#FFFFFF' },
    yellow: { bg: IBMEC_YELLOW,    stripe: stripe('rgba(10,10,10,0.06)'),    fg: '#0A0A0A' },
    dark:   { bg: IBMEC_BLUE_DARK, stripe: stripe('rgba(255,255,255,0.10)'), fg: '#FFFFFF' },
  };

  return (
    <div style={{
      position: 'relative',
      height: HERO_HEIGHT,
      width: '100%',
      overflow: 'hidden',
    }}>
      <div
        style={{
          display: 'flex',
          height: '100%',
          overflowX: 'auto',
          scrollSnapType: 'x mandatory',
          scrollbarWidth: 'none',
        }}
        onScroll={(e) => {
          const w = e.currentTarget.clientWidth;
          setIdx(Math.round(e.currentTarget.scrollLeft / w));
        }}
      >
        {banners.map((b, i) => {
          const s = stylesByTone[b.tone];
          return (
            <div key={i} style={{
              minWidth: '100%',
              height: '100%',
              scrollSnapAlign: 'start',
              position: 'relative', overflow: 'hidden',
              background: s.bg,
              backgroundImage: s.stripe,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: s.fg,
            }}>
              {/* subtle bottom fade so chrome reads on lighter banners */}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 100%)',
                pointerEvents: 'none',
              }} />
              <div style={{ textAlign: 'center', position: 'relative' }}>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: '0.18em', opacity: 0.7,
                  fontWeight: 600, marginBottom: 6,
                }}>HERO IMAGE</div>
                <div style={{
                  fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em',
                }}>{b.label}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Pagination dots — bottom of hero */}
      <div style={{
        position: 'absolute', bottom: 16, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 6,
        pointerEvents: 'none',
      }}>
        {banners.map((_, i) => (
          <span key={i} style={{
            width: idx === i ? 22 : 6, height: 6, borderRadius: 3,
            background: idx === i ? '#FFFFFF' : 'rgba(255,255,255,0.5)',
            transition: 'all .25s ease',
            boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
          }} />
        ))}
      </div>
    </div>
  );
};

// ---------- Next events ----------
const NextEvents = ({ events, subscribed, onOpenEvent, onSeeAll }) => {
  const upcoming = events.slice(0, 3);
  return (
    <div style={{ padding: '20px 0 8px' }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '0 20px 10px',
      }}>
        <div>
          <div className="mono" style={{
            fontSize: 10, color: '#7A8094', letterSpacing: '0.14em',
            marginBottom: 4, fontWeight: 600,
          }}>HOJE</div>
          <h3 style={{
            fontSize: 20, margin: 0, fontWeight: 600,
            letterSpacing: '-0.02em', color: '#0A0A0A',
          }}>Próximos eventos</h3>
        </div>
        <button onClick={onSeeAll} style={{
          background: 'none', border: 'none', color: IBMEC_BLUE,
          font: 'inherit', fontSize: 13, fontWeight: 600,
          cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4,
        }}>Ver tudo <IconChevronRight size={14} /></button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {upcoming.map((ev, i) => {
          const sub = subscribed.has(ev.id);
          return (
            <button key={ev.id} onClick={() => onOpenEvent(ev)} style={{
              display: 'flex', gap: 12, padding: '14px 20px', alignItems: 'center',
              background: 'none', border: 'none',
              borderTop: i === 0 ? '1px solid #EEF0F4' : 'none',
              borderBottom: '1px solid #EEF0F4',
              cursor: 'pointer', font: 'inherit',
              color: '#0A0A0A', textAlign: 'left', width: '100%',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 12, flexShrink: 0,
                background: sub ? IBMEC_YELLOW : '#EEF1FB',
                border: sub ? 'none' : '1px solid #DCE2F5',
                color: sub ? '#0A0A0A' : IBMEC_BLUE,
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center',
              }}>
                <span className="mono" style={{
                  fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', opacity: 0.75,
                }}>{ev.time.split(':')[0]}h</span>
                <span style={{
                  fontSize: 16, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1,
                }}>{ev.time.split(':')[1]}</span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 14, fontWeight: 600, marginBottom: 3, lineHeight: 1.25,
                  overflow: 'hidden', textOverflow: 'ellipsis',
                  display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                }}>{ev.title}</div>
                <div className="mono" style={{
                  fontSize: 10, color: '#7A8094', letterSpacing: '0.06em',
                }}>
                  {ev.track.toUpperCase()} · {ev.room}
                </div>
              </div>
              {sub && <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: IBMEC_YELLOW, color: '#0A0A0A',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}><IconCheck size={12} stroke={3} /></span>}
            </button>
          );
        })}
      </div>
    </div>
  );
};

// ---------- Shortcuts ----------
// Row of 3: Agenda · Quiz · Idomed.
// Below: full-width Ibmec banner (highlighted).
const IDOMED_TEAL_HOME = '#0FA89B';

const Shortcuts = ({ onAgenda, onQuiz, onIdomed, onIbmec }) => {
  const items = [
    { Icon: IconCalendar, label: 'Minha agenda', hint: 'Eventos inscritos',  onClick: onAgenda, accent: IBMEC_BLUE,        bg: '#EEF1FB' },
    { Icon: IconTrophy,   label: 'Quiz',         hint: 'Pontue e concorra',  onClick: onQuiz,   accent: IBMEC_YELLOW_DEEP, bg: '#FFF8DD' },
    { Icon: IconHeart,    label: 'A Idomed',     hint: 'Medicina e saúde',   onClick: onIdomed, accent: IDOMED_TEAL_HOME,  bg: '#E2F6F4' },
  ];
  return (
    <div style={{ padding: '18px 20px 8px' }}>
      <div className="mono" style={{
        fontSize: 10, color: '#7A8094', letterSpacing: '0.14em',
        marginBottom: 10, fontWeight: 600,
      }}>ATALHOS</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {items.map((it, i) => (
          <button key={i} onClick={it.onClick} style={{
            background: '#FFFFFF', border: '1px solid #E6E8EE',
            borderRadius: 14, padding: '14px 12px',
            cursor: 'pointer', font: 'inherit',
            color: '#0A0A0A', textAlign: 'left',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            <span style={{
              width: 34, height: 34, borderRadius: 10,
              background: it.bg, color: it.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><it.Icon size={16} stroke={2} /></span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{it.label}</div>
              <div style={{ fontSize: 10.5, color: '#7A8094', marginTop: 2 }}>{it.hint}</div>
            </div>
          </button>
        ))}
      </div>

      {/* Full-width Ibmec block — highlighted */}
      <button onClick={onIbmec} style={{
        marginTop: 8,
        width: '100%', textAlign: 'left',
        position: 'relative', overflow: 'hidden',
        border: 'none', cursor: 'pointer', font: 'inherit',
        background: `linear-gradient(120deg, ${IBMEC_BLUE} 0%, ${IBMEC_BLUE_DARK} 100%)`,
        color: '#FFFFFF',
        borderRadius: 16,
        padding: '18px 18px',
        display: 'flex', alignItems: 'center', gap: 14,
        boxShadow: '0 12px 28px -12px rgba(17,69,255,0.55)',
      }}>
        {/* subtle stripe overlay */}
        <span style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 16px)',
          pointerEvents: 'none',
        }} />
        <div style={{ flex: 1, minWidth: 0, position: 'relative' }}>
          <img src="assets/ibmec-logo-white.svg" alt="Ibmec"
            style={{ height: 22, width: 'auto', display: 'block', marginBottom: 8 }} />
          <div style={{
            fontSize: 17, fontWeight: 600, lineHeight: 1.15,
            letterSpacing: '-0.01em',
            fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
          }}>Quem faz o futuro, faz Ibmec.</div>
          <div style={{
            fontSize: 11.5, color: 'rgba(255,255,255,0.85)', marginTop: 4,
          }}>Cursos, campi, bolsas e histórias de quem se formou aqui.</div>
        </div>
        <span style={{
          position: 'relative',
          width: 32, height: 32, borderRadius: '50%',
          background: IBMEC_YELLOW, color: IBMEC_BLUE_DARK,
          flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <IconArrowRight size={16} stroke={2.4} />
        </span>
      </button>
    </div>
  );
};

// ---------- Screen ----------
// The hero is full-bleed: status bar and top chrome (avatar / logo / bell)
// are absolutely positioned over the banner.
const HomeScreen = ({ user, events, subscribed, onOpenEvent, onAgenda, onQuiz, onIbmec, onIdomed, onProfile, onNotifications }) => {
  return (
    <div className="screen" style={{ background: '#FFFFFF', color: '#0A0A0A' }}>
      <div style={{ position: 'relative' }}>
        <HeroBannerCarousel />
        {/* Status bar overlaid (light tone — white text on the colored banner) */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 3 }}>
          <StatusBar tone="light" />
        </div>
        <HomeTopChrome user={user} onProfile={onProfile} onNotifications={onNotifications} />
      </div>
      <NextEvents events={events} subscribed={subscribed} onOpenEvent={onOpenEvent} onSeeAll={onAgenda} />
      <Shortcuts onAgenda={onAgenda} onQuiz={onQuiz} onIdomed={onIdomed} onIbmec={onIbmec} />
      <div style={{ height: 24 }} />
    </div>
  );
};

Object.assign(window, { HomeScreen });