/* === Che Facemo — UI primitives === */
/* eslint-disable */
const { useState, useEffect, useMemo, useRef } = React;

// ── icons ──────────────────────────────────────────────
const Icon = {
  cal:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4.5" width="18" height="16" rx="1" /><path d="M3 9h18M8 2v4M16 2v4" /></svg>,
  share:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="18" cy="18" r="2.5" /><path d="M8 11l8-4M8 13l8 4" /></svg>,
  ig:     () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="4" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none" /></svg>,
  x:      () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 5l14 14M19 5L5 19" /></svg>,
  ext:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M7 17L17 7M9 7h8v8" /></svg>,
  chev:   (props) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}><path d="M9 6l6 6-6 6" /></svg>,
  pin:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21s7-7.5 7-12a7 7 0 10-14 0c0 4.5 7 12 7 12z" /><circle cx="12" cy="9" r="2.5" /></svg>,
  copy:   () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="8" y="8" width="12" height="12" rx="1" /><path d="M16 4H6a2 2 0 00-2 2v10" /></svg>,
  search: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>,
};

// ── placeholder image ──────────────────────────────────
function ImagePlaceholder({ event, style, big }) {
  const cat = CATEGORIES[event.category] || CATEGORIES.musica;
  const [imgErr, setImgErr] = React.useState(false);

  if (event.ig_image && !imgErr) {
    return (
      <div className="card-img card-img-real">
        <img
          src={event.ig_image}
          alt={event.event_name}
          loading="lazy"
          onError={() => setImgErr(true)}
        />
        <span className="pl-corner">{cat.label}</span>
      </div>
    );
  }

  return (
    <div
      className={`card-img pl-${style || 'gradient'}`}
      style={{ '--cat': cat.color, '--cat-tint': cat.tint }}
    >
      <span className="pl-corner">{cat.label}</span>
      <span className="pl-emoji" role="img" aria-label={cat.label}>{cat.emoji}</span>
    </div>
  );
}

// ── day-distance badge ────────────────────────────────
function DayBadge({ iso }) {
  const b = formatDayBadge(iso);
  return <span className={`badge badge-${b.tone}`}>{b.text}</span>;
}

// ── action buttons ────────────────────────────────────
function GCalBtn({ event, label = 'Calendar', small }) {
  return (
    <a
      className={small ? 'ico-btn' : 'btn'}
      href={googleCalendarURL(event)}
      target="_blank" rel="noopener"
      onClick={(e) => e.stopPropagation()}
      title="Aggiungi a Google Calendar"
    >
      <Icon.cal />
      <span>{label}</span>
    </a>
  );
}

function ShareBtn({ event, small, onToast }) {
  const handle = async (e) => {
    e.stopPropagation();
    await shareEvent(event, (err) => {
      onToast(err ? 'Errore copia' : 'Link copiato!');
    });
  };
  return (
    <button className={small ? 'ico-btn' : 'btn'} onClick={handle} title="Condividi">
      <Icon.share />
      <span>{small ? 'Share' : 'Condividi'}</span>
    </button>
  );
}

function IGBtn({ event, small }) {
  return (
    <a
      className={small ? 'ico-btn ig' : 'btn'}
      href={event.ig_url}
      target="_blank" rel="noopener"
      onClick={(e) => e.stopPropagation()}
      title="Apri su Instagram"
    >
      <Icon.ig />
      <span>{small ? 'IG' : 'Instagram'}</span>
    </a>
  );
}

// ── event card ────────────────────────────────────────
function EventCard({ event, index, onOpen, onToast, imageStyle }) {
  const cat = CATEGORIES[event.category] || CATEGORIES.musica;
  const d = parseISO(event.date);
  return (
    <article
      className={`card${event.featured ? ' featured' : ''}`}
      style={{ '--cat': cat.color, '--cat-tint': cat.tint, '--i': index }}
      onClick={() => onOpen(event)}
    >
      <ImagePlaceholder event={event} style={imageStyle} />
      <div className="card-body">
        <div className="card-meta">
          <span className="cat-tag">— {cat.label}</span>
          <span className="dot">·</span>
          <DayBadge iso={event.date} />
        </div>
        <h3 className="card-title">{event.event_name}</h3>
        <div className="card-loc">
          <span className="num">{d.getDate()}</span>
          <span>{monthLong(d)}</span>
          {event.time && <><span className="dot">·</span><span>{event.time}</span></>}
          {event.price && <><span className="dot">·</span><span className="price-tag">{event.price}</span></>}
          <span className="dot">·</span>
          <span className="city">{event.city}</span>
        </div>
        <div className="card-foot">
          <span className="label">{event.province}</span>
          <div className="actions">
            <GCalBtn event={event} label="GCal" small />
            <ShareBtn event={event} small onToast={onToast} />
            <IGBtn event={event} small />
          </div>
        </div>
      </div>
    </article>
  );
}

// ── skeleton card ─────────────────────────────────────
function SkeletonCard() {
  return (
    <div className="skel">
      <div className="skel-img" />
      <div className="skel-bar w-40" />
      <div className="skel-bar big" />
      <div className="skel-bar big w-70" />
      <div className="skel-bar w-40" />
    </div>
  );
}

// ── mini map (modal) ──────────────────────────────────
function MiniMap({ event }) {
  const coords = (event.lat && event.lon) ? [event.lat, event.lon] : PROVINCE_COORDS[event.province];
  if (!coords) return null;
  const W = 360, H = 200;
  const p = projectLatLon(coords[0], coords[1], W, H, 30);
  return (
    <div>
      <div className="mini-map">
        <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
          <rect x="0" y="0" width={W} height={H} fill="var(--bg-2)" />
          <MarcheCoast w={W} h={H} pad={30} />
          <circle cx={p.x} cy={p.y} r="10" className="mini-pin" />
          <circle cx={p.x} cy={p.y} r="20" fill="none" stroke="var(--terracotta)" strokeOpacity="0.4" />
        </svg>
      </div>
      <div className="mini-map-cap">
        {event.lat ? 'coordinate evento' : `centroide provincia · ${event.province}`}
      </div>
    </div>
  );
}

// Schematic Marche silhouette (line approximation, not geographically accurate but readable)
function MarcheCoast({ w, h, pad = 60 }) {
  // schematic outline points (lat, lon) tracing inland → coast → south
  const pts = [
    [43.97, 12.49], // pesaro-rimini border (NW)
    [43.83, 12.62],
    [43.50, 12.78], // inland west
    [43.20, 13.10],
    [42.95, 13.20],
    [42.78, 13.35],
    [42.78, 13.93], // SE corner
    [43.05, 13.92], // back up coast
    [43.40, 13.65],
    [43.62, 13.50],
    [43.78, 13.35],
    [43.92, 13.04], // NE coast back
    [43.97, 12.49],
  ];
  const d = pts.map((p, i) => {
    const { x, y } = projectLatLon(p[0], p[1], w, h, pad);
    return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return <path d={d} className="map-region" />;
}

// ── modal ─────────────────────────────────────────────
function ModalHero({ event, imageStyle }) {
  const [errored, setErrored] = useState(false);
  const cat = CATEGORIES[event.category] || CATEGORIES.musica;

  if (event.ig_image && !errored) {
    return (
      <div className="modal-img modal-img-real">
        <img
          src={event.ig_image}
          alt={event.event_name}
          onError={() => setErrored(true)}
        />
        <div className="modal-img-overlay">
          <span className="modal-img-cat" style={{ background: cat.color }}>
            {cat.emoji} {cat.label}
          </span>
          <a
            className="modal-img-source"
            href={event.ig_url}
            target="_blank" rel="noopener"
            onClick={(e) => e.stopPropagation()}
          >
            <Icon.ig /> <span>vedi su Instagram</span>
          </a>
        </div>
      </div>
    );
  }
  return (
    <div className={`modal-img pl-${imageStyle || 'gradient'}`}>
      <span className="pl-emoji">{cat.emoji}</span>
    </div>
  );
}

function Modal({ event, onClose, onToast, imageStyle }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  if (!event) return null;
  const cat = CATEGORIES[event.category] || CATEGORIES.musica;
  const d = parseISO(event.date);
  const range = event.end_date ? `${formatDateShort(event.date)} → ${formatDateShort(event.end_date)}` : formatDateLong(event.date);

  return (
    <div className="modal-shade" onClick={onClose}>
      <div
        className="modal"
        onClick={(e) => e.stopPropagation()}
        style={{ '--cat': cat.color, '--cat-tint': cat.tint }}
      >
        <button className="modal-close" onClick={onClose} aria-label="Chiudi"><Icon.x /></button>
        <section className="modal-hero">
          <ModalHero event={event} imageStyle={imageStyle} />
          <div className="modal-body">
            <div className="modal-eyebrow">
              <span className="eyebrow" style={{ color: cat.color }}>● {cat.label}</span>
              <span className="eyebrow">{event.province}</span>
              <DayBadge iso={event.date} />
            </div>
            <h2 className="modal-title">{event.event_name}</h2>
            <p className="description">{event.description}</p>
            <dl className="kv">
              <dt>quando</dt>
              <dd>
                <span className="num">{d.getDate()}</span> {monthLong(d)} {d.getFullYear()}
                {event.time && <> · {event.time}</>}
                {event.end_date && <> <span style={{ opacity: .6 }}>(fino al {formatDateShort(event.end_date)})</span></>}
              </dd>
              <dt>dove</dt>
              <dd>
                <strong>{event.venue}</strong><br/>
                <span style={{ color: 'var(--fg-soft)' }}>{event.address} · {event.city}</span>
              </dd>
              {event.price && (<>
                <dt>prezzo</dt>
                <dd style={{ fontWeight: 600, color: 'var(--terracotta)' }}>{event.price}</dd>
              </>)}
              {event.phone && (<>
                <dt>contatti</dt>
                <dd><a href={`tel:${event.phone}`} style={{ color: 'var(--fg)', textDecoration: 'none', fontWeight: 500 }}>{event.phone}</a></dd>
              </>)}
              <dt>tag</dt>
              <dd style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.06em', color: 'var(--fg-soft)' }}>
                {event.tags.map(t => `#${t}`).join('  ')}
              </dd>
            </dl>
            <div className="modal-actions">
              <GCalBtn event={event} label="+ Google Calendar" />
              <ShareBtn event={event} onToast={onToast} />
              <IGBtn event={event} />
            </div>
          </div>
        </section>
        <aside className="modal-side">
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>mappa</div>
            <MiniMap event={event} />
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>fonte</div>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--fg-soft)' }}>
              Scraped da Instagram il <span className="num">{d.getDate()}/{d.getMonth()+1}</span>. I dati possono cambiare — verifica sempre con l'organizzatore.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>condividi</div>
            <p style={{ margin: '0 0 12px', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.2 }}>
              "{event.event_name}" — {range}{event.time && `, ${event.time}`} @ {event.venue}
            </p>
            <ShareBtn event={event} onToast={onToast} />
          </div>
        </aside>
      </div>
    </div>
  );
}

// ── toast ────────────────────────────────────────────
function Toast({ msg }) {
  if (!msg) return null;
  return <div className="toast">{msg}</div>;
}

Object.assign(window, {
  Icon, ImagePlaceholder, DayBadge, GCalBtn, ShareBtn, IGBtn,
  EventCard, SkeletonCard, MiniMap, MarcheCoast, Modal, Toast,
});