// results.jsx — search results

const carImageBg = (id) => {
  const map = {
    "toyota-vitz-2017": "linear-gradient(135deg, #cdf3f0, #fbf6ee)",
    "toyota-corolla-axio-2017": "linear-gradient(135deg, #f5ecda, #ecfbfa)",
    "suzuki-sx4-2012": "linear-gradient(135deg, #ffe177, #cdf3f0)",
    "suzuki-vitara-2017": "linear-gradient(135deg, #cdf3f0, #ebdcb8)",
    "suzuki-escudo-2016": "linear-gradient(135deg, #ffd189, #cdf3f0)",
    "toyota-noah": "linear-gradient(135deg, #ffb39a, #ecfbfa)",
  };
  return map[id] || "linear-gradient(135deg, var(--sea-50), var(--sand-50))";
};

const Results = ({ search, onEdit, onSelect, onLogo, onSelectCar }) => {
  const [sort, setSort] = React.useState("price-asc");
  const [seatFilter, setSeatFilter] = React.useState({});
  const [transFilter, setTransFilter] = React.useState({});
  const [catFilter, setCatFilter] = React.useState({});

  const days = Math.max(1, Math.round((search.dates.end - search.dates.start) / 86400000));

  const filtered = window.FLEET.filter(c => {
    if (Object.values(seatFilter).some(Boolean) && !seatFilter[c.seatsCat]) return false;
    if (Object.values(transFilter).some(Boolean) && !transFilter[c.transmission]) return false;
    if (Object.values(catFilter).some(Boolean) && !catFilter[c.sortHint]) return false;
    return true;
  });

  const sorted = [...filtered].sort((a, b) => {
    if (sort === "price-asc") return a.pricePerDay - b.pricePerDay;
    if (sort === "price-desc") return b.pricePerDay - a.pricePerDay;
    if (sort === "seats") return b.seats - a.seats;
    return 0;
  });

  const toggle = (state, setter) => (k) => setter({ ...state, [k]: !state[k] });

  return (
    <div className="results-page">
      <Nav onLogo={onLogo} onSelectCar={onSelectCar} />
      <div className="results-summary">
        <div className="results-summary-inner">
          <div className="summary-trip">
            <div className="summary-leg">
              <div className="where">{search.pickup.name}</div>
              <div className="when">{fmtShort(search.dates.start)} · {search.pickupTime}</div>
            </div>
            <div className="summary-arrow"><Icon name="arrow-right" size={18} /></div>
            <div className="summary-leg">
              <div className="where">{search.dropoff.name}</div>
              <div className="when">{fmtShort(search.dates.end)} · {search.dropoffTime}</div>
            </div>
            <div style={{padding: "0 12px", color: "var(--ink-300)"}}>·</div>
            <div className="summary-leg">
              <div className="where">{days} day{days>1?"s":""}</div>
              <div className="when">1 driver, age 25+</div>
            </div>
          </div>
          <button className="summary-edit" onClick={onEdit}>
            <Icon name="settings" size={13} style={{verticalAlign:"-2px", marginRight:6}} />
            Edit search
          </button>
        </div>
      </div>

      <div className="results-body">
        <aside className="filters">
          <div className="filter-block">
            <h4>Vehicle type</h4>
            {[
              {k:"economy",label:"Economy"},
              {k:"compact",label:"Compact sedan"},
              {k:"suv",label:"SUV / 4x4"},
              {k:"van",label:"7-seater van"},
            ].map(o => (
              <label key={o.k} className="filter-pill">
                <input type="checkbox" checked={!!catFilter[o.k]} onChange={() => toggle(catFilter, setCatFilter)(o.k)} />
                {o.label}
                <span className="count">{window.FLEET.filter(c=>c.sortHint===o.k).length}</span>
              </label>
            ))}
          </div>
          <div className="filter-block">
            <h4>Transmission</h4>
            {["Automatic", "Manual"].map(t => (
              <label key={t} className="filter-pill">
                <input type="checkbox" checked={!!transFilter[t]} onChange={() => toggle(transFilter, setTransFilter)(t)} />
                {t}
                <span className="count">{window.FLEET.filter(c=>c.transmission===t).length}</span>
              </label>
            ))}
          </div>
          <div className="filter-block">
            <h4>Seats</h4>
            {[{n:4,label:"2–4 seats"},{n:5,label:"5 seats"},{n:7,label:"7 seats"}].map(o => (
              <label key={o.n} className="filter-pill">
                <input type="checkbox" checked={!!seatFilter[o.n]} onChange={() => toggle(seatFilter, setSeatFilter)(o.n)} />
                {o.label}
                <span className="count">{window.FLEET.filter(c=>c.seatsCat===o.n).length}</span>
              </label>
            ))}
          </div>
          <div className="filter-block" style={{padding: "16px", background: "white", borderRadius: "var(--radius-md)", border: "1px solid var(--ink-100)"}}>
            <div style={{display:"flex", gap:10, alignItems:"flex-start"}}>
              <Icon name="shield" size={18} color="var(--sea-500)" />
              <div>
                <div style={{fontWeight:600, fontSize:13, marginBottom:4}}>Free cancellation</div>
                <div style={{fontSize:12, color:"var(--ink-500)", lineHeight:1.4}}>Cancel up to 48h before pickup with full refund.</div>
              </div>
            </div>
          </div>
        </aside>

        <main className="results-list">
          <div className="results-header">
            <div className="results-count">{sorted.length} vehicle{sorted.length!==1?"s":""} available</div>
            <div className="results-sort">
              Sort by
              <select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="price-asc">Price: low to high</option>
                <option value="price-desc">Price: high to low</option>
                <option value="seats">Most seats</option>
              </select>
            </div>
          </div>

          {sorted.map(car => (
            <div key={car.id} className="car-card" onClick={() => onSelect(car)}>
              <div className="car-image" style={{background: carImageBg(car.id)}}>
                {car.badge && (
                  <div className={`car-badge ${car.badgeColor === "coral" ? "coral" : ""}`}>{car.badge}</div>
                )}
                <CarIllustration id={car.id} />
              </div>
              <div className="car-info">
                <div>
                  <div className="car-cat">{car.cat}</div>
                  <div className="car-name">{car.name}<span className="or"> {car.or}</span></div>
                  <div className="car-specs">
                    <span className="car-spec"><Icon name="users" size={14} /> {car.seats} seats</span>
                    <span className="car-spec"><Icon name="luggage" size={14} /> {car.bags} bags</span>
                    <span className="car-spec"><Icon name="settings" size={14} /> {car.transmission}</span>
                    <span className="car-spec"><Icon name="door" size={14} /> {car.doors} doors</span>
                    <span className="car-spec"><Icon name="snowflake" size={14} /> A/C</span>
                  </div>
                </div>
                <div className="car-features">
                  {car.features.slice(0, 4).map(f => <span key={f} className="car-feature">{f}</span>)}
                </div>
              </div>
              <div className="car-price">
                <div className="car-price-from">From</div>
                <div className="car-price-amount"><span className="cur">XCD </span>{car.pricePerDay}</div>
                <div className="car-price-usd">≈ USD ${Math.round(car.pricePerDay / 2.7)} / day</div>
                <div className="car-price-period">per day · {days} day{days>1?"s":""} total: XCD {(car.pricePerDay * days).toLocaleString()}</div>
                <div className="car-cta">View details <Icon name="arrow-right" size={14} color="white" /></div>
              </div>
            </div>
          ))}

          {sorted.length === 0 && (
            <div style={{padding: 60, textAlign: "center", color: "var(--ink-500)"}}>
              <div style={{fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink-900)", marginBottom: 8}}>No vehicles match those filters</div>
              <div>Try clearing some options to see more results.</div>
            </div>
          )}
        </main>
      </div>

      <Footer />
    </div>
  );
};

window.Results = Results;