/* OpportunityFinder — Discover high-margin / low-BSR opportunities */

function score(p, filters) {
  // Simple opportunity scoring: lower BSR + higher margin + reasonable price = better
  if (p.margin < filters.minMargin) return 0;
  if (p.bsr > filters.maxBsr) return 0;
  if (p.price < filters.minPrice || p.price > filters.maxPrice) return 0;
  const marginScore = Math.min(100, (p.margin - filters.minMargin) * 4);
  const bsrScore = Math.max(0, 100 - (p.bsr / filters.maxBsr) * 100);
  const stockBonus = p.stock > 0 ? 0 : 20; // products not yet in stock = pure opportunity
  return Math.round(marginScore * 0.5 + bsrScore * 0.4 + stockBonus);
}

const OpportunityFinder = ({ onNavigate }) => {
  const [minMargin, setMinMargin] = useState(25);
  const [maxBsr, setMaxBsr] = useState(5000);
  const [minPrice, setMinPrice] = useState(15);
  const [maxPrice, setMaxPrice] = useState(80);
  const [search, setSearch] = useState("");

  const filters = { minMargin, maxBsr, minPrice, maxPrice };
  const scored = PRODUCTS
    .map(p => ({ ...p, _score: score(p, filters) }))
    .filter(p => p._score > 0)
    .filter(p => !search || (p.name + " " + p.cat).toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => b._score - a._score);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">OpportunityFinder</div>
          <div className="page-sub">
            {scored.length} candidats trouvés sur {PRODUCTS.length} ·
            seuils: marge ≥ {minMargin}% · BSR ≤ {maxBsr.toLocaleString()} · prix ${minPrice}–${maxPrice}
          </div>
        </div>
      </div>

      {/* Filter panel */}
      <div className="card" style={{ padding: 14, marginBottom: 12 }}>
        <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          <div>
            <label style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              Marge min · <span className="mono" style={{ color: "var(--accent)" }}>{minMargin}%</span>
            </label>
            <input
              type="range" min="15" max="50" value={minMargin}
              onChange={(e) => setMinMargin(Number(e.target.value))}
              style={{ width: "100%", marginTop: 6, accentColor: "var(--accent)" }}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              BSR max · <span className="mono" style={{ color: "var(--accent)" }}>{maxBsr.toLocaleString()}</span>
            </label>
            <input
              type="range" min="500" max="15000" step="500" value={maxBsr}
              onChange={(e) => setMaxBsr(Number(e.target.value))}
              style={{ width: "100%", marginTop: 6, accentColor: "var(--accent)" }}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              Prix min · <span className="mono" style={{ color: "var(--accent)" }}>${minPrice}</span>
            </label>
            <input
              type="range" min="5" max="100" value={minPrice}
              onChange={(e) => setMinPrice(Number(e.target.value))}
              style={{ width: "100%", marginTop: 6, accentColor: "var(--accent)" }}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
              Prix max · <span className="mono" style={{ color: "var(--accent)" }}>${maxPrice}</span>
            </label>
            <input
              type="range" min="20" max="200" value={maxPrice}
              onChange={(e) => setMaxPrice(Number(e.target.value))}
              style={{ width: "100%", marginTop: 6, accentColor: "var(--accent)" }}
            />
          </div>
        </div>
        <div className="input" style={{ marginTop: 14 }}>
          <Icon name="search" size={12} style={{ marginRight: 6, color: "var(--text-dim)" }} />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Filtrer par nom ou catégorie…"
            style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--text)" }}
          />
        </div>
      </div>

      {/* Results grid */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 12 }}>
        {scored.map((p) => (
          <div key={p.id} className="card" style={{ padding: 14 }}>
            <div className="between" style={{ alignItems: "flex-start", marginBottom: 8 }}>
              <div className="row" style={{ gap: 6 }}>
                <span style={{ fontSize: 10.5, color: "var(--text-dim)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Score</span>
                <span className="mono" style={{
                  fontSize: 16, fontWeight: 700,
                  color: p._score >= 70 ? "var(--green)" : p._score >= 50 ? "var(--amber)" : "var(--text)",
                }}>
                  {p._score}
                </span>
              </div>
              <Avatar user={p.owner} size="sm" />
            </div>
            <div style={{ fontSize: 13, fontWeight: 550, lineHeight: 1.35, marginBottom: 8, minHeight: 36 }}>
              {p.name}
            </div>
            <div className="row" style={{ gap: 8, marginBottom: 8 }}>
              <Asin value={p.asin} />
              <span className="muted" style={{ fontSize: 11 }}>· {p.cat}</span>
            </div>
            <div className="grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 6, fontSize: 11 }}>
              <div style={{ background: "var(--bg-2)", padding: 6, borderRadius: 6 }}>
                <div style={{ color: "var(--text-faint)", fontSize: 9.5, textTransform: "uppercase" }}>Marge</div>
                <div className="mono" style={{ fontWeight: 600, color: "var(--green)" }}>{p.margin.toFixed(1)}%</div>
              </div>
              <div style={{ background: "var(--bg-2)", padding: 6, borderRadius: 6 }}>
                <div style={{ color: "var(--text-faint)", fontSize: 9.5, textTransform: "uppercase" }}>BSR</div>
                <div className="mono" style={{ fontWeight: 600 }}>{p.bsr.toLocaleString()}</div>
              </div>
              <div style={{ background: "var(--bg-2)", padding: 6, borderRadius: 6 }}>
                <div style={{ color: "var(--text-faint)", fontSize: 9.5, textTransform: "uppercase" }}>Prix</div>
                <div className="mono" style={{ fontWeight: 600 }}>${p.price.toFixed(0)}</div>
              </div>
            </div>
          </div>
        ))}
        {scored.length === 0 && (
          <div className="card" style={{ gridColumn: "1 / -1", padding: 30, textAlign: "center", color: "var(--text-faint)" }}>
            Aucun produit ne correspond aux filtres. Élargis les seuils.
          </div>
        )}
      </div>
    </div>
  );
};

window.OpportunityFinder = OpportunityFinder;