/* Quote Connect — Buyer dashboard (track requests + compare offers) */

function QuoteCompareCard({ q, cat, onAccept, accepted, rank }) {
  const { supplier } = window.QC_DATA;
  const s = supplier(q.sid);
  const isAccepted = accepted === q.sid || q.accepted;
  return (
    <div className={"cmp-card card" + (q.best ? " best" : "") + (isAccepted ? " accepted" : "")}>
      {q.best && <div className="cmp-flag mono"><Icon name="award" size={12} /> Best value</div>}
      <div className="cmp-sup">
        <SupAvatar sup={s} size={40} />
        <div className="cmp-sup-id">
          <div className="cmp-sup-name">{s.name}</div>
          <div className="cmp-sup-meta"><Verified size="sm" /><Stars rating={s.rating} reviews={s.reviews} /></div>
        </div>
      </div>
      <div className="cmp-price">
        <span className="cmp-price-v mono">{money(q.price)}</span>
        <span className="cmp-price-l mono">quoted</span>
      </div>
      <div className="cmp-specs">
        <Spec k="Lead time" v={q.eta} />
        <Spec k="Location" v={s.loc.split(",")[1]?.trim() || s.loc} />
        <Spec k="Responds" v={s.resp.replace("avg ", "~")} />
      </div>
      <p className="cmp-note">“{q.note}”</p>
      <div className="cmp-actions">
        {isAccepted ? (
          <span className="cmp-accepted mono"><Icon name="check" size={14} /> Accepted — details shared</span>
        ) : (
          <>
            <Btn variant="primary" full onClick={() => onAccept(q.sid)}>Accept this quote</Btn>
            <Btn variant="ghost" size="md"><Icon name="message-square" size={15} /> Message</Btn>
          </>
        )}
      </div>
    </div>
  );
}

function BuyerScreen({ nav, t }) {
  const { REQUESTS, byId } = window.QC_DATA;
  const [selId, setSelId] = React.useState(REQUESTS[0].id);
  const [sort, setSort] = React.useState("price");
  const [accepts, setAccepts] = React.useState({}); // reqId -> sid

  const sel = REQUESTS.find((r) => r.id === selId);
  const selCat = byId(sel.cat);
  let quotes = [...sel.quotes];
  const { supplier } = window.QC_DATA;
  quotes.sort((a, b) => sort === "price" ? a.price - b.price : sort === "eta" ? a.eta.localeCompare(b.eta) : supplier(b.sid).rating - supplier(a.sid).rating);

  const totalQuotes = REQUESTS.reduce((n, r) => n + r.quotes.length, 0);
  const active = REQUESTS.filter((r) => r.status !== "accepted").length;

  return (
    <div className="screen buyer-screen">
      <div className="qc-wrap">
        <header className="page-head">
          <div>
            <div className="eyebrow">Buyer dashboard</div>
            <h1 className="display page-title">Your requests</h1>
            <p className="page-sub">Every quote, in one place. Compare and accept when you’re ready.</p>
          </div>
          <Btn variant="primary" size="lg" onClick={() => nav.go("browse")}><Icon name="plus" size={17} /> New request</Btn>
        </header>

        <div className="buyer-stats">
          {[[REQUESTS.length, "Requests"], [active, "Active"], [totalQuotes, "Quotes received"], ["$0", "Spent on fees"]].map(([v, l]) => (
            <div key={l} className="buyer-stat card"><div className="buyer-stat-v display">{v}</div><div className="buyer-stat-l mono">{l}</div></div>
          ))}
        </div>

        <div className="buyer-layout">
          {/* request list */}
          <div className="buyer-list">
            {REQUESTS.map((r) => {
              const c = byId(r.cat);
              const best = r.quotes.length ? Math.min(...r.quotes.map((q) => q.price)) : null;
              return (
                <button key={r.id} className={"req-row card" + (r.id === selId ? " on" : "")} onClick={() => setSelId(r.id)}>
                  <div className="req-row-top">
                    <CatVisual cat={c} iconStyle={t.icons} size={38} radius={8} />
                    <span className="mono req-id">{r.id}</span>
                    <StatusPill status={accepts[r.id] ? "accepted" : r.status} />
                  </div>
                  <div className="req-title">{r.title}</div>
                  <div className="req-foot">
                    <span className="mono req-meta">{r.region} · {r.created}</span>
                    {best != null ? (
                      <span className="req-count mono">{r.quotes.length} quotes · from {money(best)}</span>
                    ) : (
                      <span className="req-count mono dim">awaiting quotes…</span>
                    )}
                  </div>
                </button>
              );
            })}
          </div>

          {/* detail / compare */}
          <div className="buyer-detail">
            <div className="cmp-head card">
              <div className="cmp-head-top">
                <div>
                  <span className="mono cmp-head-id">{sel.id}</span>
                  <h2 className="display cmp-head-title">{sel.title}</h2>
                  <div className="cmp-head-meta mono">{selCat.name} · {sel.sub} · {sel.region}</div>
                </div>
                <CatVisual cat={selCat} iconStyle={t.icons} size={52} radius={10} />
              </div>
              {sel.quotes.length > 0 && (
                <div className="cmp-sortrow">
                  <span className="cmp-sort-l mono">{sel.quotes.length} quotes · sort by</span>
                  <div className="cmp-sort">
                    {[["price", "Price"], ["eta", "Lead time"], ["rating", "Rating"]].map(([k, l]) => (
                      <button key={k} className={"cmp-sort-b" + (sort === k ? " on" : "")} onClick={() => setSort(k)}>{l}</button>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {sel.quotes.length > 0 ? (
              <div className="cmp-grid">
                {quotes.map((q, i) => (
                  <QuoteCompareCard key={q.sid} q={q} cat={selCat} rank={i}
                    accepted={accepts[sel.id]} onAccept={(sid) => setAccepts((p) => ({ ...p, [sel.id]: sid }))} />
                ))}
              </div>
            ) : (
              <div className="cmp-empty card">
                <div className="cmp-empty-ring"><Icon name="radio-tower" size={26} /></div>
                <h3 className="display">Out to {selCat.suppliers} suppliers</h3>
                <p>No quotes back yet — this request is {selCat.eta} fresh. We’ll notify you the moment one lands.</p>
                <div className="cmp-empty-av">{window.QC_DATA.SUPPLIERS.slice(0, 4).map((s) => <SupAvatar key={s.id} sup={s} size={32} />)}<span className="mono">working on it…</span></div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BuyerScreen });