// PromotionsTable.jsx — search + filter card + promotions table.
// "Post to social" (per-row) opens the composer; checkbox builds a batch queue.
function SocialPromotionsTable({ promos, search, setSearch, selectedIds, onToggle, onSelectAll, onPost, statusById }) {
  const allChecked = promos.length > 0 && promos.every((p) => selectedIds.includes(p.id));

  return (
    <>
      <div className="sp-tabs">
        <button className="sp-tab is-on"><i data-lucide="megaphone"></i> Holiday Promotions</button>
        <button className="sp-tab"><i data-lucide="clapperboard"></i> Video Posts</button>
      </div>

      <div className="sp-voice-banner">
        <i data-lucide="sparkles"></i>
        <span>AI rewrites use <b>your brand voice</b> — warm, premium, family-run — set in your hub settings.</span>
        <span className="spacer"></span>
        <a href="#" onClick={(e) => e.preventDefault()}>Edit brand voice →</a>
      </div>

      <div className="sp-search-card">
        <div className="sp-search-top">
          <span className="sp-search-label">Search</span>
          <div className="sp-search-input">
            <i data-lucide="search"></i>
            <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search promotions…" />
          </div>
          <span className="sp-offers-count"><b>{promos.length}</b> offers</span>
        </div>
        <div className="sp-filters">
          {['Holiday Type', 'Operator', 'Continent', 'Country', 'Destination'].map((f) => (
            <div className="sp-filter" key={f}>
              <label>{f}</label>
              <select><option>Show me all</option></select>
            </div>
          ))}
        </div>
      </div>

      <div className="sp-table-card">
        <div className="sp-thead">
          <div className="sp-th sp-th-check">
            <input type="checkbox" checked={allChecked} onChange={(e) => onSelectAll(e.target.checked)} aria-label="Select all" />
          </div>
          <div className="sp-th">ID</div>
          <div className="sp-th">Promotion Title</div>
          <div className="sp-th sp-th-op">Operator</div>
          <div className="sp-th sp-th-dest">Destination</div>
          <div className="sp-th" style={{ textAlign: 'right' }}>Actions</div>
        </div>
        <ul className="sp-rows">
          {promos.map((p) => {
            const checked = selectedIds.includes(p.id);
            const status = statusById[p.id];
            return (
              <li key={p.id} className={'sp-row ' + (checked ? 'is-selected' : '')}>
                <div className="sp-td-check">
                  <input type="checkbox" checked={checked} onChange={() => onToggle(p.id)} aria-label={'Select ' + p.title} />
                </div>
                <div className="sp-td-id">{p.id}</div>
                <div className="sp-td-title">
                  <b>{p.title}</b>
                  <span>{p.type}</span>
                </div>
                <div className="sp-td-op">{p.operator}</div>
                <div className="sp-td-dest">{p.destination}</div>
                <div className="sp-td-actions">
                  {status === 'posted' && <span className="sp-pill sp-pill--posted"><i data-lucide="check" style={{width:11,height:11}}></i> Posted</span>}
                  {status === 'scheduled' && <span className="sp-pill sp-pill--queued"><i data-lucide="clock" style={{width:11,height:11}}></i> Scheduled</span>}
                  <button className="sp-btn sp-btn--soft sp-btn--sm" onClick={() => onPost(p, 'preview')}>
                    <i data-lucide="eye"></i> Preview
                  </button>
                  <button className="sp-btn sp-btn--orange sp-btn--sm" onClick={() => onPost(p, 'post')}>
                    <i data-lucide="send"></i> Post to social
                  </button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
}
window.SocialPromotionsTable = SocialPromotionsTable;