// BrokerTab_Marche — Onglet "Marché" du dashboard courtier
// Vanilla React 18, no import/export. Babel transforms in-browser.
// Hook aliases prefixed with M (Marche) to avoid global collisions.

const {
  useState: useSM,
  useMemo: useMM,
  useCallback: useCBM,
} = React;

// ── Helpers locaux ───────────────────────────────────────────────────────────

function medianM(arr) {
  if (!arr || arr.length === 0) return null;
  const sorted = [...arr].sort((a, b) => a - b);
  const mid = Math.floor(sorted.length / 2);
  return sorted.length % 2 === 0
    ? (sorted[mid - 1] + sorted[mid]) / 2
    : sorted[mid];
}

// Classifie un listing selon ses unités / type canonique.
// type est produit par mapPropertyType() dans adapter.js :
//   'Unifamiliale', 'Duplex', 'Triplex', 'Quadruplex', 'Sextuplex',
//   '8-Logements', 'Condo', 'Terrain', 'Autre'
// units vaut 0 quand inconnu.
function classifyTypeM(listing) {
  const units = typeof listing.units === 'number' ? listing.units : 0;
  const type = (listing.type || '').toLowerCase();

  if (units >= 4) return 'plex4plus';
  if (units === 3 || type.includes('triplex')) return 'plex23';
  if (units === 2 || type.includes('duplex')) return 'plex23';
  if (units === 1 || type.includes('unifamilial') || type.includes('condo')) return 'unifamilial';

  // Fallback sur le type textuel quand units === 0
  if (type.includes('quadruplex') || type.includes('sextuplex') || type.includes('8-logement')) return 'plex4plus';
  if (type.includes('triplex')) return 'plex23';
  if (type.includes('duplex')) return 'plex23';
  if (type.includes('unifamilial') || type.includes('maison') || type.includes('condo')) return 'unifamilial';

  return 'unifamilial'; // défaut conservateur
}

function groupByTypeM(listings) {
  const groups = { unifamilial: [], plex23: [], plex4plus: [] };
  for (const l of listings) {
    const key = classifyTypeM(l);
    groups[key].push(l);
  }
  return groups;
}

// ── Formateurs ───────────────────────────────────────────────────────────────

const fmtCurrency = new Intl.NumberFormat('fr-CA', {
  style: 'currency',
  currency: 'CAD',
  maximumFractionDigits: 0,
});

function fmtPrix(n) {
  if (n == null) return '—';
  return fmtCurrency.format(n);
}

function fmtCapRate(decimalOrNull) {
  if (decimalOrNull == null) return '—';
  return (decimalOrNull * 100).toFixed(1) + ' %';
}

function fmtDom(n) {
  if (n == null) return '—';
  return Math.round(n) + ' j';
}

// ── Sous-composants ──────────────────────────────────────────────────────────

function KpiCard({ title, value, sublabel }) {
  return (
    React.createElement('div', { className: 'broker-kpi-card' },
      React.createElement('p', { className: 'broker-kpi-title' }, title),
      React.createElement('p', { className: 'broker-kpi-value' }, value),
      sublabel
        ? React.createElement('p', { className: 'broker-kpi-sub' }, sublabel)
        : null
    )
  );
}

function TypeRow({ label, listings }) {
  const n = listings.length;
  if (n === 0) {
    return (
      React.createElement('tr', null,
        React.createElement('td', null, label),
        React.createElement('td', null, '—'),
        React.createElement('td', null, '—'),
        React.createElement('td', null, '—')
      )
    );
  }

  const prices = listings.map(l => l.price).filter(v => typeof v === 'number' && v > 0);
  const capRates = listings
    .map(l => l.metrics && l.metrics.capRate)
    .filter(v => typeof v === 'number' && isFinite(v));

  return (
    React.createElement('tr', null,
      React.createElement('td', null, label),
      React.createElement('td', null, n),
      React.createElement('td', null, fmtPrix(medianM(prices))),
      React.createElement('td', null, fmtCapRate(medianM(capRates)))
    )
  );
}

// ── Composant principal ───────────────────────────────────────────────────────

function BrokerTabMarche({ filteredListings, territory, setTerritory, allCities, lang, activeProfile }) {
  const listings = filteredListings || [];

  // ── KPIs ──────────────────────────────────────────────────────────────────
  const kpis = useMM(() => {
    const n = listings.length;
    const prices = listings.map(l => l.price).filter(v => typeof v === 'number' && v > 0);
    const capRates = listings
      .map(l => l.metrics && l.metrics.capRate)
      .filter(v => typeof v === 'number' && isFinite(v));
    const doms = listings
      .map(l => l.daysOnMarket)
      .filter(v => typeof v === 'number' && isFinite(v) && v >= 0);
    const sousMarcheCount = listings.filter(
      l => l.marketContext && l.marketContext.vsMarket === 'below'
    ).length;
    const sousMarchePct = n > 0 ? Math.round((sousMarcheCount / n) * 100) : null;

    return {
      count: n,
      prixMedian: medianM(prices),
      capRateMedian: medianM(capRates),
      domMedian: medianM(doms),
      sousMarchePct,
    };
  }, [listings]);

  // ── Groupes par type ──────────────────────────────────────────────────────
  const groups = useMM(() => groupByTypeM(listings), [listings]);

  // ── Label territoire ──────────────────────────────────────────────────────
  const territoireLabel = territory.type === 'city' && territory.value
    ? territory.value
    : 'le Québec';

  const countLabel = territory.type === 'city' && territory.value
    ? `${kpis.count} listing${kpis.count !== 1 ? 's' : ''} actif${kpis.count !== 1 ? 's' : ''} dans ${territory.value}`
    : `${kpis.count} listing${kpis.count !== 1 ? 's' : ''} actif${kpis.count !== 1 ? 's' : ''} au Québec`;

  // ── Noop callbacks ListingMap ─────────────────────────────────────────────
  const noop = useCBM(() => {}, []);

  // ── Pin color basé sur vsMarket (vue courtier) ────────────────────────────
  // Codes internes : 'below' | 'at' | 'premium'. Inconnu → gris neutre.
  const brokerPinColor = useCBM((listing) => {
    const v = listing && listing.marketContext && listing.marketContext.vsMarket;
    if (v === 'below')   return '#10b981'; // vert — opportunité
    if (v === 'at')      return '#6b7280'; // gris — neutre
    if (v === 'premium') return '#ef4444'; // rouge — prime
    return '#cbd5e1'; // gris clair — inconnu
  }, []);

  const brokerLegend = React.createElement('div', { className: 'map-legend' },
    React.createElement('h4', null, 'Position vs marché'),
    React.createElement('div', { className: 'legend-row' },
      React.createElement('span', { className: 'legend-swatch', style: { background: '#10b981' } }),
      ' Sous le marché'
    ),
    React.createElement('div', { className: 'legend-row' },
      React.createElement('span', { className: 'legend-swatch', style: { background: '#6b7280' } }),
      ' Au marché'
    ),
    React.createElement('div', { className: 'legend-row' },
      React.createElement('span', { className: 'legend-swatch', style: { background: '#ef4444' } }),
      ' Prime de marché'
    ),
    React.createElement('div', { className: 'legend-row' },
      React.createElement('span', { className: 'legend-swatch', style: { background: '#cbd5e1' } }),
      ' Inconnu'
    )
  );

  // ── Empty state ───────────────────────────────────────────────────────────
  if (listings.length === 0) {
    return (
      React.createElement('div', { className: 'broker-tab-marche' },

        // Territory selector
        React.createElement('div', { className: 'broker-territory-bar' },
          React.createElement('button', {
            className: 'broker-territory-btn' + (territory.type === 'all' ? ' active' : ''),
            onClick: () => setTerritory({ type: 'all', value: null }),
          }, 'Tout le Québec'),
          React.createElement('select', {
            className: 'broker-territory-select' + (territory.type === 'city' ? ' active' : ''),
            value: territory.type === 'city' ? (territory.value || '') : '',
            onChange: e => {
              if (e.target.value) setTerritory({ type: 'city', value: e.target.value });
            },
          },
            React.createElement('option', { value: '' }, '— Choisir une ville —'),
            (allCities || []).map(city =>
              React.createElement('option', { key: city, value: city }, city)
            )
          )
        ),

        React.createElement('p', {
          style: { textAlign: 'center', color: 'var(--text-muted, #888)', marginTop: '3rem' },
        }, 'Aucun listing dans ce territoire.')
      )
    );
  }

  return (
    React.createElement('div', { className: 'broker-tab-marche' },

      // ── Territory selector ────────────────────────────────────────────────
      React.createElement('div', { className: 'broker-territory-bar' },
        React.createElement('button', {
          className: 'broker-territory-btn' + (territory.type === 'all' ? ' active' : ''),
          onClick: () => setTerritory({ type: 'all', value: null }),
        }, 'Tout le Québec'),
        React.createElement('select', {
          className: 'broker-territory-select' + (territory.type === 'city' ? ' active' : ''),
          value: territory.type === 'city' ? (territory.value || '') : '',
          onChange: e => {
            if (e.target.value) setTerritory({ type: 'city', value: e.target.value });
          },
        },
          React.createElement('option', { value: '' }, '— Choisir une ville —'),
          (allCities || []).map(city =>
            React.createElement('option', { key: city, value: city }, city)
          )
        )
      ),

      // Count label
      React.createElement('p', { className: 'broker-territory-count' }, countLabel),

      // ── KPI cards ─────────────────────────────────────────────────────────
      React.createElement('div', { className: 'broker-kpi-grid' },
        React.createElement(KpiCard, {
          title: 'Listings actifs',
          value: kpis.count.toLocaleString('fr-CA'),
        }),
        React.createElement(KpiCard, {
          title: 'Prix médian',
          value: fmtPrix(kpis.prixMedian),
        }),
        React.createElement(KpiCard, {
          title: 'Cap rate médian',
          value: fmtCapRate(kpis.capRateMedian),
        }),
        React.createElement(KpiCard, {
          title: 'DOM médian',
          value: fmtDom(kpis.domMedian),
          sublabel: 'jours sur le marché',
        }),
        React.createElement(KpiCard, {
          title: '% sous le marché',
          value: kpis.sousMarchePct != null ? kpis.sousMarchePct + ' %' : '—',
          sublabel: 'cap rate > médiane locale',
        })
      ),

      // ── Table par type de propriété ───────────────────────────────────────
      React.createElement('div', { className: 'broker-section' },
        React.createElement('h3', { className: 'broker-section-title' }, 'Par type de propriété'),
        React.createElement('table', { className: 'broker-table' },
          React.createElement('thead', null,
            React.createElement('tr', null,
              React.createElement('th', null, 'Type'),
              React.createElement('th', null, 'Nb'),
              React.createElement('th', null, 'Prix médian'),
              React.createElement('th', null, 'Cap rate médian')
            )
          ),
          React.createElement('tbody', null,
            React.createElement(TypeRow, { label: 'Unifamilial / Condo', listings: groups.unifamilial }),
            React.createElement(TypeRow, { label: 'Plex 2–3 logements', listings: groups.plex23 }),
            React.createElement(TypeRow, { label: 'Plex 4+ logements', listings: groups.plex4plus })
          )
        )
      ),

      // ── Carte ─────────────────────────────────────────────────────────────
      React.createElement('div', { className: 'broker-section' },
        React.createElement('h3', { className: 'broker-section-title' }, 'Carte du territoire'),
        React.createElement(window.ListingMap, {
          listings: listings,
          t: (k) => k,
          lang: lang || 'fr',
          activeProfile: activeProfile || 'buy_and_hold',
          hoveredId: null,
          activeId: null,
          selectedId: null,
          setHoveredId: noop,
          setSelectedListingId: noop,
          onPinClick: noop,
          onBoundsChange: noop,
          lockBounds: false,
          showSearchArea: false,
          onApplySearchArea: noop,
          getPinColor: brokerPinColor,
          customLegend: brokerLegend,
          mapStyle: { height: 400 },
        })
      )

    )
  );
}