// FilterBar.jsx v6.3
// Udvidet sortering med alle 16 metrics

const FORMAT_OPTIONS = [
  { value: '', label: 'Alle formater' },
  { value: '1:1', label: '1:1' },
  { value: '4:5', label: '4:5' },
  { value: '5:4', label: '5:4' },
  { value: '16:9', label: '16:9' },
  { value: '9:16', label: '9:16' },
];

const PERFORMANCE_OPTIONS = [
  { value: '', label: 'Alle' },
  { value: 'good', label: 'God' },
  { value: 'mid', label: 'Mellem' },
  { value: 'bad', label: 'Dårlig' },
];

// Sortering med alle 16 metrics + score
const SORT_OPTIONS = [
  { value: 'score_desc', label: 'Performance score (høj→lav)' },
  { value: 'score_asc',  label: 'Performance score (lav→høj)' },

  { value: 'spend_desc', label: 'Amount spent (høj→lav)' },
  { value: 'spend_asc',  label: 'Amount spent (lav→høj)' },

  { value: 'reach_desc', label: 'Reach (høj→lav)' },
  { value: 'reach_asc',  label: 'Reach (lav→høj)' },

  { value: 'impressions_desc', label: 'Impressions (høj→lav)' },
  { value: 'impressions_asc',  label: 'Impressions (lav→høj)' },

  { value: 'frequency_asc',  label: 'Frequency (lav→høj)' },
  { value: 'frequency_desc', label: 'Frequency (høj→lav)' },

  { value: 'link_clicks_desc', label: 'Link clicks (høj→lav)' },
  { value: 'link_clicks_asc',  label: 'Link clicks (lav→høj)' },

  { value: 'link_ctr_desc', label: 'CTR link (høj→lav)' },
  { value: 'link_ctr_asc',  label: 'CTR link (lav→høj)' },

  { value: 'cpc_link_asc',  label: 'CPC link (lav→høj)' },
  { value: 'cpc_link_desc', label: 'CPC link (høj→lav)' },

  { value: 'cost_per_1000_reach_asc',  label: 'Cost/1000 reach (lav→høj)' },
  { value: 'cost_per_1000_reach_desc', label: 'Cost/1000 reach (høj→lav)' },

  { value: 'cpm_asc',  label: 'CPM (lav→høj)' },
  { value: 'cpm_desc', label: 'CPM (høj→lav)' },

  { value: 'landing_page_views_desc', label: 'LPV (høj→lav)' },
  { value: 'landing_page_views_asc',  label: 'LPV (lav→høj)' },

  { value: 'cost_per_lpv_asc',  label: 'Cost/LPV (lav→høj)' },
  { value: 'cost_per_lpv_desc', label: 'Cost/LPV (høj→lav)' },

  { value: 'lpv_per_link_click_desc', label: 'LPV/Link click (høj→lav)' },
  { value: 'lpv_per_link_click_asc',  label: 'LPV/Link click (lav→høj)' },

  { value: 'thruplays_desc', label: 'Thruplays (høj→lav)' },
  { value: 'thruplays_asc',  label: 'Thruplays (lav→høj)' },

  { value: 'cost_per_thruplay_asc',  label: 'Cost/Thruplay (lav→høj)' },
  { value: 'cost_per_thruplay_desc', label: 'Cost/Thruplay (høj→lav)' },

  { value: 'thruplay_pct_desc', label: 'Thruplay % (høj→lav)' },
  { value: 'thruplay_pct_asc',  label: 'Thruplay % (lav→høj)' },

  { value: 'thruplay_per_reach_desc', label: 'Thruplay/Reach (høj→lav)' },
  { value: 'thruplay_per_reach_asc',  label: 'Thruplay/Reach (lav→høj)' },
];

const FilterBar = ({ brand, ads, filters, onFiltersChange }) => {
  const campaigns = React.useMemo(() => {
    const set = new Set();
    ads.forEach(a => a.campaign_name && set.add(a.campaign_name));
    return Array.from(set).sort();
  }, [ads]);

  const adsets = React.useMemo(() => {
    const set = new Set();
    ads.forEach(a => a.adset_name && set.add(a.adset_name));
    return Array.from(set).sort();
  }, [ads]);

  const update = (key, value) => onFiltersChange({ ...filters, [key]: value });

  const reset = () => onFiltersChange({
    performance: '', format: '', campaign: '', adset: '', search: '', sort: 'spend_desc',
  });

  const activeFilters = [
    filters.performance && { key: 'performance', label: `Perf: ${PERFORMANCE_OPTIONS.find(o => o.value === filters.performance)?.label}` },
    filters.format && { key: 'format', label: `Format: ${filters.format}` },
    filters.campaign && { key: 'campaign', label: `Kampagne: ${filters.campaign}` },
    filters.adset && { key: 'adset', label: `Adset: ${filters.adset}` },
    filters.search && { key: 'search', label: `Søg: "${filters.search}"` },
  ].filter(Boolean);

  return (
    <div className="filter-bar">
      <div className="filter-bar__row">
        <div className="filter-bar__group">
          <label className="filter-bar__label">Performance</label>
          <select className="filter-bar__select" value={filters.performance || ''} onChange={(e) => update('performance', e.target.value)}>
            {PERFORMANCE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </div>

        <div className="filter-bar__group">
          <label className="filter-bar__label">Format</label>
          <select className="filter-bar__select" value={filters.format || ''} onChange={(e) => update('format', e.target.value)}>
            {FORMAT_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </div>

        {campaigns.length > 1 && (
          <div className="filter-bar__group filter-bar__group--wide">
            <label className="filter-bar__label">Kampagne</label>
            <select className="filter-bar__select" value={filters.campaign || ''} onChange={(e) => update('campaign', e.target.value)}>
              <option value="">Alle kampagner</option>
              {campaigns.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
        )}

        {adsets.length > 1 && (
          <div className="filter-bar__group filter-bar__group--wide">
            <label className="filter-bar__label">Adset</label>
            <select className="filter-bar__select" value={filters.adset || ''} onChange={(e) => update('adset', e.target.value)}>
              <option value="">Alle adsets</option>
              {adsets.map(a => <option key={a} value={a}>{a}</option>)}
            </select>
          </div>
        )}

        <div className="filter-bar__group filter-bar__group--grow">
          <label className="filter-bar__label">Søg</label>
          <input type="search" className="filter-bar__input" placeholder="Headline, kampagne, adset..."
            value={filters.search || ''} onChange={(e) => update('search', e.target.value)} />
        </div>

        <div className="filter-bar__group filter-bar__group--wide">
          <label className="filter-bar__label">Sortér</label>
          <select className="filter-bar__select" value={filters.sort || 'spend_desc'} onChange={(e) => update('sort', e.target.value)}>
            {SORT_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
          </select>
        </div>
      </div>

      {activeFilters.length > 0 && (
        <div className="filter-bar__chips">
          <span className="filter-bar__chips-label">Aktive filtre:</span>
          {activeFilters.map(f => (
            <span key={f.key} className="filter-chip">
              {f.label}
              <button onClick={() => update(f.key, '')} aria-label="Fjern filter">×</button>
            </span>
          ))}
          <button className="filter-bar__reset" onClick={reset}>Nulstil alle</button>
        </div>
      )}
    </div>
  );
};