// Main app — wires everything together.

const { useState: useStateApp, useEffect: useEffectApp, useMemo } = React;

const DEFAULT_INPUTS = {
  days: 12,
  groupSize: 1,
  travel: null,
  flexibility: null,
  regions: [],
};

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  const [inputs, setInputs] = useStateApp(DEFAULT_INPUTS);
  const [activeScenario, setActiveScenario] = useStateApp(null);
  const [customScenarios, setCustomScenarios] = useStateApp({});
  const [selectedIds, setSelectedIds] = useStateApp(PASSES.map(p => p.id));
  const [regionFilter, setRegionFilter] = useStateApp("All");
  const [view, setView] = useStateApp("dashboard"); // dashboard | table | map

  const allScenarios = { ...SCENARIO_PRESETS, ...customScenarios };

  const ranked = useMemo(() => rankPasses(PASSES, inputs, RESORTS), [inputs]);
  const visibleRanked = ranked.filter(m => selectedIds.includes(m.pass.id));

  const loadScenario = (key) => {
    const s = allScenarios[key];
    if (!s) return;
    setActiveScenario(key);
    setInputs({
      days: s.days,
      groupSize: s.groupSize || 1,
      travel: s.travel,
      flexibility: s.flexibility,
      regions: s.region === "Multiple" ? ["Colorado", "Tahoe", "Wasatch"]
            : s.region === "Any" ? []
            : s.region ? [s.region] : [],
    });
  };

  const saveScenario = () => {
    const name = prompt("Name this scenario:", "My scenario");
    if (!name) return;
    const id = `custom-${Date.now()}`;
    setCustomScenarios(prev => ({
      ...prev,
      [id]: {
        name,
        days: inputs.days,
        groupSize: inputs.groupSize,
        travel: inputs.travel,
        flexibility: inputs.flexibility,
        region: inputs.regions[0] || "Any",
      },
    }));
    setActiveScenario(id);
  };

  const deleteScenario = (id) => {
    setCustomScenarios(prev => {
      const n = { ...prev };
      delete n[id];
      return n;
    });
    setActiveScenario("local");
    loadScenario("local");
  };

  const togglePass = (id) => {
    setSelectedIds(prev => prev.includes(id)
      ? (prev.length > 1 ? prev.filter(x => x !== id) : prev)
      : [...prev, id]);
  };

  const toggleGroup = (groupPassIds) => {
    const allOn = groupPassIds.every(id => selectedIds.includes(id));
    if (allOn) {
      const remaining = selectedIds.filter(id => !groupPassIds.includes(id));
      if (remaining.length > 0) setSelectedIds(remaining);
    } else {
      setSelectedIds(prev => [...new Set([...prev, ...groupPassIds])]);
    }
  };

  const passGroups = useMemo(() => {
    const groups = {};
    PASSES.forEach(p => {
      if (!groups[p.group]) groups[p.group] = [];
      groups[p.group].push(p);
    });
    return Object.entries(groups).map(([name, passes]) => ({ name, passes }));
  }, []);

  return (
    <div className={`app density-${tweaks.density} theme-${tweaks.theme}`}>
      <Sidebar
        inputs={inputs}
        setInputs={(v) => { setInputs(v); setActiveScenario(null); }}
        scenarios={allScenarios}
        activeScenario={activeScenario}
        onLoadScenario={loadScenario}
        onSaveScenario={saveScenario}
        onDeleteScenario={deleteScenario}
      />

      <main className="main">
        <div className="topbar">
          <div className="topbar-l">
            <div className="topbar-title">Pass comparison</div>
            <div className="topbar-sub">
              {inputs.days} days
              {inputs.groupSize > 1 && ` · ${inputs.groupSize} skiers`}
              {inputs.travel && ` · ${inputs.travel}`}
              {inputs.flexibility && ` · ${inputs.flexibility} flex`}
              {inputs.regions.length > 0 && ` · ${inputs.regions.join(", ")}`}
            </div>
          </div>
          <div className="topbar-r">
            <div className="view-switch">
              <button className={`view-btn ${view === "dashboard" ? "is-active" : ""}`} onClick={() => setView("dashboard")}>Dashboard</button>
              <button className={`view-btn ${view === "table" ? "is-active" : ""}`} onClick={() => setView("table")}>Table</button>
              <button className={`view-btn ${view === "map" ? "is-active" : ""}`} onClick={() => setView("map")}>Map</button>
            </div>
          </div>
        </div>

        <div className="main-scroll">
          {view === "dashboard" && (
            <>
              <Recommendation ranked={visibleRanked} inputs={inputs} />

              <section className="cards-section">
                <div className="panel-head">
                  <div>
                    <div className="panel-eyebrow">Ranked passes</div>
                    <div className="panel-title">All passes for your scenario</div>
                  </div>
                  <PassGroupSelector
                    groups={passGroups}
                    selectedIds={selectedIds}
                    onTogglePass={togglePass}
                    onToggleGroup={toggleGroup}
                  />
                </div>
                <div className="cards">
                  {visibleRanked.map((m, i) => (
                    <PassCard
                      key={m.pass.id}
                      metric={m}
                      rank={i}
                      inputs={inputs}
                      isSelected={false}
                      onSelect={() => {}}
                    />
                  ))}
                </div>
              </section>

              <CostChart ranked={visibleRanked} inputs={inputs} selectedIds={selectedIds} />

              {inputs.groupSize > 1 && <GroupPanel ranked={visibleRanked} inputs={inputs} />}
            </>
          )}

          {view === "table" && <ComparisonTable ranked={visibleRanked} inputs={inputs} />}

          {view === "map" && (
            <ResortMap
              resorts={RESORTS}
              ranked={visibleRanked}
              selectedIds={selectedIds}
              regionFilter={regionFilter}
              setRegionFilter={setRegionFilter}
            />
          )}
        </div>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance" />
        <TweakRadio label="Theme" value={tweaks.theme}
          options={["warm", "cool", "mono"]}
          onChange={v => setTweak("theme", v)} />
        <TweakRadio label="Density" value={tweaks.density}
          options={["comfortable", "compact"]}
          onChange={v => setTweak("density", v)} />
        <TweakColor label="Accent" value={tweaks.accent}
          options={["#5a6b4a", "#3a4a5a", "#7a5a3a", "#4a3a5a"]}
          onChange={v => setTweak("accent", v)} />
        <TweakSection label="Behavior" />
        <TweakToggle label="Window-ticket benchmark" value={tweaks.showWindow}
          onChange={v => setTweak("showWindow", v)} />
        <TweakToggle label="Show savings" value={tweaks.showSavings}
          onChange={v => setTweak("showSavings", v)} />
      </TweaksPanel>
    </div>
  );
}

function PassGroupSelector({ groups, selectedIds, onTogglePass, onToggleGroup }) {
  const [expandedGroups, setExpandedGroups] = React.useState(
    Object.fromEntries(groups.map(g => [g.name, false]))
  );

  const toggleGroupExpanded = (groupName) => {
    setExpandedGroups(prev => ({ ...prev, [groupName]: !prev[groupName] }));
  };

  return (
    <div className="pass-groups">
      {groups.map(group => {
        const groupPassIds = group.passes.map(p => p.id);
        const selectedCount = groupPassIds.filter(id => selectedIds.includes(id)).length;
        const allSelected = groupPassIds.every(id => selectedIds.includes(id));
        const partialSelected = selectedCount > 0 && !allSelected;
        const isExpanded = expandedGroups[group.name];

        return (
          <div key={group.name} className={`pass-group ${isExpanded ? "is-open" : ""}`} style={{ position: "relative" }}>
            <button
              className="pass-group-hd"
              onClick={() => toggleGroupExpanded(group.name)}
            >
              <div className={`pass-group-check ${allSelected ? "is-all" : partialSelected ? "is-partial" : ""}`} />
              <div className="pass-group-dot" style={{ background: group.passes[0].color }} />
              <div className="pass-group-name">{group.name}</div>
              <div className="pass-group-count">{selectedCount}/{group.passes.length}</div>
              <div className="pass-group-chev">›</div>
            </button>

            {isExpanded && (
              <div className="pass-group-body">
                {group.passes.map(pass => (
                  <button
                    key={pass.id}
                    className={`pass-item ${selectedIds.includes(pass.id) ? "is-on" : ""}`}
                    onClick={() => onTogglePass(pass.id)}
                  >
                    <div className="pass-item-dot" style={{ background: pass.color }} />
                    <div className="pass-item-name">{pass.name}</div>
                    <div className="pass-item-price">${pass.price.toLocaleString()}</div>
                    <div className="pass-item-check" />
                  </button>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function GroupPanel({ ranked, inputs }) {
  const groupCost = (m) => {
    const base = m.pass.price; // primary skier
    const buddies = inputs.groupSize - 1;
    // Assume each buddy buys the same pass — simplistic but useful baseline
    return base * inputs.groupSize;
  };
  const top = ranked[0];
  return (
    <section className="group-panel">
      <div className="panel-head">
        <div>
          <div className="panel-eyebrow">Group planning</div>
          <div className="panel-title">{inputs.groupSize}-person season cost</div>
        </div>
      </div>
      <div className="group-grid">
        {ranked.slice(0, 4).map(m => {
          const total = groupCost(m);
          const perPersonPerDay = total / (inputs.groupSize * inputs.days);
          return (
            <div key={m.pass.id} className={`group-row ${m === top ? "is-top" : ""}`}>
              <div className="group-row-l">
                <span className="cmp-swatch" style={{ background: m.pass.color }} />
                <span className="group-row-name">{m.pass.name}</span>
              </div>
              <div className="group-row-stats">
                <div><span className="g-k">Group total</span><span className="g-v">${total.toLocaleString()}</span></div>
                <div><span className="g-k">Per person/day</span><span className="g-v accent">${Math.round(perPersonPerDay)}</span></div>
                <div><span className="g-k">Buddy value</span><span className="g-v">${Math.round(m.buddyValue)}</span></div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);