// AdTable.jsx v1
// Tabel-visning af ads med:
// - Sticky første kolonne (ad name)
// - Klikbart ad name med preview-indikator (åbner preview-modal)
// - Klikbare kolonne-headers for sortering
// - Threshold farvekodning per celle (• prikker)
// - Venstre-border farve baseret på overall rating
// - Multi-konvertering: én kolonne-gruppe per valgt event
// - Vandret scroll når mange kolonner

const StatusDotTable = ({ rating }) => {
  if (!rating) return null;
  return <span className={`ad-table__dot ad-table__dot--${rating}`} aria-label={rating} />;
};

const SortIndicator = ({ active, direction }) => {
  if (!active) {
    return (
      <svg className="ad-table__sort-icon ad-table__sort-icon--inactive" viewBox="0 0 12 12" width="10" height="10">
        <path d="M6 2 L9 6 L3 6 Z" fill="currentColor" opacity="0.3"/>
        <path d="M6 10 L9 6 L3 6 Z" fill="currentColor" opacity="0.3"/>
      </svg>
    );
  }
  return (
    <svg className="ad-table__sort-icon" viewBox="0 0 12 12" width="10" height="10">
      {direction === 'desc' ? (
        <path d="M6 10 L9 6 L3 6 Z" fill="currentColor"/>
      ) : (
        <path d="M6 2 L9 6 L3 6 Z" fill="currentColor"/>
      )}
    </svg>
  );
};

const AdTable = ({ ads, brandConfig, brand, filters, onFiltersChange, onOpenPreview }) => {
  const fmt = window.AppMetrics;
  const METRIC_DEFINITIONS = fmt?.METRIC_DEFINITIONS || [];

  // Hvilke metrics skal vises i tabellen
  // Bruger table_visible_metrics (separat fra card visible_metrics) hvis sat
  // Falder tilbage til visible_metrics hvis ikke
  const tableMetrics = brandConfig?.table_visible_metrics?.length
    ? brandConfig.table_visible_metrics
    : (brandConfig?.visible_metrics?.length
        ? brandConfig.visible_metrics
        : ['spend', 'impressions', 'link_clicks', 'link_ctr', 'cpc_link', 'cpm', 'frequency']);

  const primaryEvents = brandConfig?.primary_events || [];

  // Beregn current sort state
  const [sortKey, sortDir] = (filters.sort || 'spend_desc').split('_');

  // Klik på kolonne-header → sortér
  const handleSortClick = (key) => {
    const isActive = key === 'score' ? sortKey === 'score' : sortKey === key;
    let newDir = 'desc';
    if (isActive && sortDir === 'desc') newDir = 'asc';
    onFiltersChange({ ...filters, sort: `${key}_${newDir}` });
  };

  // Render én metric-celle
  const renderMetricCell = (ad, metricKey) => {
    const value = ad._allMetrics?.[metricKey];
    const ev = ad._evaluations?.[metricKey];
    const def = METRIC_DEFINITIONS.find(m => m.key === metricKey);
    if (!def) return <td key={metricKey}>–</td>;

    return (
      <td key={metricKey} className="ad-table__cell ad-table__cell--metric">
        <span className="ad-table__cell-value">{fmt.fmtMetric(metricKey, value)}</span>
        <StatusDotTable rating={ev} />
      </td>
    );
  };

  // Render conversion-cells for én konvertering
  const renderConversionCells = (ad, eventKey) => {
    const conv = fmt.computeConversionMetrics(ad._insights, eventKey, brand);
    const evs = ad._evaluations || {};
    const countEv = evs[`conv:${eventKey}:count`];
    const cpaEv = evs[`conv:${eventKey}:cpa`];
    const roasEv = evs[`conv:${eventKey}:roas`];
    const showRoas = conv && conv.value > 0 && conv.roas != null;

    if (!conv || conv.count === 0) {
      // Tom række - vis dashes
      return (
        <>
          <td className="ad-table__cell ad-table__cell--conv-start">–</td>
          <td className="ad-table__cell">–</td>
          <td className="ad-table__cell">–</td>
          <td className="ad-table__cell ad-table__cell--conv-end">–</td>
        </>
      );
    }

    return (
      <>
        <td className="ad-table__cell ad-table__cell--metric ad-table__cell--conv-start">
          <span className="ad-table__cell-value">{fmt.fmtNumber(conv.count)}</span>
          <StatusDotTable rating={countEv} />
        </td>
        <td className="ad-table__cell ad-table__cell--metric">
          <span className="ad-table__cell-value">{fmt.fmtMoney(conv.cpa)}</span>
          <StatusDotTable rating={cpaEv} />
        </td>
        <td className="ad-table__cell ad-table__cell--metric">
          <span className="ad-table__cell-value">
            {showRoas ? fmt.fmtMoney(conv.value) : '–'}
          </span>
        </td>
        <td className="ad-table__cell ad-table__cell--metric ad-table__cell--conv-end">
          <span className="ad-table__cell-value">
            {showRoas ? fmt.fmtDecimal(conv.roas, 2) : '–'}
          </span>
          {showRoas && <StatusDotTable rating={roasEv} />}
        </td>
      </>
    );
  };

  // Render header for en sortérbar kolonne
  const renderSortableHeader = (key, label, options = {}) => {
    const isActive = sortKey === key;
    return (
      <th
        key={key}
        className={`ad-table__th ad-table__th--sortable ${isActive ? 'ad-table__th--active' : ''} ${options.className || ''}`}
        onClick={() => handleSortClick(key)}
      >
        <div className="ad-table__th-content">
          <span>{label}</span>
          <SortIndicator active={isActive} direction={sortDir} />
        </div>
      </th>
    );
  };

  return (
    <div className="ad-table-wrapper">
      <table className="ad-table">
        <thead>
          <tr>
            <th className="ad-table__th ad-table__th--ad-name ad-table__th--sticky">
              Annonce
            </th>
            {renderSortableHeader('score', 'Score', { className: 'ad-table__th--narrow' })}
            {tableMetrics.map(key => {
              const def = METRIC_DEFINITIONS.find(m => m.key === key);
              return renderSortableHeader(key, def?.label || key);
            })}
            {primaryEvents.map(eventKey => {
              const label = brandConfig.primary_event_labels?.[eventKey] || eventKey;
              return (
                <th key={`group-${eventKey}`} colSpan={4} className="ad-table__th ad-table__th--conv-group">
                  ★ {label}
                </th>
              );
            })}
          </tr>
          {primaryEvents.length > 0 && (
            <tr className="ad-table__sub-header">
              <th className="ad-table__th ad-table__th--ad-name ad-table__th--sticky"></th>
              <th></th>
              {tableMetrics.map(key => <th key={`empty-${key}`}></th>)}
              {primaryEvents.map(eventKey => (
                <React.Fragment key={`sub-${eventKey}`}>
                  {renderSortableHeader(`conv:${eventKey}:count`, 'Antal', { className: 'ad-table__th--narrow ad-table__th--conv-start' })}
                  {renderSortableHeader(`conv:${eventKey}:cpa`, 'CPA', { className: 'ad-table__th--narrow' })}
                  <th className="ad-table__th ad-table__th--narrow">Værdi</th>
                  {renderSortableHeader(`conv:${eventKey}:roas`, 'ROAS', { className: 'ad-table__th--narrow ad-table__th--conv-end' })}
                </React.Fragment>
              ))}
            </tr>
          )}
        </thead>
        <tbody>
          {ads.map(ad => {
            const ratingClass = ad._rating ? `ad-table__row--rating-${ad._rating}` : '';
            return (
              <tr key={ad.ad_id} className={`ad-table__row ${ratingClass}`}>
                <td className="ad-table__cell ad-table__cell--ad-name ad-table__cell--sticky">
                  <button
                    className="ad-table__name-btn"
                    onClick={async () => {
                      try {
                        const format = ad.format || '1:1';
                        const r = await fetch(`/api/preview/${ad.ad_id}?format=${encodeURIComponent(format)}`);
                        const data = await r.json();
                        onOpenPreview({
                          previewUrl: data.url,
                          adName: ad.headline,
                          source: data.source,
                          format: data.format || format,
                          warning: data.warning || null,
                          error: data.error || null,
                        });
                      } catch (err) {
                        onOpenPreview({ previewUrl: null, adName: ad.headline, error: String(err) });
                      }
                    }}
                    title="Klik for at se kreativet"
                  >
                    <span className="ad-table__name-text">{ad.headline || ad.ad_id}</span>
                    <svg className="ad-table__preview-icon" viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
                      <path d="M2 8 L12 8 M8 4 L12 8 L8 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                  <div className="ad-table__name-meta">
                    {ad.format && ad.format !== 'unknown' && (
                      <span className={`ad-table__format ad-table__format--${ad.format.replace(':', '-')}`}>{ad.format}</span>
                    )}
                    {ad.adset_name && <span className="ad-table__adset">{ad.adset_name}</span>}
                  </div>
                </td>
                <td className="ad-table__cell ad-table__cell--score">
                  {ad._score != null ? (
                    <span className={`ad-table__score ad-table__score--${ad._rating || 'none'}`}>
                      {ad._score >= 0 ? '+' : ''}{fmt.fmtDecimal(ad._score, 2)}
                    </span>
                  ) : '–'}
                </td>
                {tableMetrics.map(key => renderMetricCell(ad, key))}
                {primaryEvents.map(eventKey => (
                  <React.Fragment key={`conv-cells-${eventKey}`}>
                    {renderConversionCells(ad, eventKey)}
                  </React.Fragment>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      {ads.length === 0 && (
        <div className="ad-table__empty">Ingen annoncer matcher de valgte filtre</div>
      )}
    </div>
  );
};