// Workshop cards — three styles: hero/feature, image-forward, compact row
const { useState: useCardState } = React;

function fmtPrice(price) {
  return price > 0 ? `${price}€` : "—";
}

function scheduleLabel(type, lang) {
  const map = {
    "one-time":  { sl: "Enkraten termin", en: "One-time" },
    "weekly":    { sl: "Vsak teden",      en: "Weekly" },
    "monthly":   { sl: "Vsak mesec",      en: "Monthly" },
    "recurring": { sl: "Po dogovoru",      en: "On demand" },
  };
  const entry = map[type] || map["recurring"];
  return lang === "en" ? entry.en : entry.sl;
}

function scheduleBadge(workshop, lang) {
  if (workshop.nextDate) {
    // Format date nicely: 2026-05-10 → 10. maj
    const months = lang === "en"
      ? ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
      : ["jan","feb","mar","apr","maj","jun","jul","avg","sep","okt","nov","dec"];
    const parts = workshop.nextDate.split("-");
    if (parts.length === 3) {
      const d = parseInt(parts[2], 10);
      const m = parseInt(parts[1], 10) - 1;
      return `${d}. ${months[m]}`;
    }
    return workshop.nextDate;
  }
  return scheduleLabel(workshop.scheduleType || "recurring", lang);
}

/** For calendar-style chip on cover (Y-M-D from API). */
function workshopDateParts(workshop) {
  if (!workshop.nextDate) return null;
  const parts = String(workshop.nextDate).split("-");
  if (parts.length !== 3) return null;
  const d = parseInt(parts[2], 10);
  const m = parseInt(parts[1], 10) - 1;
  if (Number.isNaN(d) || m < 0 || m > 11) return null;
  const monthUpper = [
    "JAN", "FEB", "MAR", "APR", "MAJ", "JUN", "JUL", "AVG", "SEP", "OKT", "NOV", "DEC"
  ];
  return { day: d, month: monthUpper[m] };
}

function CardDateOverlay({ workshop, lang, place }) {
  const p = workshopDateParts(workshop);
  if (!p) return null;
  const label = scheduleBadge(workshop, lang);
  const extra = place === "tr" ? " card-date-overlay--tr" : "";
  return (
    <div className={`card-date-overlay${extra}`} title={label} role="img" aria-label={label}>
      <span className="card-date-overlay-day">{p.day}</span>
      <span className="card-date-overlay-month">{p.month}</span>
    </div>
  );
}

function accentFor(category) {
  const cat = CATEGORIES.find(c => c.id === category);
  return cat ? cat.color : "ink";
}
function catLabel(category, lang) {
  const cat = CATEGORIES.find(c => c.id === category);
  if (!cat) return category;
  return lang === "en" ? cat.en : cat.label;
}


function CoverPlaceholder({ workshop, tall }) {
  const accent = accentFor(workshop.category);
  const imageUrl = workshop.imageUrl || workshop.image_url;
  const [imgFailed, setImgFailed] = useCardState(false);

  if (imageUrl && !imgFailed) {
    return (
      <div className={`cover cover-${accent}`} style={{ aspectRatio: tall ? "3/4" : "4/3" }}>
        <img className="cover-photo" src={imageUrl} alt={workshop.title}
          loading="lazy" decoding="async"
          onError={() => setImgFailed(true)}
        />
      </div>
    );
  }

  const PLACEHOLDER_IMGS = {
    pottery:   "images/pottery.png",
    painting:  "images/painting.png",
    glass:     "images/glass.png",
    print:     "images/graphics.png",
    sculpture: "images/statue.png",
    textile:   "images/textile.png",
    photo:     "images/photo.png",
    mixed:     "images/mix.png",
    kids:      "images/mix.png",
    adults:    "images/mix.png",
  };
  const placeholderSrc = PLACEHOLDER_IMGS[workshop.category] || "images/mix.png";

  return (
    <div className={`cover cover-${accent}`} style={{ aspectRatio: tall ? "3/4" : "4/3" }}>
      <img className="cover-photo" src={placeholderSrc} alt={workshop.title} loading="lazy" decoding="async" />
    </div>
  );
}


function Stars({ rating, compact }) {
  const r = Number(rating) || 0;
  return (
    <span className={`stars ${compact ? "stars-compact" : ""}`}>
      <span className="star-num">{r.toFixed(1)}</span>
      <span className="star-dots">
        {[1,2,3,4,5].map(i => (
          <span key={i} className={`dot ${r >= i - 0.3 ? "filled" : ""}`}>●</span>
        ))}
      </span>
    </span>
  );
}

function FavBtn({ on, onClick }) {
  return (
    <button className={`fav ${on ? "on" : ""}`} onClick={e => { e.stopPropagation(); onClick(); }}
      aria-label={on ? "Odstrani iz priljubljenih" : "Dodaj med priljubljene"}>
      <svg viewBox="0 0 24 24" width="18" height="18">
        <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"
          fill={on ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

function FeatureCard({ workshop, fav, toggleFav, onOpen, lang, onOpenHost }) {
  const t = useT();
  return (
    <article className={`card feature accent-${accentFor(workshop.category)}`} onClick={() => onOpen(workshop)}>
      <div className="feature-cover">
        <div className="card-cover-stack">
          <CoverPlaceholder workshop={workshop} />
          <CardDateOverlay workshop={workshop} lang={lang} place="tr" />
        </div>
        <div className="feature-ribbon">
          <span className="mono tiny">
            {workshop.nextDate ? scheduleBadge(workshop, lang) : t.weekLabel(15)}
          </span>
        </div>
      </div>
      <div className="feature-body">
        <div className="feature-body-left">
          <div className="feature-meta">
            <span className="pill pill-solid">{catLabel(workshop.category, lang)}</span>
            <span className="mono tiny muted">
              {workshop.city.toUpperCase()}
              {workshop.capacity > 0 && (
                <span> · {t.capacityMeta(workshop.capacity)}</span>
              )}
            </span>
          </div>
          <h2 className="feature-title">{workshop.title}</h2>
          <div
            className={`feature-host${onOpenHost ? " host-clickable" : ""}`}
            role={onOpenHost ? "link" : undefined}
            tabIndex={onOpenHost ? 0 : undefined}
            onClick={e => { if (onOpenHost) { e.stopPropagation(); onOpenHost(workshop.host); } }}
            onKeyDown={e => { if (onOpenHost && e.key === "Enter") { e.stopPropagation(); onOpenHost(workshop.host); } }}
          >{workshop.host}</div>
        </div>
        <div className="feature-footer">
          <div className="price-big">{fmtPrice(workshop.price)}</div>
          <FavBtn on={fav} onClick={toggleFav} />
        </div>
      </div>
    </article>
  );
}

function GridCard({ workshop, fav, toggleFav, onOpen, density, lang, onOpenHost }) {
  const t = useT();
  return (
    <article className={`card grid-card accent-${accentFor(workshop.category)} density-${density}`} onClick={() => onOpen(workshop)}>
      <div className="card-cover-stack">
        <CoverPlaceholder workshop={workshop} />
        <CardDateOverlay workshop={workshop} lang={lang} />
      </div>
      <div className="grid-body">
        <div className="grid-top">
          <span className="pill">{catLabel(workshop.category, lang)}</span>
          <Stars rating={workshop.rating} compact />
        </div>
        <h3 className="grid-title">{workshop.title}</h3>
        <div className="grid-meta">
          <span
            className={`host-name small${onOpenHost ? " host-clickable" : ""}`}
            role={onOpenHost ? "link" : undefined}
            tabIndex={onOpenHost ? 0 : undefined}
            onClick={e => { if (onOpenHost) { e.stopPropagation(); onOpenHost(workshop.host); } }}
            onKeyDown={e => { if (onOpenHost && e.key === "Enter") { e.stopPropagation(); onOpenHost(workshop.host); } }}
          >{workshop.host}</span>
          <span className="mono tiny muted">
            · {workshop.city}
            {workshop.capacity > 0 && (
              <span> · {t.capacityMeta(workshop.capacity)}</span>
            )}
          </span>
        </div>
        <div className="grid-footer">
          <span className="price">{fmtPrice(workshop.price)}</span>
          <span className="mono tiny muted">{workshop.reviews} {t.ratings}</span>
        </div>
        <div style={{display:"flex",gap:"6px",flexWrap:"wrap",marginTop:"6px"}}>
          {workshop.forKids && <span className="pill pill-sm audience-kids">{lang === "en" ? "Kids" : "Za otroke"}</span>}
          {workshop.forAdults && <span className="pill pill-sm audience-adults">{lang === "en" ? "Adults" : "Odrasli"}</span>}
          <span className={`schedule-badge mono tiny${workshop.nextDate ? " schedule-badge-date" : ""}`}>
            {scheduleBadge(workshop, lang)}
          </span>
        </div>
      </div>
      <FavBtn on={fav} onClick={toggleFav} />
    </article>
  );
}

function RowCard({ workshop, fav, toggleFav, onOpen, lang, onOpenHost }) {
  const t = useT();
  return (
    <article className={`card row-card accent-${accentFor(workshop.category)}`} onClick={() => onOpen(workshop)}>
      <div className="row-body">
        <div className="row-line-1">
          <h3 className="row-title">{workshop.title}</h3>
          <div className="row-line-1-right">
            {workshop.nextDate && (
              <span className="row-date-ribbon mono small">{scheduleBadge(workshop, lang)}</span>
            )}
            <span className="price">{fmtPrice(workshop.price)}</span>
          </div>
        </div>
        <div className="row-line-2">
          <span
            className={`host-name small${onOpenHost ? " host-clickable" : ""}`}
            role={onOpenHost ? "link" : undefined}
            tabIndex={onOpenHost ? 0 : undefined}
            onClick={e => { if (onOpenHost) { e.stopPropagation(); onOpenHost(workshop.host); } }}
            onKeyDown={e => { if (onOpenHost && e.key === "Enter") { e.stopPropagation(); onOpenHost(workshop.host); } }}
          >{workshop.host}</span>
          <span className="mono tiny muted">
            · {workshop.city} · {workshop.duration}
            {workshop.capacity > 0 && (
              <span> · {t.capacityMeta(workshop.capacity)}</span>
            )}
          </span>
        </div>
        <div className="row-line-3">
          <span className="pill pill-sm">{catLabel(workshop.category, lang)}</span>
          {workshop.forKids && <span className="pill pill-sm audience-kids">{lang === "en" ? "Kids" : "Za otroke"}</span>}
          {workshop.forAdults && <span className="pill pill-sm audience-adults">{lang === "en" ? "Adults" : "Za odrasle"}</span>}
          <span className={`schedule-badge mono tiny${workshop.nextDate ? " schedule-badge-date" : ""}`}>
            {scheduleBadge(workshop, lang)}
          </span>
          <Stars rating={workshop.rating} compact />
          <span className="mono tiny muted">({workshop.reviews})</span>
        </div>
      </div>
      <FavBtn on={fav} onClick={toggleFav} />
    </article>
  );
}

function PosterCard({ workshop, fav, toggleFav, onOpen, lang, onOpenHost }) {
  const t = useT();
  return (
    <article className={`card poster-card accent-${accentFor(workshop.category)}`} onClick={() => onOpen(workshop)}>
      <div className="poster-top">
        <span className="mono tiny">
          {workshop.city.toUpperCase()} / {workshop.duration}
          {workshop.capacity > 0 && ` / ${t.capacityMeta(workshop.capacity)}`}
        </span>
        {workshop.nextDate && (
          <span className="poster-date-ribbon mono tiny">{scheduleBadge(workshop, lang)}</span>
        )}
      </div>
      <h3 className="poster-title">{workshop.title}</h3>
      <div className="poster-mid">
        <div
          className={`host-name${onOpenHost ? " host-clickable" : ""}`}
          role={onOpenHost ? "link" : undefined}
          tabIndex={onOpenHost ? 0 : undefined}
          onClick={e => { if (onOpenHost) { e.stopPropagation(); onOpenHost(workshop.host); } }}
          onKeyDown={e => { if (onOpenHost && e.key === "Enter") { e.stopPropagation(); onOpenHost(workshop.host); } }}
        >{workshop.host}</div>
        <div className="mono tiny muted">{catLabel(workshop.category, lang).toLowerCase()}</div>
      </div>
      <div className="poster-footer">
        <span className="poster-price">{fmtPrice(workshop.price)}</span>
        <Stars rating={workshop.rating} compact />
      </div>
      <FavBtn on={fav} onClick={toggleFav} />
    </article>
  );
}

Object.assign(window, { FeatureCard, GridCard, RowCard, PosterCard, Stars, FavBtn, CoverPlaceholder, accentFor, catLabel, scheduleBadge });