/* global React, PORTFOLIO_DATA, SectionHd, fmtDate */
const { useState: usePassionsState } = React;

const tt = (obj, lang) => (typeof obj === "string" ? obj : obj?.[lang] ?? obj?.fr ?? "");

// ─────────────────────────────────────────────────────────────────────
// PASSIONS — DJ sets + ambient text
// "Hors-bureau" — what I do when the IDE is closed
//
// Tout le contenu provient de data.passions (+ data.djSets pour la liste
// des dates). Voir src/data.js pour le schéma.
// ─────────────────────────────────────────────────────────────────────
function Passions({ lang, data }) {
  const [tab, setTab] = usePassionsState("dj");
  const p = data.passions || {};
  const tabs = lang === "fr"
    ? [["dj","DJ & sets"], ["other","Le reste"]]
    : [["dj","DJ & sets"], ["other","Other"]];

  return (
    <section className="section" id="passions">
      <SectionHd
        num={lang === "fr" ? "05 / HORS-BUREAU" : "05 / OFF-HOURS"}
        title={lang === "fr" ? "Ce que je fais quand l'IDE est fermé." : "What I do when the IDE is closed."}
        accentWord={lang === "fr" ? "fermé" : "closed"}
        sub={lang === "fr" ? "Pour le contexte. Souvent, mes side-projects naissent ici." : "For context. My side-projects usually start here."}
      />

      <div className="proj-controls">
        {tabs.map(([k, l]) => (
          <button key={k} className={tab === k ? "active" : ""} onClick={() => setTab(k)}>{l}</button>
        ))}
      </div>

      {tab === "dj" && (
        <div className="passions-dj">
          {p.djIntro ? (
            <p className="passions-intro">{tt(p.djIntro, lang)}</p>
          ) : null}
          <div className="sets">
            {data.djSets.map((s, i) => {
              const d = fmtDate(s.date, lang);
              return (
                <div className="set" key={i}>
                  <div className="day">{d.day}<span className="mo">{d.mo} {d.year}</span></div>
                  <div>
                    <div className="venue">{s.venue}</div>
                    <div className="city">{s.city}</div>
                  </div>
                  <div className="kind">{tt(s.kind, lang)}</div>
                  <span className={`status ${s.status}`}>
                    {s.status === "confirmed"
                      ? (lang === "fr" ? "Confirmé" : "Confirmed")
                      : s.status === "past"
                        ? (lang === "fr" ? "Passé" : "Past")
                        : (lang === "fr" ? "À confirmer" : "Tentative")}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {tab === "other" && (
        <div className="other-grid">
          {(p.hobbies || []).map((h, i) => (
            <div className="passion-card" key={i}>
              <div className="passion-num">{String(i + 1).padStart(2, "0")}</div>
              <h4>{tt(h.title, lang)}</h4>
              <p>{tt(h.blurb, lang)}</p>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

Object.assign(window, { Passions });