// Sidebar inputs — primary input prominent, secondary inputs collapsible.

const { useState, useEffect } = React;

// Map approximate user location → nearest ski region. Uses timezone first
// (no permission prompt), then optionally geolocation if user clicks "use my location".
const TZ_TO_REGION = {
  "America/Denver":      "Colorado",
  "America/Boise":       "Idaho",
  "America/Phoenix":     "Colorado",
  "America/Los_Angeles": "Tahoe",
  "America/Vancouver":   "PNW",
  "America/Edmonton":    "Canada",
  "America/Chicago":     "Midwest",
  "America/New_York":    "Northeast",
  "America/Toronto":     "Northeast",
  "America/Detroit":     "Midwest",
  "America/Salt_Lake_City": "Wasatch",
};

function guessRegionFromTimezone() {
  try {
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
    return TZ_TO_REGION[tz] || null;
  } catch (e) { return null; }
}

// Lat/lon centroids for each region — used when geolocation is granted.
const REGION_CENTROIDS = {
  "Tahoe":     [39.0, -120.1],
  "Sierra":    [37.6, -119.0],
  "Colorado":  [39.6, -106.5],
  "Wasatch":   [40.5, -111.6],
  "PNW":       [47.0, -121.5],
  "Northeast": [44.0, -72.7],
  "Tetons":    [43.6, -110.7],
  "Canada":    [51.0, -116.5],
  "Midwest":   [46.5, -90.7],
  "Montana":   [45.3, -111.4],
};

function nearestRegion(lat, lon) {
  let best = null, bestDist = Infinity;
  for (const [name, [rLat, rLon]] of Object.entries(REGION_CENTROIDS)) {
    const d = Math.hypot(lat - rLat, lon - rLon);
    if (d < bestDist) { bestDist = d; best = name; }
  }
  return best;
}

function Sidebar({ inputs, setInputs, scenarios, activeScenario, onLoadScenario, onSaveScenario, onDeleteScenario }) {
  const update = (patch) => setInputs(prev => ({ ...prev, ...patch }));
  const [showOptional, setShowOptional] = useState(false);
  const [locStatus, setLocStatus] = useState("idle"); // idle | guessing | located | denied
  const [locLabel, setLocLabel] = useState(null);

  const REGIONS = ["Tahoe", "Colorado", "Wasatch", "PNW", "Northeast", "Tetons", "Canada", "Midwest", "Sierra", "Montana"];

  // On mount: try a soft timezone-based region guess (no permission prompt).
  useEffect(() => {
    if (inputs.regions.length === 0 && inputs._regionTouched !== true) {
      const guess = guessRegionFromTimezone();
      if (guess) {
        setLocLabel(`Detected from timezone: ${guess}`);
        setLocStatus("located");
        update({ regions: [guess] });
      }
    }
  }, []);

  const requestPreciseLocation = () => {
    if (!navigator.geolocation) return;
    setLocStatus("guessing");
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const region = nearestRegion(pos.coords.latitude, pos.coords.longitude);
        if (region) {
          update({ regions: [region], _regionTouched: true });
          setLocLabel(`Closest to you: ${region}`);
          setLocStatus("located");
        }
      },
      () => setLocStatus("denied"),
      { timeout: 6000, maximumAge: 600000 }
    );
  };

  const hasAnyInput = inputs.days > 0;
  const optionalCount = (inputs.groupSize > 1 ? 1 : 0)
                      + (inputs.travel ? 1 : 0)
                      + (inputs.flexibility ? 1 : 0)
                      + (inputs.regions.length > 0 ? 1 : 0);

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <div className="brand">
          <div className="brand-mark">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M12 2 L4 20 L20 20 Z" />
              <path d="M12 2 L8 12 L16 12 Z" fill="currentColor" stroke="none" opacity="0.85" />
            </svg>
          </div>
          <div>
            <div className="brand-name">Skipasses</div>
            <div className="brand-sub">Pass decision tool · 2025/26</div>
          </div>
        </div>
      </div>

      <div className="sidebar-body">
        {/* PRIMARY INPUT — the only one that's required */}
        <div className="primary-input">
          <div className="primary-label">How many days will you ski this season?</div>
          <div className="primary-value">
            <span className="primary-num">{inputs.days || 0}</span>
            <span className="primary-unit">{inputs.days === 1 ? "day" : "days"}</span>
          </div>
          <input
            type="range"
            min="1"
            max="50"
            value={inputs.days || 1}
            onChange={e => update({ days: +e.target.value })}
            className="range range-lg"
          />
          <div className="range-ticks">
            <span>1</span><span>15</span><span>30</span><span>50</span>
          </div>
          <div className="primary-help">
            The single most important input. Everything else fine-tunes.
          </div>
        </div>

        {/* SECONDARY — optional, collapsed by default */}
        <div className="optional">
          <button className="optional-toggle" onClick={() => setShowOptional(v => !v)}>
            <span className="optional-toggle-l">
              <span className="optional-chev">{showOptional ? "−" : "+"}</span>
              Refine assumptions
            </span>
            <span className="optional-count">
              {optionalCount > 0 ? `${optionalCount} set` : "optional"}
            </span>
          </button>

          {showOptional && (
            <div className="optional-body">
              <Section label="Group size" hint={inputs.groupSize > 1 ? `${inputs.groupSize} people` : "Solo"}>
                <div className="stepper">
                  {[1, 2, 3, 4, 5, 6].map(n => (
                    <button
                      key={n}
                      className={`step-btn ${inputs.groupSize === n ? "is-active" : ""}`}
                      onClick={() => update({ groupSize: n })}
                    >{n}</button>
                  ))}
                </div>
              </Section>

              <Section label="Travel style" hint={inputs.travel ? null : "Not set"}>
                <div className="seg">
                  <button className={`seg-btn ${inputs.travel === "local" ? "is-active" : ""}`} onClick={() => update({ travel: inputs.travel === "local" ? null : "local" })}>
                    <span className="seg-title">Local</span>
                    <span className="seg-sub">Same mountains</span>
                  </button>
                  <button className={`seg-btn ${inputs.travel === "destination" ? "is-active" : ""}`} onClick={() => update({ travel: inputs.travel === "destination" ? null : "destination" })}>
                    <span className="seg-title">Destination</span>
                    <span className="seg-sub">Trip-driven</span>
                  </button>
                </div>
              </Section>

              <Section label="Date flexibility" hint={
                !inputs.flexibility ? "Not set"
                : inputs.flexibility === "high" ? "Can avoid holidays"
                : inputs.flexibility === "medium" ? "Mostly flexible"
                : "Holidays only"
              }>
                <div className="seg seg-3">
                  <button className={`seg-btn ${inputs.flexibility === "high" ? "is-active" : ""}`} onClick={() => update({ flexibility: inputs.flexibility === "high" ? null : "high" })}>High</button>
                  <button className={`seg-btn ${inputs.flexibility === "medium" ? "is-active" : ""}`} onClick={() => update({ flexibility: inputs.flexibility === "medium" ? null : "medium" })}>Medium</button>
                  <button className={`seg-btn ${inputs.flexibility === "low" ? "is-active" : ""}`} onClick={() => update({ flexibility: inputs.flexibility === "low" ? null : "low" })}>Low</button>
                </div>
              </Section>

              <Section label="Regions" hint={inputs.regions.length === 0 ? "Anywhere" : `${inputs.regions.length} selected`}>
                {locLabel && (
                  <div className="loc-pill">
                    <span className="loc-dot" />
                    <span>{locLabel}</span>
                  </div>
                )}
                {locStatus !== "located" && (
                  <button className="ghost-btn loc-btn" onClick={requestPreciseLocation}>
                    {locStatus === "guessing" ? "Locating…"
                     : locStatus === "denied" ? "Location denied — pick manually"
                     : "Use my location"}
                  </button>
                )}
                <div className="region-grid">
                  {REGIONS.map(r => {
                    const on = inputs.regions.includes(r);
                    return (
                      <button
                        key={r}
                        className={`region-chip ${on ? "is-active" : ""}`}
                        onClick={() => update({
                          regions: on ? inputs.regions.filter(x => x !== r) : [...inputs.regions, r],
                          _regionTouched: true,
                        })}
                      >
                        {r}
                      </button>
                    );
                  })}
                </div>
              </Section>

              <Section label="Scenario presets">
                <div className="scenario-row">
                  {Object.entries(scenarios).map(([key, s]) => (
                    <button
                      key={key}
                      className={`scenario-chip ${activeScenario === key ? "is-active" : ""}`}
                      onClick={() => onLoadScenario(key)}
                    >
                      {s.name}
                    </button>
                  ))}
                </div>
                <div className="scenario-actions">
                  <button className="ghost-btn" onClick={onSaveScenario}>+ Save current</button>
                  {activeScenario && activeScenario.startsWith("custom-") && (
                    <button className="ghost-btn danger" onClick={() => onDeleteScenario(activeScenario)}>Delete</button>
                  )}
                </div>
              </Section>
            </div>
          )}
        </div>

        <div className="sidebar-foot">
          <div className="foot-row">
            <span className="foot-k">Avg window ticket</span>
            <span className="foot-v">${Math.round(PASSES.reduce((s, p) => s + p.avgWindow, 0) / PASSES.length)}/day</span>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Section({ label, hint, children }) {
  return (
    <div className="section">
      <div className="section-head">
        <span className="section-label">{label}</span>
        {hint && <span className="section-hint">{hint}</span>}
      </div>
      <div className="section-body">{children}</div>
    </div>
  );
}

window.Sidebar = Sidebar;