/* global React, PageHeader, FadeUp */

function PageResultats({ onNav }) {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [year, setYear] = React.useState(2026);
  const [selectedDisc, setSelectedDisc] = React.useState(null);

  React.useEffect(() => {
    fetch("data/resultats-2026.json")
      .then((r) => r.json())
      .then(setData)
      .catch((e) => setError(e.message));
  }, []);

  if (error)
    return (
      <div className="container-wide" style={{ padding: 64 }}>
        Erreur : {error}
      </div>
    );
  if (!data)
    return (
      <div className="container-wide" style={{ padding: 64 }}>
        <div className="tag-mono">— Chargement —</div>
      </div>
    );

  const years = data.saisons_disponibles;
  const disciplines = data.disciplines;

  const isCurrentSeason = year === 2026;
  const totalManches = disciplines.reduce(
    (sum, d) => sum + d.manches.length,
    0,
  );

  return (
    <div className="container-wide">
      <PageHeader
        eyebrow="Depuis 1985"
        title="Archives des"
        italic="résultats"
        subtitle={`Plus de quarante ans de classements, manche par manche, discipline par discipline. Saison ${year} : ${disciplines.length} disciplines, ${totalManches} manches au programme. Les classements détaillés sont accessibles dans l'espace membre.`}
      />

      {/* Year grid */}
      <div style={{ marginTop: 24, marginBottom: 56 }}>
        <div className="tag-mono" style={{ marginBottom: 16 }}>
          — Sélectionner une saison ({years.length} disponibles)
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(8, 1fr)",
            gap: 0,
            border: "1px solid var(--hairline)",
          }}
          className="year-grid"
        >
          {years.map((y) => {
            const isActive = y === year;
            return (
              <button
                key={y}
                onClick={() => setYear(y)}
                style={{
                  padding: "18px 4px",
                  border: 0,
                  borderRight: "1px solid var(--hairline)",
                  borderBottom: "1px solid var(--hairline)",
                  background: isActive ? "var(--accent)" : "var(--white)",
                  color: isActive ? "var(--paper)" : "var(--ink)",
                  fontFamily: "var(--mono)",
                  fontSize: 13,
                  letterSpacing: "0.04em",
                  cursor: "pointer",
                  transition: "background .2s, color .2s",
                }}
                onMouseEnter={(e) => {
                  if (!isActive)
                    e.currentTarget.style.background = "var(--paper-2)";
                }}
                onMouseLeave={(e) => {
                  if (!isActive)
                    e.currentTarget.style.background = "var(--white)";
                }}
              >
                {y}
              </button>
            );
          })}
        </div>
      </div>

      {/* year header */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          marginBottom: 32,
          flexWrap: "wrap",
          gap: 16,
        }}
      >
        <h2
          style={{
            fontFamily: "var(--display)",
            fontSize: 56,
            fontWeight: 500,
            margin: 0,
            letterSpacing: "-0.02em",
          }}
        >
          <em style={{ color: "var(--accent-deep)" }}>{year}</em> · vue
          d'ensemble
        </h2>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <span className="chip">{totalManches} manches</span>
          <span className="chip">{disciplines.length} disciplines</span>
          <button
            className="btn btn-ghost"
            style={{ padding: "8px 14px", fontSize: 12 }}
          >
            ↓ PDF
          </button>
          <button
            className="btn btn-ghost"
            style={{ padding: "8px 14px", fontSize: 12 }}
          >
            ↓ CSV
          </button>
        </div>
      </div>

      {!isCurrentSeason && (
        <div
          style={{
            marginBottom: 32,
            padding: 20,
            background: "var(--paper-2)",
            border: "1px dashed var(--hairline-strong)",
            display: "flex",
            alignItems: "center",
            gap: 16,
            flexWrap: "wrap",
          }}
        >
          <div style={{ flex: 1 }}>
            <div className="tag-mono" style={{ marginBottom: 4 }}>
              — Saison archivée
            </div>
            <div style={{ fontSize: 14, color: "var(--gray)" }}>
              Les classements détaillés de la saison {year} sont disponibles en
              téléchargement PDF ou via l'espace membre.
            </div>
          </div>
          <button className="btn btn-ghost-gold" onClick={() => setYear(2026)}>
            Retour à 2026 →
          </button>
        </div>
      )}

      {/* Disciplines grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
        }}
        className="disc-grid"
      >
        {disciplines.map((d, i) => (
          <FadeUp key={d.id} delay={i * 40}>
            <div
              className="card-action"
              style={{
                minHeight: 220,
                cursor: "pointer",
                display: "flex",
                flexDirection: "column",
              }}
              onClick={() => setSelectedDisc(d)}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "flex-start",
                }}
              >
                <div>
                  <div
                    style={{
                      fontFamily: "var(--display)",
                      fontSize: 30,
                      fontWeight: 600,
                    }}
                  >
                    {d.id}
                  </div>
                  <div
                    className="tag-mono"
                    style={{ fontSize: 10, marginTop: 4 }}
                  >
                    {d.name}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div
                    style={{
                      fontFamily: "var(--display)",
                      fontStyle: "italic",
                      fontSize: 30,
                      color: "var(--accent-deep)",
                    }}
                  >
                    {d.manches.length}
                  </div>
                  <div className="tag-mono" style={{ fontSize: 9 }}>
                    manches
                  </div>
                </div>
              </div>
              <hr className="hr-fine" style={{ margin: "20px 0" }} />
              <p
                style={{
                  fontSize: 13,
                  color: "var(--gray)",
                  lineHeight: 1.55,
                  margin: "0 0 16px",
                  flex: 1,
                }}
              >
                {d.description}
              </p>
              <div className="link-arrow">
                <span>Voir les {d.manches.length} manches</span>{" "}
                <span className="a">→</span>
              </div>
            </div>
          </FadeUp>
        ))}
      </div>

      {/* Records */}
      {isCurrentSeason && (
        <div
          style={{
            marginTop: 80,
            padding: 48,
            background: "var(--paper-2)",
            border: "1px solid var(--hairline)",
            position: "relative",
            overflow: "hidden",
          }}
        >
          <div
            className="watermark hide-mobile"
            style={{ top: -60, right: -40, fontSize: 200 }}
          >
            {year}
          </div>
          <div style={{ position: "relative" }}>
            <div className="tag-gold" style={{ marginBottom: 16 }}>
              — Records & palmarès —
            </div>
            <h3
              style={{
                fontFamily: "var(--display)",
                fontStyle: "italic",
                fontSize: 36,
                fontWeight: 500,
                margin: "0 0 8px",
              }}
            >
              Tireur de l'année {year}
            </h3>
            <div
              style={{
                fontSize: 13,
                color: "var(--gray)",
                marginBottom: 32,
                fontStyle: "italic",
              }}
            >
              Classement provisoire — final après le Tir de clôture en novembre.
            </div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 24,
              }}
              className="podium"
            >
              {[
                {
                  rank: "II",
                  name: "M. Reverdin",
                  pts: "4 287 pts",
                  medal: "#c0c0c0",
                  disc: "P25 · P50",
                },
                {
                  rank: "I",
                  name: "F. Baumann",
                  pts: "4 412 pts",
                  medal: "var(--accent)",
                  disc: "P50 · F300",
                },
                {
                  rank: "III",
                  name: "C. Tavernier",
                  pts: "4 198 pts",
                  medal: "#cd7f32",
                  disc: "P10 · P25",
                },
              ].map((p, i) => (
                <div
                  key={i}
                  style={{
                    background: "var(--white)",
                    padding: 28,
                    textAlign: "center",
                    borderTop: "3px solid " + p.medal,
                    transform: i === 1 ? "translateY(-12px)" : "none",
                  }}
                >
                  <div
                    style={{
                      fontFamily: "var(--display)",
                      fontStyle: "italic",
                      fontSize: 48,
                      color: p.medal,
                      lineHeight: 1,
                    }}
                  >
                    {p.rank}
                  </div>
                  <div
                    style={{
                      fontFamily: "var(--display)",
                      fontSize: 22,
                      marginTop: 12,
                    }}
                  >
                    {p.name}
                  </div>
                  <div
                    className="mono"
                    style={{ fontSize: 13, color: "var(--gray)", marginTop: 6 }}
                  >
                    {p.pts}
                  </div>
                  <div
                    className="tag-mono"
                    style={{ fontSize: 9, marginTop: 8 }}
                  >
                    {p.disc}
                  </div>
                </div>
              ))}
            </div>
            <div
              style={{
                textAlign: "center",
                marginTop: 28,
                fontSize: 12,
                color: "var(--gray)",
              }}
            >
              Données affichées à titre indicatif. Classement officiel
              disponible via l'espace membre.
            </div>
          </div>
        </div>
      )}

      <div
        style={{
          marginTop: 48,
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 16,
        }}
      >
        <a
          href="#"
          className="link-arrow"
          onClick={(e) => {
            e.preventDefault();
          }}
        >
          <span className="a">←</span>
          <span>Voir les résultats live de la semaine</span>
        </a>
        <a
          href="#"
          className="link-arrow"
          onClick={(e) => {
            e.preventDefault();
            onNav && onNav("calendrier");
          }}
        >
          <span>Calendrier de la saison</span>
          <span className="a">→</span>
        </a>
      </div>

      {selectedDisc && (
        <DisciplineModal
          discipline={selectedDisc}
          year={year}
          onClose={() => setSelectedDisc(null)}
        />
      )}

      <style>{`
        @media (max-width: 900px) {
          .year-grid { grid-template-columns: repeat(4, 1fr) !important; }
          .disc-grid { grid-template-columns: 1fr !important; }
          .podium { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function DisciplineModal({ discipline, year, onClose }) {
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(26,26,26,0.7)",
        zIndex: 100,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 20,
        backdropFilter: "blur(2px)",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--paper)",
          maxWidth: 720,
          width: "100%",
          maxHeight: "90vh",
          overflowY: "auto",
          border: "1px solid var(--ink)",
          position: "relative",
        }}
      >
        <button
          onClick={onClose}
          style={{
            position: "absolute",
            top: 16,
            right: 16,
            background: "var(--paper)",
            border: "1px solid var(--hairline)",
            fontSize: 18,
            cursor: "pointer",
            color: "var(--ink)",
            zIndex: 2,
            width: 36,
            height: 36,
          }}
        >
          ✕
        </button>
        <div
          style={{
            padding: "36px 36px 28px",
            borderBottom: "1px solid var(--hairline)",
          }}
        >
          <div className="tag-gold" style={{ marginBottom: 14 }}>
            — Saison {year} · {discipline.id} —
          </div>
          <h2
            style={{
              fontFamily: "var(--display)",
              fontSize: 32,
              fontWeight: 500,
              margin: "0 0 12px",
              lineHeight: 1.2,
            }}
          >
            {discipline.name}
          </h2>
          <p
            style={{
              fontSize: 14,
              color: "var(--gray)",
              margin: 0,
              lineHeight: 1.6,
            }}
          >
            {discipline.description}
          </p>
        </div>
        <div style={{ padding: "24px 36px" }}>
          <div className="tag-mono" style={{ marginBottom: 16 }}>
            — {discipline.manches.length} manches au programme
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 50 }}>#</th>
                <th>Manche / Concours</th>
                <th style={{ width: 110, textAlign: "right" }}>Détail</th>
              </tr>
            </thead>
            <tbody>
              {discipline.manches.map((m, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--gray)" }}>
                    {String(i + 1).padStart(2, "0")}
                  </td>
                  <td>{m}</td>
                  <td style={{ textAlign: "right" }}>
                    <a
                      href="#"
                      onClick={(e) => e.preventDefault()}
                      className="link-arrow"
                    >
                      <span>Classement</span>
                      <span className="a">→</span>
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div
          style={{
            padding: "16px 36px 32px",
            borderTop: "1px solid var(--hairline)",
            background: "var(--paper-2)",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "wrap",
            gap: 12,
          }}
        >
          <div style={{ fontSize: 12, color: "var(--gray)" }}>
            Les classements complets sont accessibles via l'espace membre.
          </div>
          <button className="btn btn-ghost-gold">Espace membre →</button>
        </div>
      </div>
    </div>
  );
}

window.PageResultats = PageResultats;