;(function () {
/* NewsScreen — category chips, featured story, news list. */

const CATEGORIES = ['All', 'Forex', 'Stocks', 'Crypto', 'Metals', 'Macro'];

const STORIES = [
  { tag: 'FOREX', t: 'EUR/USD reverses early gains', time: '1h ago' },
  { tag: 'STOCKS', t: 'Tech rally pauses ahead of CPI', time: '2h ago' },
  { tag: 'CRYPTO', t: 'BTC dominance climbs', time: '3h ago' },
  { tag: 'METALS', t: 'Gold sets new monthly high', time: '5h ago' },
  { tag: 'MACRO', t: 'OPEC+ extends production cap', time: '6h ago' },
];

/* Featured story shown in the hero card. Single static object for now. */
const FEATURED_STORY = {
  tag: 'BREAKING · MARKETS',
  headline: 'Markets close higher as central banks signal pause',
  source: 'Reuters',
  time: '2h ago',
};

/* Expose for the voice agent's get_latest_news tool. */
window.NEWS_STORIES = STORIES;
window.NEWS_FEATURED = FEATURED_STORY;

const newsStyles = {
  chip: {
    paddingLeft: '14px',
    paddingRight: '14px',
    paddingTop: '8px',
    paddingBottom: '8px',
    borderRadius: '32px',
    border: 'none',
    cursor: 'pointer',
    flexShrink: 0,
  },
  chipActive: {
    backgroundColor: colors.ink,
  },
  chipInactive: {
    backgroundColor: '#fff',
    border: `1px solid ${colors.line}`,
  },
  chipText: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '13px',
  },
  chipTextActive: { color: '#fff' },
  chipTextInactive: { color: colors.ink2 },

  featured: {
    backgroundColor: '#fff',
    borderRadius: '20px',
    marginLeft: '16px',
    marginRight: '16px',
    marginTop: '12px',
    marginBottom: '12px',
    overflow: 'hidden',
  },
  featuredImg: { width: '100%', height: '160px', objectFit: 'cover', display: 'block' },
  featuredBody: { padding: '16px' },
  featuredTag: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '11px',
    color: colors.teal,
    letterSpacing: '1.2px',
  },
  featuredHeadline: {
    fontFamily: 'Gilroy',
    fontWeight: 900,
    fontSize: '18px',
    color: colors.ink,
    marginTop: '6px',
    lineHeight: '22px',
  },
  featuredMeta: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '12px',
    color: colors.muted2,
    marginTop: '8px',
  },

  storyRow: { paddingLeft: '16px', paddingRight: '16px' },
  newsRow: {
    display: 'flex',
    flexDirection: 'row',
    gap: '12px',
    backgroundColor: '#fff',
    borderRadius: '16px',
    padding: '12px',
    marginBottom: '8px',
  },
  thumb: {
    width: '48px',
    height: '48px',
    borderRadius: '8px',
    objectFit: 'cover',
    display: 'block',
    flexShrink: 0,
  },
  rowTag: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '10px',
    color: colors.muted2,
    letterSpacing: '1px',
  },
  rowTitle: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '14px',
    color: colors.ink,
    marginTop: '2px',
    lineHeight: '18px',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
  },
  rowTime: {
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: '11px',
    color: colors.muted2,
    marginTop: '4px',
  },
};

const Chip = ({ label, active, onPress }) => (
  <button
    onClick={onPress}
    style={{
      border: 'none',
      background: 'transparent',
      padding: 0,
      margin: 0,
      cursor: 'pointer',
      font: 'inherit',
      color: 'inherit',
      textAlign: 'inherit',
      ...newsStyles.chip,
      ...(active ? newsStyles.chipActive : newsStyles.chipInactive),
    }}
  >
    <span style={{ ...newsStyles.chipText, ...(active ? newsStyles.chipTextActive : newsStyles.chipTextInactive) }}>
      {label}
    </span>
  </button>
);

const NewsRow = ({ tag, t, time }) => (
  <div style={newsStyles.newsRow}>
    <img src="superapp/img/hero-bonus-thumb.png" style={newsStyles.thumb} alt=""/>
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <span style={newsStyles.rowTag}>{tag}</span>
      <span style={newsStyles.rowTitle}>{t}</span>
      <span style={newsStyles.rowTime}>{time}</span>
    </div>
  </div>
);

const NewsScreen = () => {
  const [cat, setCat] = React.useState('All');

  const ListHeader = (
    <React.Fragment>
      <div
        style={{ position: 'absolute', top: '-1000px', left: 0, right: 0, height: '1000px', backgroundColor: '#fff', pointerEvents: 'none' }}
      />
      <PageHeader title="News" />

      {/* Category chip strip */}
      <div style={{ paddingTop: '12px', paddingBottom: '12px' }}>
        <div style={{ display: 'flex', flexDirection: 'row', overflowX: 'auto', gap: '8px', paddingLeft: '16px', paddingRight: '16px', scrollbarWidth: 'none' }}>
          {CATEGORIES.map((item) => (
            <Chip
              key={item}
              label={item}
              active={item === cat}
              onPress={() => setCat(item)}
            />
          ))}
        </div>
      </div>

      {/* Featured card */}
      <div style={newsStyles.featured}>
        <img
          src="superapp/img/hero-bonus.png"
          style={newsStyles.featuredImg}
          alt=""
        />
        <div style={newsStyles.featuredBody}>
          <div style={newsStyles.featuredTag}>BREAKING · MARKETS</div>
          <div style={newsStyles.featuredHeadline}>
            Markets close higher as central banks signal pause
          </div>
          <div style={newsStyles.featuredMeta}>Reuters · 2h ago</div>
        </div>
      </div>
    </React.Fragment>
  );

  return (
    // FlatList bg = grey for BOTTOM overscroll; TOP overscroll uses the
    // absolute white cushion in ListHeaderComponent to match the PageHeader.
    <div style={{ flex: 1, backgroundColor: colors.bg, overflowY: 'auto', WebkitOverflowScrolling: 'touch', position: 'relative', height: '100%' }}>
      <div style={{ paddingBottom: '200px', backgroundColor: colors.bg, position: 'relative' }}>
        {ListHeader}
        {STORIES.map((item) => (
          <div key={item.t} style={newsStyles.storyRow}>
            <NewsRow {...item} />
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { NewsScreen });
})();