/* ============ CORE screens — onboarding (tenant-agnostic) ============
   Catalog comes from useCatalog(); brand strings from useCopy(); ids are the live (string) catalog ids. */

/* ============ Screen 1 — Role picker ============ */
function CampusSummaryCard({ campus }) {
  if (!campus) {
    return (
      <div className="campus-summary empty">
        <Icon name="campus" size={24} />
        <div>No campus selected yet</div>
      </div>
    );
  }

  return (
    <div className="campus-summary">
      <div className="role-ico" style={{ background: "var(--blue-050)", color: "var(--blue-600)" }}>
        <Icon name="campus" size={25} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="campus-summary-name">{campus.name}</div>
        <div className="campus-summary-lines">
          {campus.address && <span><Icon name="pin" size={14} />{campus.address}</span>}
          {campus.phone && <span><Icon name="phone" size={14} />{campus.phone}</span>}
          {campus.levels && <span><Icon name="grad" size={14} />{campus.levels}</span>}
        </div>
      </div>
    </div>
  );
}

function CampusLocatorMap({ campuses, selectedCampusId, onSelect, userLoc }) {
  const points = campuses.filter((c) => c.lat != null && c.lng != null);
  const selected = campuses.find((c) => String(c.id) === String(selectedCampusId)) || points[0] || null;

  const elRef = React.useRef(null);        // map container node
  const mapRef = React.useRef(null);       // Leaflet map instance
  const layerRef = React.useRef(null);     // marker layer group
  const focusedRef = React.useRef(false);  // did we run the initial focus yet?
  const userMarkerRef = React.useRef(null); // "you are here" marker
  const selectRef = React.useRef(onSelect);
  selectRef.current = onSelect;

  const pointsKey = points.map((c) => String(c.id)).join(",");

  // Create the Leaflet map once, with free OpenStreetMap raster tiles.
  React.useEffect(() => {
    const L = window.L;
    if (!L || !elRef.current) return;
    const map = L.map(elRef.current, { scrollWheelZoom: false });
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    map.setView([39.5, -98.35], 4); // continental-US fallback until pins frame the view
    layerRef.current = L.layerGroup().addTo(map);
    mapRef.current = map;
    // Containers inside flex/grid can measure 0px on first paint — re-measure once layout settles.
    const t = window.setTimeout(() => map.invalidateSize(), 0);
    return () => { window.clearTimeout(t); map.remove(); mapRef.current = null; layerRef.current = null; };
  }, []);

  // Draw numbered pins; focus the selected (first-in-list) campus on load, then pan on change.
  React.useEffect(() => {
    const L = window.L, map = mapRef.current, layer = layerRef.current;
    if (!L || !map || !layer) return;
    layer.clearLayers();
    const latlngs = [];
    points.forEach((c, i) => {
      const ll = [Number(c.lat), Number(c.lng)];
      latlngs.push(ll);
      const active = selected && String(selected.id) === String(c.id);
      const icon = L.divIcon({
        className: "campus-pin-marker",
        html: '<div class="campus-pin' + (active ? " active" : "") + '">' + (i + 1) + "</div>",
        iconSize: [34, 34],
        iconAnchor: [17, 17]
      });
      L.marker(ll, { icon: icon, title: c.name })
        .addTo(layer)
        .on("click", function () { selectRef.current(c.id); });
    });
    if (!latlngs.length) return;
    const target = (selected && selected.lat != null && selected.lng != null)
      ? [Number(selected.lat), Number(selected.lng)]
      : latlngs[0];
    if (!focusedRef.current) {
      map.setView(target, 11);   // initial load: lower zoom so nearby campuses are visible too
      focusedRef.current = true;
    } else {
      map.panTo(target);         // selection change: glide to the chosen school
    }
  }, [pointsKey, selectedCampusId]);

  // "You are here": when the visitor shares their location, mark it and recenter on them.
  React.useEffect(() => {
    const L = window.L, map = mapRef.current;
    if (!L || !map || !userLoc) return;
    if (userMarkerRef.current) map.removeLayer(userMarkerRef.current);
    const icon = L.divIcon({
      className: "user-loc-marker",
      html: '<span class="user-loc-dot"></span>',
      iconSize: [18, 18],
      iconAnchor: [9, 9]
    });
    userMarkerRef.current = L.marker([userLoc.lat, userLoc.lng],
      { icon: icon, title: "Your location", interactive: false, keyboard: false }).addTo(map);
    map.setView([userLoc.lat, userLoc.lng], 11);
  }, [userLoc]);

  return (
    <div className="campus-map">
      <div ref={elRef} className="campus-map-canvas" />
      {selected && (
        <div className="campus-map-card">
          <b>{selected.name}</b>
          {selected.address && <span>{selected.address}</span>}
        </div>
      )}
      {points.length === 0 && campuses.length > 0 && (
        <div className="campus-map-note">Map locations aren’t set for these campuses yet.</div>
      )}
    </div>
  );
}

// Nearest campus to a {lat,lng} by squared equirectangular distance — good enough for ranking.
function nearestCampus(loc, campuses) {
  let best = null, bestD = Infinity;
  campuses.forEach((c) => {
    if (c.lat == null || c.lng == null) return;
    const dLat = Number(c.lat) - loc.lat;
    const dLng = (Number(c.lng) - loc.lng) * Math.cos((loc.lat * Math.PI) / 180);
    const d = dLat * dLat + dLng * dLng;
    if (d < bestD) { bestD = d; best = c; }
  });
  return best;
}

function SchoolFrontPage({ selectedCampusId, students, onContinue, onShopCampus }) {
  const C = useCatalog();
  const [query, setQuery] = React.useState("");
  const [region, setRegion] = React.useState("");
  const [selected, setSelected] = React.useState(selectedCampusId || (C.campuses[0] && C.campuses[0].id) || null);
  const [selectedStudentId, setSelectedStudentId] = React.useState(null);
  const [userLoc, setUserLoc] = React.useState(null);
  const [locating, setLocating] = React.useState(false);
  const [locError, setLocError] = React.useState("");
  const regionOpts = C.regions.map((r) => ({ value: r.slug, label: r.name, sub: "Region", icon: "pin" }));
  const campuses = C.campuses.filter((c) => {
    const q = query.trim().toLowerCase();
    const regionOk = !region || c.region_slug === region;
    const text = [c.name, c.address, c.phone, c.levels, C.regionName(c.region_slug)].filter(Boolean).join(" ").toLowerCase();
    return regionOk && (!q || text.includes(q));
  });
  const selectedInFiltered = campuses.find((c) => String(c.id) === String(selected)) || null;
  const selectedCampus = selectedInFiltered || campuses[0] || C.campusById(selected) || C.campuses[0] || null;

  React.useEffect(() => {
    if (!selectedCampusId) return;
    setRegion("");
    setQuery("");
    setSelected(String(selectedCampusId));
    setSelectedStudentId(null);
  }, [selectedCampusId]);

  React.useEffect(() => {
    if (selectedCampus) setSelected(selectedCampus.id);
  }, [selectedCampus && selectedCampus.id]);

  function useCurrentLocation() {
    if (!navigator.geolocation) { setLocError("Location isn’t available in this browser."); return; }
    setLocError("");
    setLocating(true);
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const loc = { lat: pos.coords.latitude, lng: pos.coords.longitude };
        setUserLoc(loc);
        setRegion("");   // search across every campus, not just the filtered region
        setQuery("");
        const near = nearestCampus(loc, C.campuses);
        if (near) {
          setSelected(near.id);
          setSelectedStudentId(null);
        }
        setLocating(false);
      },
      (err) => {
        setLocError(err && err.code === 1 ? "Location permission denied." : "Couldn’t get your location.");
        setLocating(false);
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
    );
  }

  function continueWithCampus() {
    if (selectedCampus) onContinue(selectedCampus.id, selectedStudentId);
  }

  return (
    <div className="school-front screen-anim">
      <div className="school-front-head">
        <div>
          <h1 className="h-title" style={{ fontSize: 26 }}>Find a School near you</h1>
          <p className="h-sub" style={{ marginTop: 6 }}>Get location and contact details. Make this your school when browsing the shop.</p>
        </div>
        <div className="loc-btn-wrap">
          <Btn kind="outline" icon="send" disabled={locating} onClick={useCurrentLocation}>
            {locating ? "Locating…" : "Use Current Location"}
          </Btn>
          {locError && <span className="loc-error">{locError}</span>}
        </div>
      </div>

      <div className="school-front-rule" />

      <div className="school-locator">
        <div className="school-panel">
          {students && students.length > 0 && (
            <div className="student-pick-wrap">
              <label className="school-search-label">Your students</label>
              <div className="student-pick-list">
                {students.map((s) => {
                  const sc = s.campusId ? C.campusById(s.campusId) : null;
                  const active = sc && String(sc.id) === String(selected);
                  return (
                    <button key={s.id} type="button" className={"student-pick" + (active ? " active" : "")}
                      disabled={!sc} onClick={() => { if (sc) { setRegion(""); setQuery(""); setSelected(sc.id); setSelectedStudentId(s.studentId || null); } }}
                      title={sc ? sc.name : "No campus set"}>
                      <Avatar name={s.name} size={30} seed={String(s.id).length} />
                      <span className="student-pick-copy">
                        <b>{s.name}</b>
                        <span>{sc ? sc.name : "No campus set"}</span>
                      </span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}
          <div className="school-region-row">
            <span>Select Region:</span>
            <Combo value={region} onChange={setRegion}
              options={[{ value: "", label: "All Regions", sub: "Show every campus", icon: "grid" }].concat(regionOpts)}
              placeholder="Select..." />
          </div>

          <label className="school-search-label">Locate a school</label>
          <div className="school-search-row">
            <div className="school-search">
              <Icon name="search" size={18} />
              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search by zip code, city, or state" />
            </div>
            <Btn kind="primary" size="sm">Search</Btn>
          </div>

          <div className="campus-list">
            {campuses.map((c, i) => {
              const active = selectedCampus && String(selectedCampus.id) === String(c.id);
              return (
                <button key={c.id} className={"campus-list-item" + (active ? " active" : "")} onClick={() => { setSelected(c.id); setSelectedStudentId(null); }}>
                  <span className="campus-list-num">{i + 1}</span>
                  <span className="campus-list-copy">
                    <b>{c.name}</b>
                    {c.address && <span><Icon name="pin" size={14} />{c.address}</span>}
                    {c.phone && <span><Icon name="phone" size={14} />{c.phone}</span>}
                  </span>
                </button>
              );
            })}
            {campuses.length === 0 && <div className="combo-empty">No campuses match that search.</div>}
          </div>
        </div>

        <div className="school-map-panel">
          <CampusLocatorMap campuses={C.campuses} selectedCampusId={selectedCampus && selectedCampus.id}
            onSelect={(id) => { setSelected(id); setSelectedStudentId(null); }} userLoc={userLoc} />
        </div>
      </div>

      <div className="school-front-actions">
        <CampusSummaryCard campus={selectedCampus} />
        <div className="school-front-cta">
          <Btn kind="outline" icon="shop" disabled={!selectedCampus}
            onClick={() => selectedCampus && onShopCampus && onShopCampus(selectedCampus.id, selectedStudentId)}>Shop this campus</Btn>
          <Btn kind="primary" iconR="arrowR" disabled={!selectedCampus} onClick={continueWithCampus}>Make this my school</Btn>
        </div>
      </div>
    </div>
  );
}

const ROLES = [
  { id: "parent", icon: "parent", name: "Parent / Guardian", desc: "Shop for your children and manage their school store." },
  { id: "student", icon: "student", name: "Student", desc: "Browse your selected campus store." },
  { id: "teacher", icon: "teacher", name: "Teacher", desc: "Order classroom items and manage rosters for your campus." },
  { id: "campus_official", icon: "official", name: "Campus Official", desc: "Place bulk orders and oversee your campus store." },
];

function RolePicker({ initial, onContinue }) {
  const [sel, setSel] = React.useState(initial || null);
  const copy = useCopy();
  const user = useUser();
  const email = (user && user.email) || "you@email.com";
  return (
    <div className="wrap screen-anim">
      <Stepper steps={["School", "Role", "Family", "Shop"]} current={1} />
      <div className="card card-pad">
        <div className="eyebrow"><Icon name="sparkle" size={15} /> {copy.welcomeEyebrow}</div>
        <h1 className="h-title">Let’s set up your account</h1>
        <p className="h-sub">Tell us who you are so we can show you the right tools. You can change this later from your account.</p>

        <div className="role-grid" style={{ marginTop: 24 }}>
          {ROLES.map((r) => (
            <button key={r.id} className={"role-card" + (sel === r.id ? " sel" : "")} onClick={() => setSel(r.id)}>
              <div className="role-ico"><Icon name={r.icon} size={26} /></div>
              <div>
                <div className="role-name">{r.name}</div>
                <div className="role-desc">{r.desc}</div>
              </div>
              <div className="role-check">{sel === r.id && <Icon name="check" size={14} stroke={3} style={{ color: "#fff" }} />}</div>
            </button>
          ))}
        </div>

        <div className="divider" />
        <div className="row-between">
          <span className="field-hint" style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <Icon name="info" size={15} style={{ color: "var(--muted)" }} /> Signed in as <b style={{ color: "var(--ink)" }}>{email}</b>
          </span>
          <Btn kind="primary" disabled={!sel} iconR="arrowR" onClick={() => onContinue(sel)}>Continue</Btn>
        </div>
      </div>
    </div>
  );
}

/* ============ Selected campus summary ============ */
function CampusTeacherFields({ campusId }) {
  const C = useCatalog();
  return <CampusSummaryCard campus={C.campusById(campusId)} />;
}

/* ============ Screen 2 — Student profile ============ */
function StudentProfile({ value, childName, onBack, onContinue }) {
  const C = useCatalog();
  const campusId = value.campusId || null;
  const ready = !!campusId;
  const forChild = !!childName;
  const selectedCampus = C.campusById(campusId);

  return (
    <div className="wrap screen-anim">
      {!forChild && <Stepper steps={["School", "Role", "Family", "Shop"]} current={1} />}
      <div className="card card-pad">
        <div className="eyebrow"><Icon name="campus" size={15} /> Selected school</div>
        <h1 className="h-title">{forChild ? "Use your selected school" : "Your campus is set"}</h1>
        <p className="h-sub">
          {forChild
            ? "New children use the school selected on the first page. Teacher and grade are not collected in this flow."
            : "This is the campus we will use for your school store. Teacher and grade are not collected in this flow."}
        </p>

        <div style={{ marginTop: 22 }}>
          <CampusSummaryCard campus={selectedCampus} />
        </div>

        <div className="divider" />
        <div className="row-between">
          <Btn kind="quiet" icon="chevLeft" onClick={onBack}>Back</Btn>
          <Btn kind="primary" disabled={!ready} iconR="arrowR"
            onClick={() => onContinue({ campusId, teacherId: null, grade: null })}>Save &amp; continue</Btn>
        </div>
      </div>
    </div>
  );

}

/* ============ Add-child modal (parent) ============ */
function AddChildModal({ onClose, onAdd, selectedCampus }) {
  const C = useCatalog();
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [campusId, setCampusId] = React.useState(selectedCampus ? String(selectedCampus.id) : "");

  const campusOpts = C.campuses.map((c) => ({ value: String(c.id), label: c.name, sub: c.address || C.regionName(c.region_slug), icon: "campus" }));
  const canSubmit = name.trim() && campusId;

  function submit() {
    if (!canSubmit) return;
    onAdd({ mode: "manual", name: name.trim(), email: email.trim() || null, campusId: campusId, teacherId: null, grade: null });
  }

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}><Icon name="plus" size={15} /> Add a child</div>
            <h2 style={{ fontSize: 22, fontWeight: 800 }}>Add a child to your family</h2>
          </div>
          <button className="modal-x" onClick={onClose}><Icon name="plus" size={20} style={{ transform: "rotate(45deg)" }} /></button>
        </div>

        <div style={{ padding: "20px 24px 8px" }}>
          <Field label="Child’s name" required>
            <input className="control" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Maya Johnson" />
          </Field>
          <Field label="Campus" required hint="Every child is assigned to a campus.">
            <Combo value={campusId} onChange={setCampusId} options={campusOpts} placeholder="Select a campus…" />
          </Field>
          <Field label="Child’s email" optional>
            <input className="control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="child@email.com" />
          </Field>
          <Callout icon="info">
            Adds the child directly — <b>no account needed</b>. They’re linked to you and shoppable right away; an email (optional) connects their account later.
          </Callout>
        </div>

        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", padding: "10px 24px 22px" }}>
          <Btn kind="ghost" onClick={onClose}>Cancel</Btn>
          <Btn kind="primary" disabled={!canSubmit} icon="plus" onClick={submit}>Add child</Btn>
        </div>
      </div>
    </div>
  );
}

/* ============ Screen 3 — Link a child (parent onboarding) ============ */
function LinkChild({ children, onAdd, onRemove, onResend, onSetSchool, onBack, onContinue, selectedCampus }) {
  const [showAdd, setShowAdd] = React.useState(children.length === 0);
  return (
    <div className="wrap screen-anim">
      <Stepper steps={["School", "Role", "Family", "Shop"]} current={2} />
      <div className="card card-pad">
        <div className="eyebrow"><Icon name="parent" size={15} /> Family setup</div>
        <h1 className="h-title">Add your children</h1>
        <p className="h-sub">Add each child and assign their campus so you can shop on their behalf.</p>

        <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          {children.map((c) => (
            <ChildRow key={c.id} child={c} onRemove={() => onRemove(c.id)} onResend={() => onResend(c.id)} onSetSchool={() => onSetSchool(c.id)} />
          ))}
          <button className="add-tile" style={{ minHeight: 0, flexDirection: "row", padding: "16px" }} onClick={() => setShowAdd(true)}>
            <Icon name="plus" size={20} /> <span style={{ fontFamily: "var(--hd)", fontWeight: 800 }}>Add {children.length ? "another" : "a"} child</span>
          </button>
        </div>

        <div className="divider" />
        <div className="row-between">
          <Btn kind="quiet" icon="chevLeft" onClick={onBack}>Back</Btn>
          <Btn kind="primary" disabled={children.length === 0} iconR="arrowR" onClick={onContinue}>
            {children.length === 0 ? "Add a child to continue" : "Continue"}
          </Btn>
        </div>
      </div>
      {showAdd && <AddChildModal selectedCampus={selectedCampus} onClose={() => setShowAdd(false)} onAdd={(c) => { onAdd(c); setShowAdd(false); }} />}
    </div>
  );
}

function ChildRow({ child, onRemove, onResend, onSetSchool }) {
  const C = useCatalog();
  const branding = useBranding();
  const campus = child.campusId ? C.campusById(child.campusId) : null;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", border: "1px solid var(--line)", borderRadius: "var(--r-md)", background: "#fff", boxShadow: "var(--shadow-sm)" }}>
      <Avatar name={child.name} size={46} seed={String(child.id).length} palette={branding.avatarPalette} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--hd)", fontWeight: 800, fontSize: 16 }}>{child.name}</span>
          {child.claimed
            ? <Chip kind="ok" icon="check">Linked</Chip>
            : <Chip kind="neutral" icon="user">Added</Chip>}
        </div>
        <div className="field-hint" style={{ marginTop: 3 }}>
          {campus ? campus.name : "No campus set yet"}
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, flex: "none" }}>
        <Btn kind="ghost" size="sm" icon="edit" onClick={onSetSchool}>School</Btn>
        <button className="btn btn-sm btn-danger-quiet" onClick={onRemove} title="Remove"><Icon name="trash" size={16} /></button>
      </div>
    </div>
  );
}

Object.assign(window, { SchoolFrontPage, CampusLocatorMap, CampusSummaryCard, RolePicker, CampusTeacherFields, StudentProfile, AddChildModal, LinkChild, ChildRow, ROLES });