const { useState: useStatePP, useMemo: useMemoPP } = React;

window.PlatformPanel = function PlatformPanel({
  platform, ads, selected, onToggleAd, onExpandAd, minimal, density, showWinnersBadge,
}) {
  const p = PLATFORMS[platform] || PLATFORMS.foreplay;
  const [sortKey, setSortKey] = useStatePP('score');
  const SORTS = platform === 'adspy'
    ? ['score', 'daysRunning', 'likes', 'views']
    : platform === 'brandsearch'
      ? ['score', 'daysRunning', 'views', 'likes', 'engagementRate', 'reach', 'spend']
      : ['score', 'daysRunning'];
  const activeSortKey = SORTS.includes(sortKey) ? sortKey : 'score';

  const sortedAds = useMemoPP(() => {
    const copy = [...ads];
    if (activeSortKey === 'score') {
      copy.sort((a, b) => (b.score ?? -1) - (a.score ?? -1));
    } else if (activeSortKey === 'daysRunning') {
      copy.sort((a, b) => (b.daysRunning || 0) - (a.daysRunning || 0));
    } else if (activeSortKey === 'likes') {
      copy.sort((a, b) => (b.likesCount || 0) - (a.likesCount || 0));
    } else if (activeSortKey === 'views') {
      copy.sort((a, b) => (b.viewsCount || 0) - (a.viewsCount || 0));
    } else if (activeSortKey === 'engagementRate') {
      copy.sort((a, b) => (b.engagementRateCount || 0) - (a.engagementRateCount || 0));
    } else if (activeSortKey === 'reach') {
      copy.sort((a, b) => (b.reachCount || 0) - (a.reachCount || 0));
    } else if (activeSortKey === 'spend') {
      copy.sort((a, b) => (b.spendCount || 0) - (a.spendCount || 0));
    }
    return copy;
  }, [ads, activeSortKey]);

  const sel = ads.filter(a => selected.has(a.id)).length;
  const nextSort = () => setSortKey(SORTS[(SORTS.indexOf(activeSortKey) + 1) % SORTS.length]);
  const sortLabel = activeSortKey === 'score'
    ? 'Score ↓'
    : activeSortKey === 'daysRunning'
      ? 'Days running ↓'
      : activeSortKey === 'likes'
        ? 'Likes ↓'
        : activeSortKey === 'views'
          ? 'Views ↓'
          : activeSortKey === 'engagementRate'
            ? 'ER ↓'
            : activeSortKey === 'reach'
              ? 'Reach ↓'
              : 'Spend ↓';

  return (
    <section className="platform-panel">
      <header className="pp-hdr">
        <span className="pp-chip" style={{ background: p.bg, color: p.color }}>
          <span className="pp-dot" style={{ background: p.color }} />
          {p.label}
        </span>
        <span className="pp-count">{ads.length} ads</span>
        {showWinnersBadge && (
          <span className="pp-dedupe" title="Filtered to winners (score ≥ 7.5)">
            <Icon name="bolt" size={12} /> Winners only
          </span>
        )}
        <div className="pp-spacer" />
        {sel > 0 && <span className="pp-selected">{sel} selected</span>}
        <button className="ghost-btn" onClick={nextSort} title="Cycle sort">
          Sort: {sortLabel}
        </button>
      </header>
      <div className={`pp-grid density-${density}`}>
        {sortedAds.map(a => (
          <AdCard
            key={a.id}
            ad={a}
            selected={selected.has(a.id)}
            onToggle={() => onToggleAd(a.id)}
            onExpand={onExpandAd}
            minimal={minimal}
          />
        ))}
      </div>
    </section>
  );
};