// ListingDetail — expanded view shown when user asks "Расскажи подробнее про f3"
const { useEffect: useEffect_d } = React;

function ListingDetail({ listing, onClose, onAsk }) {
  if (!listing) return null;
  const ppm = Math.round(listing.price / listing.area / 1000);

  return (
    <div className="detail-pane" data-comment-anchor="listing-detail">
      <div className="detail-header">
        <div className="detail-id">{listing.id}</div>
        <button className="detail-close" onClick={onClose} aria-label="Закрыть">×</button>
      </div>

      <div
        className="detail-hero"
        style={{
          background: `linear-gradient(135deg, hsl(${listing.image_hue}, 38%, 76%), hsl(${(listing.image_hue + 18) % 360}, 30%, 58%))`,
        }}
      >
        <div className="detail-hero-shapes">
          <div className="dh-shape dh-1" />
          <div className="dh-shape dh-2" />
          <div className="dh-shape dh-3" />
          <div className="dh-shape dh-4" />
        </div>
        <div className="detail-hero-thumbs">
          <div className="hero-thumb" style={{ background: `hsl(${listing.image_hue + 30}, 30%, 70%)` }} />
          <div className="hero-thumb" style={{ background: `hsl(${listing.image_hue + 60}, 25%, 75%)` }} />
          <div className="hero-thumb" style={{ background: `hsl(${listing.image_hue + 90}, 20%, 80%)` }} />
          <div className="hero-thumb hero-thumb--more">+8</div>
        </div>
      </div>

      <div className="detail-body">
        <h2 className="detail-name">{listing.name}</h2>
        <div className="detail-address">{listing.address}</div>
        <div className="detail-price-row">
          <div className="detail-price">{formatPriceFull(listing.price)}</div>
          <div className="detail-ppm">{ppm.toLocaleString("ru-RU")} тыс ₽/м²</div>
        </div>

        <div className="detail-stats">
          <Stat label="Комнат" value={listing.rooms} />
          <Stat label="Площадь" value={`${listing.area} м²`} />
          <Stat label="Год" value={listing.building_year} />
          <Stat label="Район" value={listing.district} />
        </div>

        <div className="detail-section">
          <div className="detail-section-title">Транспорт и инфраструктура</div>
          <div className="detail-list">
            <DetailRow icon="metro" label={`м. ${listing.metro_name}`} value={`${listing.metro_walk_min} мин пешком`} />
            <DetailRow icon="park" label="Парки в радиусе 1 км" value={`${listing.parks_nearby} объекта`} />
            <DetailRow icon="school" label="Школы в радиусе 1 км" value={`${listing.schools_nearby} объекта`} />
            <DetailRow icon="dist" label="От центра" value={`${listing.distance_km} км`} />
          </div>
        </div>

        <div className="detail-section">
          <div className="detail-section-title">Дополнительно</div>
          <div className="detail-tags">
            <span className="detail-tag">кирпич</span>
            <span className="detail-tag">14/22 этаж</span>
            <span className="detail-tag">балкон</span>
            <span className="detail-tag">ремонт</span>
            <span className="detail-tag">консьерж</span>
          </div>
        </div>

        <div className="detail-followups">
          <div className="detail-section-title detail-section-title--small">Спросить агента</div>
          <button
            className="followup"
            onClick={() => onAsk(`Сколько идти от ${listing.id} до Кремля?`)}
          >
            Сколько идти до Кремля?
          </button>
          <button
            className="followup"
            onClick={() => onAsk(`Покажи похожие на ${listing.id} в этом же ценовом диапазоне`)}
          >
            Похожие в этой цене
          </button>
          <button
            className="followup"
            onClick={() => onAsk(`Сколько школ рядом с ${listing.id}?`)}
          >
            Школы рядом
          </button>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div className="stat">
      <div className="stat-value">{value}</div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function DetailRow({ icon, label, value }) {
  return (
    <div className="detail-row">
      <span className={`detail-row-icon icon-${icon}`}>{ICONS[icon]}</span>
      <span className="detail-row-label">{label}</span>
      <span className="detail-row-value">{value}</span>
    </div>
  );
}

const ICONS = {
  metro: (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6">
      <circle cx="8" cy="8" r="6.2" />
      <path d="M4 11l1.6-6 2.4 4.5L10.4 5 12 11" />
    </svg>
  ),
  park: (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M8 13V8M4 8a4 4 0 1 1 8 0H4z" />
    </svg>
  ),
  school: (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M2 6l6-3 6 3-6 3-6-3z" />
      <path d="M5 7.5V11c0 1 1.3 1.8 3 1.8s3-.8 3-1.8V7.5" />
    </svg>
  ),
  dist: (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M8 2c-2.5 0-4.5 2-4.5 4.5C3.5 10 8 14 8 14s4.5-4 4.5-7.5C12.5 4 10.5 2 8 2z" />
      <circle cx="8" cy="6.5" r="1.6" />
    </svg>
  ),
};

Object.assign(window, { ListingDetail });