/* global React */
// Bike-Konfigurator — Geometry-Panel & Compare-View

const { useState, useMemo } = React;
const { fmtPrice, fmtNum, SLOT_LABELS, PRIMARY_SLOTS } = window.BikeFmt;
const Icon = window.BikeIcon;
const { getFramePhoto } = window.BikePhotos;

// ===== Geometry / Spec Panel =====
function GeometryPanel({ frame, build, onClose }) {
  if (!frame) return null;
  const totalWeightKg = ((frame.weight_g || 0)
    + (build.fork?.weight_g || 0)
    + (build.wheels?.weight_g || 0)
    + (build.tires?.weight_g || 0) * 2
    + (build.drivetrain?.weight_g || 0)
    + (build.brakes?.weight_g || 0)
    + (build.cockpit?.weight_g || 0)
    + (build.dropper?.weight_g || 0)) / 1000;

  // Build full geometry table
  const geoSections = [
    {
      title: "Geometrie",
      rows: [
        { label: "Reach", value: frame.reach, unit: "mm" },
        { label: "Stack", value: frame.stack, unit: "mm" },
        { label: "Federweg hinten", value: frame.travel_mm, unit: "mm" },
        { label: "Federweg vorne", value: build.fork?.travel_mm || frame.travel_mm, unit: "mm" },
        { label: "Laufradgröße", value: frame.wheel_size, unit: '"' },
        { label: "Charakter", value: frame.style, unit: null }
      ]
    },
    {
      title: "Rahmen",
      rows: [
        { label: "Material", value: frame.material, unit: null },
        { label: "Hardtail", value: frame.is_hardtail ? "Ja" : "Nein", unit: null },
        { label: "Gewicht Rahmen", value: fmtNum((frame.weight_g || 0) / 1000), unit: "kg" },
        { label: "Gesamtgewicht", value: fmtNum(totalWeightKg), unit: "kg", accent: true },
        { label: "Max. Fahrergewicht", value: frame.max_rider_weight_kg, unit: "kg" },
        { label: "Fahrer-Range", value: `${frame.height_min_cm}–${frame.height_max_cm}`, unit: "cm" }
      ]
    },
    {
      title: "Standards",
      rows: [
        { label: "Steuerlager", value: frame.headset_standard, unit: null },
        { label: "Tretlager", value: frame.bb_standard, unit: null },
        { label: "Steckachse vorn", value: frame.axle_front, unit: null },
        { label: "Steckachse hinten", value: frame.axle_rear, unit: null },
        { label: "Bremsaufnahme", value: frame.disc_mount, unit: null },
        { label: "Bremsscheiben", value: `${frame.disc_size_min_mm}–${frame.disc_size_max_mm}`, unit: "mm" },
        { label: "Sattelstütze", value: frame.seatpost_diameter, unit: "mm" },
        { label: "Antriebsstandard", value: frame.drivetrain_standard, unit: null }
      ]
    }
  ];

  return (
    <div className="geo-panel scroll-area" onClick={(e) => e.stopPropagation()}>
      <div className="geo-panel-hd">
        <div>
          <div className="eyebrow eyebrow-accent">Geometrie & Specs</div>
          <h3 style={{ marginTop: 4, fontSize: 18 }}>{frame.name}</h3>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: 8 }}>
          <Icon name="close" size={14} />
        </button>
      </div>

      {geoSections.map((sec, i) => (
        <div key={i}>
          <div style={{
            padding: "16px 20px 8px", color: "var(--ink-soft)",
            font: "600 10px/1 var(--font-sans)", letterSpacing: "1.1px",
            textTransform: "uppercase", borderTop: i > 0 ? "1px solid var(--hairline)" : "none"
          }}>{sec.title}</div>
          {sec.rows.map((r, j) => (
            <div key={j} className="geo-row">
              <span className="geo-row-label">{r.label}</span>
              <span className="geo-row-value" style={r.accent ? { color: "var(--accent)" } : null}>
                {r.value}{r.unit && <span className="unit">{r.unit}</span>}
              </span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// ===== Compare-View =====
function CompareView({ saved, frames, components, onClose }) {
  const [selectedIds, setSelectedIds] = useState(() => saved.slice(0, 2).map(s => s.id));

  const selected = saved.filter(s => selectedIds.includes(s.id)).slice(0, 3);

  const toggle = (id) => {
    if (selectedIds.includes(id)) {
      if (selectedIds.length > 1) setSelectedIds(selectedIds.filter(x => x !== id));
    } else if (selectedIds.length < 3) {
      setSelectedIds([...selectedIds, id]);
    }
  };

  // Resolve build items
  const resolved = selected.map(entry => {
    const frame = frames.find(f => f.id === entry.build.frame);
    const build = { frame };
    for (const slot of PRIMARY_SLOTS.concat("shock", "fork")) {
      const id = entry.build[slot];
      if (!id || slot === "frame") continue;
      const pool = components[slot === "wheels" ? "wheels" : slot === "fork" ? "forks" : slot === "shock" ? "shocks" : slot === "drivetrain" ? "drivetrains" : slot === "brakes" ? "brakes" : slot === "tires" ? "tires" : slot === "cockpit" ? "cockpits" : slot === "dropper" ? "droppers" : slot === "saddle" ? "saddles" : null];
      if (pool) build[slot] = pool.find(c => c.id === id);
    }
    return { entry, frame, build };
  });

  // Spec rows for comparison
  const specRows = [
    { label: "Frame", get: (r) => r.frame?.name },
    { label: "Kategorie", get: (r) => r.frame?.category },
    { label: "Travel", get: (r) => r.frame ? `${r.frame.travel_mm} mm` : "—" },
    { label: "Reach / Stack", get: (r) => r.frame ? `${r.frame.reach} / ${r.frame.stack} mm` : "—" },
    { label: "Material", get: (r) => r.frame?.material },
    { label: "Wheels", get: (r) => r.build.wheels?.name },
    { label: "Fork", get: (r) => r.build.fork?.name },
    { label: "Shock", get: (r) => r.build.shock?.name || "—" },
    { label: "Drivetrain", get: (r) => r.build.drivetrain?.name },
    { label: "Brakes", get: (r) => r.build.brakes?.name },
    { label: "Tires", get: (r) => r.build.tires?.name },
    { label: "Cockpit", get: (r) => r.build.cockpit?.name },
    { label: "Dropper", get: (r) => r.build.dropper?.name || "—" }
  ];

  // Profile rows
  const profileRows = [
    { label: "Gewicht", get: (r) => `${r.entry.profile.weight} kg` },
    { label: "Größe", get: (r) => `${r.entry.profile.height} cm` },
    { label: "Skill", get: (r) => r.entry.profile.skill_level },
    { label: "Stil", get: (r) => r.entry.profile.riding_style },
    { label: "Terrain", get: (r) => r.entry.profile.terrain },
    { label: "Budget", get: (r) => fmtPrice(r.entry.profile.budget) }
  ];

  // Score rows
  const scoreRows = [
    { label: "FIT", get: (r) => `${r.entry.scores.fit_score} / 10`, accent: true },
    { label: "Performance", get: (r) => `${r.entry.scores.performance_score} / 10` },
    { label: "Value", get: (r) => `${r.entry.scores.value_score} / 10` }
  ];

  const colsClass = `cols-${selected.length}`;

  // Determine diff per row (mark row if not all values equal)
  const isDiff = (row) => {
    const vals = resolved.map(r => row.get(r));
    return new Set(vals).size > 1;
  };

  return (
    <div className="compare-overlay scroll-area" data-screen-label="Compare View">
      {/* Header */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10,
        background: "rgba(15,15,15,0.95)", backdropFilter: "blur(14px)",
        borderBottom: "1px solid var(--hairline-strong)",
        padding: "20px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <div>
          <div className="eyebrow eyebrow-accent">Build-Vergleich</div>
          <h2 style={{ marginTop: 4, fontSize: 26, letterSpacing: "-0.6px" }}>
            {selected.length} Builds nebeneinander
          </h2>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-outline btn-sm" onClick={onClose}>
            <Icon name="close" size={14} /> Schliessen
          </button>
        </div>
      </div>

      {/* Selection pills */}
      <div style={{ padding: "20px 32px", display: "flex", flexWrap: "wrap", gap: 8, borderBottom: "1px solid var(--hairline)" }}>
        <span className="eyebrow" style={{ alignSelf: "center", marginRight: 12 }}>Auswahl (max 3):</span>
        {saved.map(s => {
          const active = selectedIds.includes(s.id);
          return (
            <button key={s.id}
              className={"btn btn-outline btn-tiny" + (active ? " is-on" : "")}
              style={{
                background: active ? "var(--accent)" : "transparent",
                color: active ? "var(--accent-ink)" : "var(--ink-soft)",
                boxShadow: active ? "none" : "inset 0 0 0 1px var(--hairline-strong)"
              }}
              onClick={() => toggle(s.id)}>
              {active && <Icon name="check" size={12} />} {s.title}
            </button>
          );
        })}
      </div>

      {/* Comparison Grid */}
      <div className={`compare-grid ${colsClass}`}>
        {resolved.map((r, idx) => (
          <div className="compare-col" key={r.entry.id}>
            {/* Hero */}
            <div className="compare-col-hero" style={{
              backgroundImage: `url(${r.entry.thumbnail || getFramePhoto(r.frame)})`
            }}>
              <div className="compare-col-hero-inner">
                <div className="eyebrow eyebrow-accent">Build {idx + 1}</div>
                <h3 style={{ font: "500 28px/1.1 var(--font-sans)", letterSpacing: "-0.56px", marginTop: 6 }}>
                  {r.entry.title}
                </h3>
                <div style={{
                  font: "500 36px/1 var(--font-sans)", letterSpacing: "-0.36px",
                  fontVariantNumeric: "tabular-nums", color: "var(--accent)", marginTop: 12
                }}>
                  {fmtPrice(r.entry.total)}
                </div>
              </div>
            </div>

            {/* Body sections */}
            <div className="compare-col-body">
              <div className="compare-row-header">Profil</div>
              {profileRows.map((row, i) => (
                <div key={i} className={"compare-spec-row" + (isDiff(row) ? " is-diff" : "")}>
                  <span className="geo-row-label">{row.label}</span>
                  <span className="geo-row-value">{row.get(r) || "—"}</span>
                </div>
              ))}

              <div className="compare-row-header" style={{ marginTop: 24 }}>Build</div>
              {specRows.map((row, i) => (
                <div key={i} className={"compare-spec-row" + (isDiff(row) ? " is-diff" : "")}>
                  <span className="geo-row-label">{row.label}</span>
                  <span className="geo-row-value">{row.get(r) || "—"}</span>
                </div>
              ))}

              <div className="compare-row-header" style={{ marginTop: 24 }}>Scores</div>
              {scoreRows.map((row, i) => (
                <div key={i} className="compare-spec-row">
                  <span className="geo-row-label">{row.label}</span>
                  <span className="geo-row-value" style={row.accent ? { color: "var(--accent)" } : null}>
                    {row.get(r)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        ))}
        {selected.length < 2 && (
          <div className="compare-col">
            <div className="compare-empty">
              <Icon name="frame" size={36} />
              <div className="eyebrow" style={{ marginTop: 14 }}>Weiteren Build wählen</div>
              <p style={{ color: "var(--ink-muted)", marginTop: 8 }}>
                Bis zu 3 Builds gleichzeitig vergleichen.
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.BikeAdvanced = { GeometryPanel, CompareView };