/* global React */
(function() {
const { useState: useStateList, useMemo: useMemoList } = React;
const { TopBar: TopBarL, Footer: FooterL, navigate: navL } = window.RT;

function ScalesList({ variant = "table" }) {
  const scales = window.RT_SCALES;
  const [query, setQuery] = useStateList("");
  const [category, setCategory] = useStateList("Tutte");
  const categories = useMemoList(() => ["Tutte", ...new Set(scales.map(s => s.category))], [scales]);

  const filtered = scales.filter(s => {
    const q = query.trim().toLowerCase();
    if (q && !s.name.toLowerCase().includes(q) && !s.nameEn.toLowerCase().includes(q) && !s.short.toLowerCase().includes(q)) return false;
    if (category !== "Tutte" && s.category !== category) return false;
    return true;
  });

  return (
    <>
      <TopBarL active="scales" now={new Date().toLocaleString("it-IT", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })} />
      <main style={{ flex: 1, padding: "48px 0 64px" }}>
        <div className="rt-container">
          <div style={{ marginBottom: 32 }}>
            <div className="rt-eyebrow">Catalogo strumenti</div>
            <h1 style={{ fontSize: 40, marginTop: 8 }}>Scale di valutazione</h1>
            <p style={{ fontSize: 16, color: "var(--rt-muted)", maxWidth: 640, marginTop: 12, lineHeight: 1.55 }}>
              Strumenti validati per la valutazione fisioterapica e riabilitativa. Seleziona una scala per avviare la somministrazione.
            </p>
          </div>

          {/* Filters */}
          <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 20, flexWrap: "wrap" }}>
            <input
              className="rt-input"
              placeholder="Cerca per nome…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              style={{ minWidth: 280, flex: "0 1 320px" }}
            />
            <div style={{ display: "flex", gap: 4, padding: 4, background: "#fff", border: "1px solid var(--rt-line)", borderRadius: "var(--rt-r)" }}>
              {categories.map(c => (
                <button
                  key={c}
                  onClick={() => setCategory(c)}
                  style={{
                    border: "none",
                    background: category === c ? "var(--rt-navy-800)" : "transparent",
                    color: category === c ? "#fff" : "var(--rt-text)",
                    padding: "6px 14px",
                    borderRadius: "var(--rt-r-sm)",
                    fontSize: 13,
                    fontWeight: 500,
                  }}
                >{c}</button>
              ))}
            </div>
            <div style={{ marginLeft: "auto", fontSize: 13, color: "var(--rt-muted)" }}>
              <span className="rt-mono">{filtered.length}</span> {filtered.length === 1 ? "scala" : "scale"}
            </div>
          </div>

          {variant === "grid" ? (
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(380px, 1fr))", gap: 16 }}>
              {filtered.map(s => (
                <div key={s.id} className="rt-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                    <div className="rt-glyph">{s.glyph}</div>
                    <span className={`rt-tag ${s.category === "Dolore" ? "amber" : "teal"}`}>{s.category}</span>
                  </div>
                  <div>
                    <h3 style={{ fontSize: 19, marginBottom: 4 }}>{s.name}</h3>
                    <div style={{ fontSize: 12, color: "var(--rt-muted)", fontStyle: "italic" }}>{s.nameEn}</div>
                  </div>
                  <p style={{ fontSize: 13, color: "var(--rt-muted)", margin: 0, lineHeight: 1.5 }}>{s.description}</p>
                  <div style={{ display: "flex", gap: 14, fontSize: 12, color: "var(--rt-muted)", paddingTop: 12, borderTop: "1px solid var(--rt-line-2)" }}>
                    <span>{s.items} {s.items === 1 ? "item" : "item"}</span>
                    <span>·</span>
                    <span className="rt-mono">{s.range}</span>
                    <span>·</span>
                    <span>{s.duration}</span>
                  </div>
                  <button className="rt-btn primary" onClick={() => navL(`/scale/${s.id}`)}>Somministra →</button>
                </div>
              ))}
            </div>
          ) : (
            <div className="rt-card" style={{ overflow: "hidden" }}>
              <table className="rt-table">
                <thead>
                  <tr>
                    <th style={{ width: 56 }}></th>
                    <th>Scala</th>
                    <th>Dominio</th>
                    <th>Categoria</th>
                    <th>Item</th>
                    <th>Range</th>
                    <th>Durata</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(s => (
                    <tr key={s.id} className="row-link" onClick={() => navL(`/scale/${s.id}`)}>
                      <td><div className="rt-glyph" style={{ width: 32, height: 32, fontSize: 11 }}>{s.glyph}</div></td>
                      <td>
                        <div style={{ fontWeight: 500, color: "var(--rt-navy-900)" }}>{s.name}</div>
                        <div style={{ fontSize: 12, color: "var(--rt-muted)", fontStyle: "italic", marginTop: 2 }}>{s.nameEn}</div>
                      </td>
                      <td style={{ color: "var(--rt-muted)", fontSize: 13 }}>{s.domain}</td>
                      <td><span className={`rt-tag ${s.category === "Dolore" ? "amber" : "teal"}`}>{s.category}</span></td>
                      <td className="rt-mono" style={{ fontSize: 13 }}>{s.items}</td>
                      <td className="rt-mono" style={{ fontSize: 13 }}>{s.range}</td>
                      <td style={{ fontSize: 13, color: "var(--rt-muted)" }}>{s.duration}</td>
                      <td style={{ textAlign: "right" }}>
                        <button className="rt-btn sm" onClick={(e) => { e.stopPropagation(); navL(`/scale/${s.id}`); }}>Somministra →</button>
                      </td>
                    </tr>
                  ))}
                  {filtered.length === 0 && (
                    <tr><td colSpan="8" style={{ textAlign: "center", padding: 48, color: "var(--rt-muted)" }}>Nessuna scala trovata.</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          )}

          <div style={{ marginTop: 32, padding: 20, background: "var(--rt-navy-50)", border: "1px solid var(--rt-navy-100)", borderRadius: "var(--rt-r-lg)", display: "flex", gap: 16, alignItems: "center" }}>
            <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#fff", border: "1px solid var(--rt-navy-100)", display: "grid", placeItems: "center", color: "var(--rt-navy-700)", fontFamily: "var(--rt-serif)", fontWeight: 600 }}>i</div>
            <div style={{ flex: 1, fontSize: 13, color: "var(--rt-text)" }}>
              <strong>Catalogo in espansione.</strong> <span style={{ color: "var(--rt-muted)" }}>In arrivo: Berg Balance Scale, Tinetti, Functional Independence Measure, Modified Ashworth.</span>
            </div>
          </div>
        </div>
      </main>
      <FooterL />
    </>
  );
}

window.RT.ScalesList = ScalesList;
})();