// Main result panels — recommendation hero, cards, chart, table, map.

function Recommendation({ ranked, inputs }) {
  const top = ranked[0];
  const runner = ranked[1];
  if (!top) return null;

  const reasons = [];
  if (top.costPerDay < top.pass.avgWindow * 0.5) {
    reasons.push(`At ${inputs.days} days, the effective cost lands at $${Math.round(top.costPerDay)}/day — about ${Math.round((1 - top.costPerDay / top.pass.avgWindow) * 100)}% under window-ticket pricing.`);
  }
  if (top.coverageRatio === 1 && inputs.regions.length > 0) {
    reasons.push(`Covers every region you flagged (${inputs.regions.join(", ")}).`);
  } else if (top.coverageRatio > 0 && inputs.regions.length > 0) {
    reasons.push(`Covers ${top.coveredRegions.length} of ${inputs.regions.length} regions you flagged.`);
  }
  if (top.pass.blackouts === 0 && inputs.flexibility === "low") {
    reasons.push("No blackout dates — works for holiday-only skiers.");
  }
  if (top.savings > 0) {
    reasons.push(`Saves roughly $${Math.round(top.savings).toLocaleString()} vs. paying at the window for ${inputs.days} days.`);
  }
  if (inputs.groupSize > 1 && top.buddyValue > 0) {
    reasons.push(`Buddy benefits add about $${Math.round(top.buddyValue)} of value for your group of ${inputs.groupSize}.`);
  }

  const delta = runner ? Math.round(runner.costPerDay - top.costPerDay) : 0;

  return (
    <section className="rec">
      <div className="rec-grid">
        <div className="rec-main">
          <div className="rec-eyebrow">
            <span className="dot" />
            <span>Recommended for your inputs</span>
          </div>
          <h1 className="rec-name">{top.pass.name}</h1>
          <p className="rec-tag">{top.pass.notes}</p>

          <ul className="rec-reasons">
            {reasons.map((r, i) => (
              <li key={i}>
                <span className="reason-mark">→</span>
                <span>{r}</span>
              </li>
            ))}
          </ul>
        </div>

        <div className="rec-stats">
          <Stat k="Pass price" v={`$${top.pass.price.toLocaleString()}`} />
          <Stat k="Effective $/day" v={`$${Math.round(top.costPerDay)}`} accent />
          <Stat k="Break-even" v={`${top.breakEven} days`} />
          <Stat k="Savings vs window" v={`$${Math.max(0, Math.round(top.savings)).toLocaleString()}`} />
          {runner && (
            <div className="rec-runner">
              <span className="rec-runner-k">Next best</span>
              <span className="rec-runner-v">{runner.pass.name}</span>
              <span className="rec-runner-delta">+${delta}/day</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Stat({ k, v, accent }) {
  return (
    <div className={`stat ${accent ? "is-accent" : ""}`}>
      <div className="stat-k">{k}</div>
      <div className="stat-v">{v}</div>
    </div>
  );
}

function PassCard({ metric, rank, inputs, onSelect, isSelected }) {
  const p = metric.pass;
  const cpdPct = Math.min(100, (metric.costPerDay / p.avgWindow) * 100);

  return (
    <article className={`card ${isSelected ? "is-selected" : ""} ${rank === 0 ? "is-top" : ""}`} onClick={onSelect}>
      <header className="card-head">
        <div className="card-head-l">
          <div className="card-rank">#{rank + 1}</div>
          <div>
            <div className="card-name">{p.name}</div>
            <div className="card-op">{p.operator}</div>
          </div>
        </div>
        <div className="card-price">
          <div className="card-price-v">${p.price.toLocaleString()}</div>
          <div className="card-price-k">pass price</div>
        </div>
      </header>

      <div className="card-cpd">
        <div className="card-cpd-row">
          <span className="card-cpd-k">Effective</span>
          <span className="card-cpd-v">${Math.round(metric.costPerDay)}<span className="card-cpd-u">/day</span></span>
        </div>
        <div className="cpd-bar">
          <div className="cpd-bar-fill" style={{ width: `${cpdPct}%`, background: p.color }} />
          <div className="cpd-bar-window" style={{ left: `100%` }} title={`Window: $${p.avgWindow}`} />
        </div>
        <div className="cpd-bar-legend">
          <span>$0</span>
          <span>Window ${p.avgWindow}</span>
        </div>
      </div>

      <div className="card-meta">
        <Meta k="Window cost" v={`$${Math.round(metric.windowCost).toLocaleString()}`} />
        <Meta k="Pass price" v={`$${p.price.toLocaleString()}`} />
        <Meta k="Savings" v={`$${Math.max(0, Math.round(metric.savings)).toLocaleString()}`} />
        <Meta k="Break-even" v={`${metric.breakEven} days`} />
      </div>

      <div className="card-perks">
        {p.buddyTickets > 0 && <span className="perk">{p.buddyTickets} buddy tickets</span>}
        {p.buddyDiscount > 0 && <span className="perk">{Math.round(p.buddyDiscount * 100)}% friend discount</span>}
        {p.diningDiscount > 0 && <span className="perk">{Math.round(p.diningDiscount * 100)}% F&B</span>}
        {metric.partnerCap < Infinity && <span className="perk">{metric.partnerCap} days/resort</span>}
      </div>
    </article>
  );
}

function Meta({ k, v }) {
  return (
    <div className="meta">
      <div className="meta-k">{k}</div>
      <div className="meta-v">{v}</div>
    </div>
  );
}

window.Recommendation = Recommendation;
window.PassCard = PassCard;