/* Quote Connect — Supplier portal (incoming leads + respond) */

function QuoteComposer({ lead, onSend }) {
  const [price, setPrice] = React.useState("");
  const [eta, setEta] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const valid = price && eta;
  return (
    <div className="sp-composer">
      <h3 className="sp-composer-h">Send your quote</h3>
      <div className="sp-composer-row">
        <label className="qf-field"><span className="qf-label">Your price<i className="qf-req">required</i></span>
          <div className="sp-price-in"><span className="mono">$</span><input inputMode="numeric" value={price} onChange={(e) => setPrice(e.target.value.replace(/[^0-9]/g, ""))} /></div>
        </label>
        <label className="qf-field"><span className="qf-label">Lead time<i className="qf-req">required</i></span>
          <div className="qf-select-wrap"><select value={eta} onChange={(e) => setEta(e.target.value)}>
            <option value="" disabled>Select…</option>
            {["In stock — now", "1 week", "2 weeks", "3–4 weeks", "5–6 weeks", "Made to order"].map((o) => <option key={o}>{o}</option>)}
          </select><Icon name="chevron-down" size={16} /></div>
        </label>
      </div>
      <label className="qf-field"><span className="qf-label">Message to buyer</span>
        <textarea rows={3} value={msg} onChange={(e) => setMsg(e.target.value)} /></label>
      <div className="sp-composer-actions">
        <Btn variant="primary" size="lg" disabled={!valid} onClick={() => onSend(price)}>Send quote <Icon name="send" size={16} /></Btn>
        <span className="sp-composer-note mono"><Icon name="eye-off" size={13} /> Buyer details unlock if they accept</span>
      </div>
    </div>
  );
}

function SupplierScreen({ nav, t }) {
  const { LEADS, byId, SUPPLIERS } = window.QC_DATA;
  const me = SUPPLIERS[0];
  const [filter, setFilter] = React.useState("New");
  const [sent, setSent] = React.useState({}); // leadId -> price
  const [selId, setSelId] = React.useState(LEADS[0].id);

  const statusOf = (l) => (sent[l.id] ? "quoted" : l.status);
  const filters = ["New", "Quoted", "Won", "All"];
  const visible = LEADS.filter((l) => {
    const st = statusOf(l);
    if (filter === "All") return true;
    if (filter === "New") return st === "new" || st === "viewed";
    if (filter === "Quoted") return st === "quoted";
    if (filter === "Won") return st === "won";
    return true;
  });
  const sel = LEADS.find((l) => l.id === selId);
  const selCat = byId(sel.cat);
  const selStatus = statusOf(sel);

  const counts = {
    new: LEADS.filter((l) => statusOf(l) === "new" || statusOf(l) === "viewed").length,
    quoted: LEADS.filter((l) => statusOf(l) === "quoted").length,
    won: LEADS.filter((l) => statusOf(l) === "won").length,
  };

  return (
    <div className="screen supplier-screen">
      <div className="qc-wrap">
        <header className="sp-head card">
          <div className="sp-head-id">
            <SupAvatar sup={me} size={52} />
            <div>
              <div className="sp-head-name display">{me.name}</div>
              <div className="sp-head-meta"><Verified size="sm" /><Stars rating={me.rating} reviews={me.reviews} /><span className="mono sp-head-abn">ABN {me.abn}</span></div>
            </div>
          </div>
          <div className="sp-head-stats">
            {[[counts.new, "New leads", "live"], ["94%", "Response rate", ""], ["38%", "Win rate", ""], [me.resp.replace("avg ", ""), "Avg response", ""]].map(([v, l, tone]) => (
              <div key={l} className="sp-hstat"><div className={"sp-hstat-v display" + (tone ? " accent" : "")}>{v}</div><div className="sp-hstat-l mono">{l}</div></div>
            ))}
          </div>
        </header>

        <div className="sp-layout">
          {/* inbox */}
          <div className="sp-inbox">
            <div className="sp-filters">
              {filters.map((f) => (
                <button key={f} className={"sp-filter" + (filter === f ? " on" : "")} onClick={() => setFilter(f)}>
                  {f}{f === "New" && counts.new > 0 && <span className="sp-filter-badge mono">{counts.new}</span>}
                </button>
              ))}
            </div>
            <div className="sp-leads">
              {visible.map((l) => {
                const c = byId(l.cat);
                const st = statusOf(l);
                return (
                  <button key={l.id} className={"sp-lead" + (l.id === selId ? " on" : "") + (st === "new" ? " unread" : "")} onClick={() => setSelId(l.id)}>
                    <div className="sp-lead-top">
                      <CatVisual cat={c} iconStyle={t.icons} size={34} radius={7} />
                      <span className="mono sp-lead-id">{l.id}</span>
                      <StatusPill status={st} />
                    </div>
                    <div className="sp-lead-title">{l.title}</div>
                    <div className="sp-lead-foot mono">
                      <span>{l.buyer} · {l.region}</span><span className="sp-lead-time">{l.created}</span>
                    </div>
                  </button>
                );
              })}
              {visible.length === 0 && <div className="sp-empty mono">No {filter.toLowerCase()} leads right now.</div>}
            </div>
          </div>

          {/* detail */}
          <div className="sp-detail">
            <div className="sp-detail-head card">
              <div className="sp-detail-top">
                <div>
                  <div className="sp-detail-badges">
                    <span className="mono sp-detail-id">{sel.id}</span>
                    <StatusPill status={selStatus} />
                    {sel.verifiedBuyer && <span className="qc-verified s-sm"><Icon name="user-check" size={13} /><span className="mono">Verified buyer</span></span>}
                  </div>
                  <h2 className="display sp-detail-title">{sel.title}</h2>
                  <div className="sp-detail-meta mono">{selCat.name} · {sel.region}</div>
                </div>
                <CatVisual cat={selCat} iconStyle={t.icons} size={56} radius={11} />
              </div>
              <div className="sp-detail-specs">
                <Spec k="Buyer" v={sel.buyer} />
                <Spec k="Region" v={sel.region} />
                <Spec k="Budget" v={sel.budget && sel.budget !== "—" ? sel.budget : "Not stated"} />
                <Spec k="Posted" v={sel.created} />
                {(sent[sel.id] || sel.quotedPrice) && <Spec k="Your quote" v={money(sent[sel.id] || sel.quotedPrice)} accent />}
              </div>
            </div>

            {selStatus === "won" ? (
              <div className="sp-outcome card win">
                <div className="sp-outcome-ic good"><Icon name="trophy" size={26} /></div>
                <h3 className="display">You won this one.</h3>
                <p>Buyer accepted your {money(sel.quotedPrice)} quote. Their full contact details are now unlocked below.</p>
                <div className="sp-unlocked"><Icon name="phone" size={15} /> <span className="mono">04XX XXX XXX</span> · <Icon name="mail" size={15} /> <span className="mono">buyer@email.com.au</span></div>
              </div>
            ) : selStatus === "lost" ? (
              <div className="sp-outcome card">
                <div className="sp-outcome-ic"><Icon name="x" size={26} /></div>
                <h3 className="display">Buyer went elsewhere.</h3>
                <p>Your {money(sel.quotedPrice)} quote wasn’t selected this time. Faster responses win more — your avg is {me.resp.replace("avg ", "")}.</p>
              </div>
            ) : selStatus === "quoted" ? (
              <div className="sp-outcome card">
                <div className="sp-outcome-ic info"><Icon name="send" size={24} /></div>
                <h3 className="display">Quote sent — {money(sent[sel.id] || sel.quotedPrice)}</h3>
                <p>The buyer can see your offer alongside others. We’ll notify you if they accept or message you.</p>
                <Btn variant="outline" onClick={() => setSent((p) => { const n = { ...p }; delete n[sel.id]; return n; })}>Revise quote</Btn>
              </div>
            ) : (
              <div className="sp-composer-card card">
                <QuoteComposer lead={sel} onSend={(price) => setSent((p) => ({ ...p, [sel.id]: Number(price) }))} />
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SupplierScreen });