/* Quote Connect — Coverage screen (map view · supplier sign-up · admin radius) */

function CoverageScreen({ nav, t }) {
  const { SUPPLIERS, nearestPlace } = window.QC_DATA;
  const [mode, setMode] = React.useState("map"); // map | signup | admin
  const [sel, setSel] = React.useState(SUPPLIERS[0].id);
  const [radii, setRadii] = React.useState(() => Object.fromEntries(SUPPLIERS.map((s) => [s.id, s.radiusKm])));
  const [signupPin, setSignupPin] = React.useState(null);
  const [stateFilter, setStateFilter] = React.useState("All");

  // suppliers with live (admin-edited) radius applied
  const supList = SUPPLIERS.map((s) => ({ ...s, radiusKm: radii[s.id] }));
  const shown = stateFilter === "All" ? supList : supList.filter((s) => s.state === stateFilter);
  const selSup = supList.find((s) => s.id === sel);
  const states = ["All", ...Array.from(new Set(SUPPLIERS.map((s) => s.state)))];

  const onPick = (lng, lat) => {
    const near = nearestPlace(lat, lng);
    setSignupPin({ lng, lat, label: near.name, radiusKm: 250 });
  };

  return (
    <div className="screen cov-screen">
      <div className="qc-wrap">
        <header className="page-head">
          <div>
            <div className="eyebrow">Supplier network</div>
            <h1 className="display page-title">Coverage map</h1>
            <p className="page-sub">Where our verified suppliers are based — and how far each one delivers. Coverage radius is set per supplier by Quote&nbsp;Connect admin.</p>
          </div>
          <div className="cov-modes">
            {[["map", "Supplier map", "map"], ["signup", "Supplier sign-up", "map-pin-plus"], ["admin", "Admin: radius", "shield-half"]].map(([k, l, ic]) => (
              <button key={k} className={"cov-mode" + (mode === k ? " on" : "")} onClick={() => setMode(k)}>
                <Icon name={ic} size={15} /> {l}
              </button>
            ))}
          </div>
        </header>

        <div className="cov-layout">
          {/* MAP */}
          <div className="cov-map-wrap card">
            {mode === "map" && (
              <div className="cov-toolbar">
                <span className="mono cov-toolbar-l">{shown.length} suppliers</span>
                <div className="cov-states">
                  {states.map((s) => (
                    <button key={s} className={"cov-state" + (stateFilter === s ? " on" : "")} onClick={() => setStateFilter(s)}>{s}</button>
                  ))}
                </div>
              </div>
            )}
            {mode === "admin" && (
              <div className="cov-toolbar">
                <span className="cov-admin-flag mono"><Icon name="lock" size={12} /> Admin only — internal control</span>
                <span className="mono cov-toolbar-l">Editing: {selSup.code}</span>
              </div>
            )}
            <CoverageMap
              suppliers={mode === "signup" ? supList : shown}
              selectedId={sel}
              onSelect={setSel}
              mode={mode}
              signupPin={signupPin}
              onPick={onPick}
              editId={mode === "admin" ? sel : null}
            />
            <div className="cov-legend">
              <span><span className="cov-leg-dot" /> Supplier location</span>
              <span><span className="cov-leg-ring" /> Delivery radius (admin-set)</span>
            </div>
          </div>

          {/* PANEL */}
          <aside className="cov-panel">
            {mode === "map" && <CovDetail sup={selSup} nav={nav} />}
            {mode === "signup" && <CovSignup pin={signupPin} reset={() => setSignupPin(null)} nav={nav} />}
            {mode === "admin" && (
              <CovAdmin suppliers={supList} sel={sel} setSel={setSel} radii={radii} setRadii={setRadii} />
            )}
          </aside>
        </div>
      </div>
    </div>
  );
}

function CovDetail({ sup, nav }) {
  return (
    <div className="cov-card card">
      <div className="cov-card-head">
        <SupAvatar sup={sup} size={46} />
        <div className="cov-card-htext">
          <div className="cov-card-name">{sup.name}</div>
          <div className="cov-card-loc mono"><Icon name="map-pin" size={12} /> {sup.loc}</div>
        </div>
      </div>
      <div className="cov-card-meta"><Verified size="sm" /><Stars rating={sup.rating} reviews={sup.reviews} /></div>
      <hr className="rule-dot" />
      <div className="cov-card-specs">
        <Spec k="Coverage radius" v={sup.radiusKm + " km"} accent />
        <Spec k="Home base" v={sup.state} />
        <Spec k="Responds" v={sup.resp.replace("avg ", "~")} />
        <Spec k="Member since" v={String(sup.since)} />
      </div>
      <div className="cov-card-note">
        <Icon name="info" size={13} />
        <span>Delivers within ~{sup.radiusKm} km of {sup.loc.split(",")[0]}. Radius is set by Quote Connect admin during verification.</span>
      </div>
      <Btn variant="dark" full onClick={() => nav.go("supplier")}>Open supplier portal <Icon name="arrow-right" size={16} /></Btn>
    </div>
  );
}

function CovSignup({ pin, reset, nav }) {
  const [step, setStep] = React.useState(1);
  if (!pin) {
    return (
      <div className="cov-card card">
        <div className="eyebrow">Become a supplier · step 1</div>
        <h3 className="cov-signup-h display">Set your business location</h3>
        <p className="cov-signup-p">Click your town on the map. This is where you’re based — buyers nearby will see your quotes first.</p>
        <ol className="cov-signup-steps">
          <li><span className="cov-step-n mono">1</span> Pin your location on the map</li>
          <li className="dim"><span className="cov-step-n mono">2</span> We verify your ABN &amp; business</li>
          <li className="dim"><span className="cov-step-n mono">3</span> Admin sets your delivery radius</li>
        </ol>
        <div className="cov-signup-tip mono"><Icon name="hand-pointer" size={14} /> Click the map to drop your pin</div>
      </div>
    );
  }
  return (
    <div className="cov-card card">
      <div className="eyebrow">Become a supplier · step 2</div>
      <h3 className="cov-signup-h display">Confirm your location</h3>
      <div className="cov-picked">
        <span className="cov-picked-ic"><Icon name="map-pin" size={16} /></span>
        <div>
          <div className="cov-picked-label">{pin.label}</div>
          <div className="cov-picked-coords mono">{Math.abs(pin.lat).toFixed(2)}°S, {pin.lng.toFixed(2)}°E</div>
        </div>
        <button className="cov-picked-edit" onClick={reset}>Change</button>
      </div>
      <label className="cov-field"><span className="qf-label">Business name<i className="qf-req">required</i></span>
        <input /></label>
      <label className="cov-field"><span className="qf-label">ABN<i className="qf-req">required</i></span>
        <input /></label>
      <div className="cov-radius-locked">
        <div className="cov-radius-locked-top">
          <span className="qf-label" style={{ margin: 0 }}>Delivery radius</span>
          <span className="cov-locked-badge mono"><Icon name="lock" size={11} /> Set by admin</span>
        </div>
        <div className="cov-radius-bar"><div className="cov-radius-bar-fill" style={{ width: "0%" }} /></div>
        <p className="cov-radius-locked-note">Assigned by Quote Connect admin after your business is verified — suppliers can’t set their own radius.</p>
      </div>
      <Btn variant="primary" full onClick={() => nav.go("supplier")}>Submit application <Icon name="arrow-right" size={16} /></Btn>
    </div>
  );
}

function CovAdmin({ suppliers, sel, setSel, radii, setRadii }) {
  const selSup = suppliers.find((s) => s.id === sel);
  return (
    <div className="cov-card card cov-admin-card">
      <div className="cov-admin-head">
        <span className="cov-admin-badge mono"><Icon name="shield-half" size={13} /> Admin console</span>
        <span className="cov-admin-sub mono">Coverage radius control</span>
      </div>
      <p className="cov-admin-intro">Set how far each verified supplier can deliver. Suppliers see this as read-only; only admin can change it.</p>
      <div className="cov-admin-list">
        {suppliers.map((s) => (
          <div key={s.id} className={"cov-admin-row" + (s.id === sel ? " on" : "")} onClick={() => setSel(s.id)}>
            <div className="cov-admin-row-top">
              <SupAvatar sup={s} size={30} />
              <div className="cov-admin-row-id">
                <div className="cov-admin-row-name">{s.name}</div>
                <div className="cov-admin-row-loc mono">{s.loc}</div>
              </div>
              <span className="cov-admin-km mono">{radii[s.id]} km</span>
            </div>
            <input type="range" min="80" max="800" step="10" value={radii[s.id]}
              className="cov-slider"
              onChange={(e) => setRadii((p) => ({ ...p, [s.id]: Number(e.target.value) }))}
              onClick={(e) => e.stopPropagation()} />
          </div>
        ))}
      </div>
      <div className="cov-admin-foot mono"><Icon name="info" size={12} /> Changes preview live on the map</div>
    </div>
  );
}

window.CoverageScreen = CoverageScreen;