/* Garbashala — Library / All Steps */

const DIFFICULTY_OPTIONS = ["any", "★", "★★", "★★★", "★★★★"];
const TYPE_OPTIONS = ["any", "be taali", "tran taali", "song", "dandiya"];
const SORT_OPTIONS = ["beginner first", "alphabetical", "newest"];

const Library = () => {
  const all = window.GARBA_STEPS;

  const [difficulty, setDifficulty] = React.useState("any");
  const [type, setType] = React.useState("any");
  const [sort, setSort] = React.useState("beginner first");

  const visible = React.useMemo(() => {
    let list = all.map((s, i) => ({ ...s, _idx: i }));
    if (difficulty !== "any") {
      const lvl = difficulty.length;
      list = list.filter((s) => s.difficulty === lvl);
    }
    if (type !== "any") {
      list = list.filter((s) => Array.isArray(s.types) && s.types.includes(type));
    }
    if (sort === "alphabetical") {
      list = [...list].sort((a, b) => a.name.localeCompare(b.name));
    } else if (sort === "newest") {
      list = [...list].sort((a, b) => b._idx - a._idx);
    } else {
      list = [...list].sort((a, b) => a.difficulty - b.difficulty || a._idx - b._idx);
    }
    return list;
  }, [all, difficulty, type, sort]);

  const filtered = visible.length !== all.length;

  return (
    <div className="paper-bg" style={{ minHeight: 1400, fontFamily: "var(--font-body)", color: "var(--ink)" }}>
      <NavBar active="library" />

      {/* PAGE HEADER */}
      <section style={{ padding: "60px 48px 30px", position: "relative" }}>
        <div style={{ position: "absolute", right: 64, top: 40, opacity: 0.4 }}>
          <Marigold size={120} />
        </div>
        <div style={{ position: "absolute", right: 200, top: 110, opacity: 0.3 }}>
          <Marigold size={80} color="var(--terracotta)" />
        </div>

        <span style={{ transform: "rotate(-2deg)", display: "inline-block", fontFamily: "var(--font-handwrite)", fontSize: 26, color: "var(--terracotta)" }}>
          <Handwrite size={28} color="var(--terracotta)" speed={1.3}>the library</Handwrite> ✦
        </span>
        <h1 style={{
          fontFamily: "var(--font-display)", fontStyle: "italic",
          fontSize: 96, lineHeight: 1, margin: "8px 0 16px",
          color: "var(--maroon)", maxWidth: 900,
        }}>
          every step we've documented<span style={{ color: "var(--terracotta)" }}>.</span>
        </h1>
        <p style={{ fontSize: 21, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 640, margin: 0 }}>
          {all.length} steps and counting. Filter by what you're feeling — slow & swaying, fast & spinny,
          modern disco-garba, or the ancient stuff your nani knows.
        </p>
      </section>

      {/* FILTERS */}
      <section className="library-filters" style={{ padding: "20px 48px 30px", display: "flex", gap: 36, alignItems: "center", flexWrap: "wrap" }}>
        <FilterGroup label="difficulty" options={DIFFICULTY_OPTIONS} active={difficulty} onChange={setDifficulty} />
        <FilterGroup label="type" options={TYPE_OPTIONS} active={type} onChange={setType} />
        <FilterGroup label="sort by" options={SORT_OPTIONS} active={sort} onChange={setSort} />

        <div className="library-filters__count" style={{ marginLeft: "auto", fontFamily: "var(--font-handwrite)", fontSize: 20, color: "var(--terracotta)" }}>
          {filtered ? `showing ${visible.length} of ${all.length} ↓` : `showing all ${all.length} ↓`}
        </div>
      </section>

      <div style={{ padding: "0 48px" }}>
        <HandDivider width={1304} />
      </div>

      {/* GRID */}
      <section style={{ padding: "40px 48px 80px" }}>
        {visible.length === 0 ? (
          <p style={{ fontFamily: "var(--font-handwrite)", fontSize: 24, color: "var(--terracotta)", textAlign: "center", padding: "60px 0" }}>
            no steps match these filters yet — try loosening one.
          </p>
        ) : (
          <div className="library-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
            {visible.map((s, i) => (
              <LibraryCard step={s} key={s.slug} idx={i} />
            ))}
          </div>
        )}
      </section>

      {/* BOTTOM CTA */}
      <section style={{ padding: "40px 48px 80px", textAlign: "center" }}>
        <HandDivider width={400} />
        <h2 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 44, color: "var(--maroon)", margin: "30px 0 14px" }}>
          a step we missed?
        </h2>
        <p style={{ fontSize: 18, color: "var(--ink-soft)", maxWidth: 520, margin: "0 auto 24px" }}>
          Garba is endless — every village has its own variation. Send us a video of yours
          and we'll add it (and credit you, of course).
        </p>
        <button style={{
          background: "var(--marigold)", color: "var(--maroon)", border: "1.5px solid var(--maroon)",
          padding: "14px 26px", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20,
          borderRadius: "14px 6px 12px 8px / 8px 12px 6px 14px", boxShadow: "3px 3px 0 var(--maroon)",
        }}>
          send us your step ✉
        </button>
      </section>
    </div>
  );
};

const FilterGroup = ({ label, options, active, onChange }) => (
  <div className="filter-group" style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <span style={{ fontFamily: "var(--font-handwrite)", fontSize: 18, color: "var(--terracotta)" }}>
      {label}:
    </span>
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
      {options.map((o) => (
        <button className="filter-pill" key={o} onClick={() => onChange && onChange(o)} style={{
          background: o === active ? "var(--terracotta)" : "transparent",
          color: o === active ? "var(--paper)" : "var(--ink)",
          border: "1px solid var(--ink)",
          borderRadius: "12px 4px 10px 6px / 6px 10px 4px 12px",
          padding: "5px 12px",
          fontFamily: "var(--font-body)", fontSize: 14,
          fontStyle: o === active ? "italic" : "normal",
          fontWeight: o === active ? 600 : 400,
          cursor: "pointer",
        }}>{o}</button>
      ))}
    </div>
  </div>
);

const LibraryCard = ({ step: s, idx }) => {
  const tilts = [-1.5, 1, -0.5, 0.8, 1.5, -1, 0.5, -0.8];
  return (
    <a href={`#/step/${s.slug}`} className="library-card-link" style={{
      textDecoration: "none", color: "inherit", display: "block",
    }}>
      <article style={{
        background: "var(--paper)",
        border: "1.5px solid var(--ink)",
        borderRadius: idx % 2 === 0 ? "16px 4px 14px 6px / 6px 14px 4px 16px" : "4px 16px 6px 14px / 14px 6px 16px 4px",
        padding: 14,
        transform: `rotate(${tilts[idx % tilts.length]}deg)`,
        boxShadow: "3px 3px 0 var(--ink)",
        position: "relative",
        cursor: "pointer",
      }}>
        {/* tape */}
        <div className="tape" style={{ top: -8, left: 30, transform: `rotate(${idx % 2 === 0 ? -4 : 5}deg)`, width: 60 }} />

        <div style={{
          height: 200,
          background: `linear-gradient(135deg, ${s.color}, ${s.color}cc)`,
          borderRadius: 6,
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "rgba(255,255,255,0.6)", fontFamily: "var(--font-handwrite)", fontSize: 16,
          position: "relative", overflow: "hidden",
        }}>
          <span style={{ textAlign: "center" }}>[ looping gif<br/>{s.name.toLowerCase()} ]</span>
          <span style={{
            position: "absolute", top: 8, right: 8,
            background: "rgba(255,255,255,0.9)", color: s.color,
            padding: "3px 9px", borderRadius: 12,
            fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 12,
          }}>
            ▶ loop
          </span>
          <span style={{
            position: "absolute", bottom: 8, left: 8,
            background: "rgba(0,0,0,0.4)", color: "rgba(255,255,255,0.95)",
            padding: "3px 9px", borderRadius: 12,
            fontFamily: "var(--font-body)", fontSize: 11,
          }}>
            {s.region}
          </span>
          {Array.isArray(s.types) && s.types.length > 0 && (
            <div style={{
              position: "absolute", bottom: 8, right: 8,
              display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4,
            }}>
              {s.types.map((t) => (
                <span key={t} style={{
                  background: "var(--paper)", color: "var(--maroon)",
                  border: "1.5px solid var(--maroon)",
                  padding: "2px 9px",
                  borderRadius: "10px 4px 8px 5px / 5px 8px 4px 10px",
                  fontFamily: "var(--font-display)", fontStyle: "italic",
                  fontSize: 12, letterSpacing: "0.02em",
                  boxShadow: "1.5px 1.5px 0 var(--maroon)",
                }}>
                  {t}
                </span>
              ))}
            </div>
          )}
        </div>

        <div style={{ padding: "14px 4px 4px" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 32, margin: 0, color: "var(--maroon)", lineHeight: 0.95 }}>
              {s.name.toLowerCase()}
            </h3>
            <Difficulty level={s.difficulty} />
          </div>
          <div style={{ fontFamily: "var(--font-handwrite)", fontSize: 19, color: "var(--terracotta)", marginTop: 2 }}>
            {s.gujarati} · {s.beats} steps
          </div>
          <p style={{ fontSize: 14.5, lineHeight: 1.5, margin: "10px 0 14px", color: "var(--ink-soft)" }}>
            {s.summary}
          </p>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
            <span className="pill" style={{ color: "var(--ink-soft)", fontSize: 12 }}>{s.tempo}</span>
          </div>
          <span className="card-action-link" style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17,
            color: "var(--terracotta)", textDecoration: "none", borderBottom: "1.5px wavy solid",
          }}>
            learn this step →
          </span>
        </div>
      </article>
    </a>
  );
};

window.Library = Library;
