// Detail modal — host profile, rating, reviews, review composer
const { useState: useModalState, useEffect: useModalEffect, useCallback: useModalCallback } = React;

function modalApiBase() {
  return typeof window.getApiBase === "function" ? window.getApiBase() : "http://127.0.0.1:8001/api";
}

const SEED_REVIEWS = {
  w1: [
    { id: "r1", name: "Maja P.", initial: "M", rating: 5, text: "Ana je mirna učiteljica, glina je čudovita. Odnesla dve skodelici.", when: "pred 3 dnevi", color: "tomato" },
    { id: "r2", name: "Luka K.", initial: "L", rating: 4, text: "Super za začetnike. Samo kolo se malo trese.", when: "pred 2 tednoma", color: "cobalt" },
  ],
  w2: [
    { id: "r3", name: "Tina R.", initial: "T", rating: 5, text: "Najlepše popoldne v zadnjem času. Marjetica je navdihujoča.", when: "pred 1 tednom", color: "sage" },
  ],
  w6: [
    { id: "r4", name: "Nina G.", initial: "N", rating: 5, text: "Statve so čarobne. Volna diši po dežju.", when: "pred 4 dnevi", color: "mustard" },
  ],
};

/** Crawled `source_url` or fallback from `source` host string → absolute https URL */
function workshopExternalUrl(w) {
  const raw = String(w.sourceUrl || w.source_url || "").trim();
  if (raw) {
    if (/^https?:\/\//i.test(raw)) return raw;
    if (/^\/\//.test(raw)) return "https:" + raw;
    return "https://" + raw.replace(/^\/+/, "");
  }
  const src = String(w.source || "").trim();
  if (!src) return "";
  if (/^https?:\/\//i.test(src)) return src;
  if (/^[a-z0-9][a-z0-9.-]*\.[a-z]{2,}(\/.*)?$/i.test(src)) return "https://" + src;
  return "";
}

function DetailModal({ workshop, onClose, userRating, setUserRating, fav, toggleFav, user, onRequestLogin, reviews, addReview, onReviewSubmitted, onViewHostPage }) {
  const t = useT();
  const [composing, setComposing] = useModalState(false);
  const [apiReviews, setApiReviews] = useModalState(null);

  const fetchReviews = useModalCallback(() => {
    fetch(`${modalApiBase()}/reviews/${workshop.id}`)
      .then(r => r.ok ? r.json() : [])
      .then(data => {
        setApiReviews(Array.isArray(data) ? data.map(r => ({
          id: r.id,
          name: r.user_name || "Anonimni",
          initial: r.user_initial || (r.user_name || "A")[0],
          rating: r.rating || 0,
          text: r.text || "",
          when: r.created_at
            ? new Date(r.created_at).toLocaleDateString("sl-SI")
            : "pravkar",
          color: "cobalt",
        })) : []);
      })
      .catch(() => setApiReviews([]));
  }, [workshop.id]);

  useModalEffect(() => {
    fetchReviews();
  }, [fetchReviews]);

  useModalEffect(() => {
    const onKey = e => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!workshop) return null;
  const extUrl = workshopExternalUrl(workshop);
  const accent = accentFor(workshop.category);
  const seed = SEED_REVIEWS[workshop.id] || [];
  const localUserReviews = reviews[workshop.id] || [];
  const allReviews = apiReviews !== null ? apiReviews : [...localUserReviews, ...seed];
  const hasReviewed = user && apiReviews !== null &&
    apiReviews.some(r => r.name === user.name);

  /** Community line matches list cards: parent refreshes workshop from API after each save. */
  const liveReviewCount = workshop.reviews;
  const liveRating = workshop.rating;

  const myReview = user && Array.isArray(apiReviews)
    ? apiReviews.find(r => r.name === user.name)
    : null;

  const tryCompose = () => { if (!user) return onRequestLogin(); setComposing(true); };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className={`modal accent-${accent}`} onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Zapri">✕</button>

        <div className="modal-cover">
          <CoverPlaceholder workshop={workshop} tall />
          <div className="modal-cover-overlay">
            <span className="pill pill-solid">{catLabel(workshop.category)}</span>
          </div>
        </div>

        <div className="modal-body">
          <div className="modal-head">
            <div className="mono tiny muted">
              {workshop.city.toUpperCase()} · {workshop.duration} · {workshop.level}
              {workshop.capacity > 0 && (
                <span> · {t.capacityMeta(workshop.capacity)}</span>
              )}
              {workshop.nextDate
                ? <span style={{color:"var(--accent-cobalt)",fontWeight:600}}> · 📅 {workshop.nextDate}</span>
                : <span> · {{"one-time":"Enkraten termin","weekly":"Vsak teden","monthly":"Vsak mesec","recurring":"Po dogovoru"}[workshop.scheduleType] || "Na zahtevo"}</span>
              }
            </div>
            <h2 className="modal-title">{workshop.title}</h2>
            <div className="modal-sub">{workshop.subtitle}</div>
          </div>

          <p className="modal-blurb">{workshop.blurb}</p>

          <div className="modal-tags">
            {(Array.isArray(workshop.tags) ? workshop.tags : []).map(tag => <span key={tag} className="pill pill-sm">#{tag}</span>)}
          </div>

          <section className="host-block">
            <div className="section-label mono tiny">{t.hostSection}</div>
            <div className="host-card">
              <div className={`avatar big avatar-${accent}`}>{workshop.host[0]}</div>
              <div className="host-card-body">
                <div className="host-card-name">{workshop.host}</div>
                <div className="host-card-bio">{workshop.hostBio}</div>
                <div className="host-card-links">
                  {extUrl ? (
                    <a className="host-link mono tiny" href={extUrl} target="_blank" rel="noopener noreferrer">
                      → {workshop.source}
                    </a>
                  ) : (
                    <span className="host-link mono tiny muted">→ {workshop.source}</span>
                  )}
                  {onViewHostPage && (
                    <button type="button" className="host-link host-profile-link mono tiny" onClick={() => onViewHostPage(workshop.host)}>
                      {t.viewHostProfile} →
                    </button>
                  )}
                </div>
              </div>
            </div>
          </section>

          <section className="rate-block">
            <div className="rate-aggregate">
              <Stars rating={liveRating} />
              <span className="mono tiny muted">{t.communityRatings(liveReviewCount)}</span>
            </div>
            {myReview && (
              <div className="mono tiny" style={{marginTop:"6px",opacity:0.7}}>
                {t.yourRating(myReview.rating)}
              </div>
            )}
          </section>

          <section className="reviews-block">
            <div className="reviews-head">
              <div className="section-label mono tiny">{t.reviewsSection}</div>
              {!composing && !hasReviewed && (
                <button className="btn-write-review mono tiny" onClick={tryCompose}>
                  {user ? t.writeReview : t.loginToReview}
                </button>
              )}
            {!composing && hasReviewed && (
                <span className="mono tiny muted">✓ {t.alreadyReviewed || "Že ocenjeno"}</span>
              )}
            </div>

            {composing && user && (
              <ReviewComposer
                user={user}
                onCancel={() => setComposing(false)}
                onSubmit={({ rating, text }) => {
                  fetch(`${modalApiBase()}/reviews/${workshop.id}`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                      name: user.name,
                      initial: user.initial || (user.name && user.name[0]) || "?",
                      rating,
                      text,
                    }),
                  })
                    .then(res => {
                      if (!res.ok) throw new Error(String(res.status));
                      setUserRating(workshop.id, rating);
                      fetchReviews();
                      if (onReviewSubmitted) onReviewSubmitted();
                    })
                    .catch(() => {});
                  setComposing(false);
                }}
              />
            )}

            <div className="reviews-list">
              {apiReviews === null && (
                <div className="mono tiny muted" style={{padding:"12px 0"}}>Nalagam…</div>
              )}
              {apiReviews !== null && allReviews.length === 0 && (
                <div className="mono tiny muted" style={{padding:"12px 0"}}>
                  {t.noReviews(user?.name)}
                </div>
              )}
              {allReviews.map(r => (
                <div key={r.id} className={`review-item ${r.mine ? "mine" : ""}`}>
                  <div className={`avatar avatar-${r.color}`}>{r.initial}</div>
                  <div className="review-body">
                    <div className="review-meta">
                      <span className="review-name">
                        {r.name}
                        {r.mine && <span className="mono tiny" style={{marginLeft:"6px",color:"var(--accent-tomato)"}}>{t.mineLabel}</span>}
                      </span>
                      <span className="mono tiny muted">· {r.when}</span>
                    </div>
                    <div className="review-stars mono tiny">
                      {"★".repeat(r.rating)}<span className="muted">{"★".repeat(5-r.rating)}</span>
                    </div>
                    <div className="review-text">{r.text}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <div className="modal-footer">
            <div>
              <div className="mono tiny muted">{t.priceLabel}</div>
              <div className="price-big">{workshop.price > 0 ? `${workshop.price}€` : "—"} {workshop.price > 0 && <span className="mono tiny muted">{t.perPerson}</span>}</div>
            </div>
            <div className="modal-actions">
              <button className={`btn-fav ${fav ? "on" : ""}`} onClick={toggleFav}>
                {fav ? t.btnSaved : t.btnSave}
              </button>
              {extUrl ? (
                <a className="btn-primary" href={extUrl} target="_blank" rel="noopener noreferrer">
                  {t.visitBtn(workshop.source)}
                </a>
              ) : (
                <span className="btn-primary" style={{ opacity: 0.55, cursor: "default", pointerEvents: "none" }} aria-disabled="true">
                  {t.visitBtn(workshop.source)}
                </span>
              )}
            </div>
          </div>

          <div className="crawl-signal">
            <span className="status-dot" />
            <span className="mono tiny muted">{t.crawlSignal(workshop.source, workshop.lastCrawled)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DetailModal, WORKSHOP_SEED_REVIEWS: SEED_REVIEWS });