Marha — مرحى

nav.pop()} />

{p.name}

{tService(p.profession, t)}

{[1, 2, 3, 4, 5].map((i) => ( ))}

{stars === 1 ? "⚡ " + t("ratingPoor") : stars === 2 ? "😐 " + t("ratingFair") : stars === 3 ? "👍 " + t("ratingGood") : stars === 4 ? "😊 " + t("ratingGreat") : "🌟 " + t("ratingExcellent")}

{[t("professionalism"), t("speed"), t("quality"), t("communication"), t("value")].map((c) => ( ))}

setReviewText(e.target.value)}
            placeholder={t("writeReviewOptional")}
            style={{
              width: "100%", minHeight: 90, padding: "12px 14px",
              border: `1.5px solid ${COLORS.line}`, borderRadius: 14,
              fontSize: 13, fontFamily: "Inter, sans-serif", color: COLORS.ink,
              background: COLORS.surface, resize: "none", outline: "none",
              boxSizing: "border-box"
            }}
          />
        </div>
      </div>
      <BottomActionBar>
        <button onClick={submit} style={{
          flex: 1, background: COLORS.primary, color: COLORS.primaryText, border: "none", borderRadius: 14,
          padding: "13px 0", fontWeight: 700, fontSize: 14, cursor: "pointer", fontFamily: "Space Grotesk, sans-serif",
        }}>{t("submitReview")}</button>
      </BottomActionBar>
    </div>
  );
}

/* ---------------- Provider-side dashboard ---------------- */
function ProviderDashboard({ nav, user, onUpdateUser, available, setAvailable, onAcceptJob }) {
  const { t } = useLang();
  const isLoggedIn = !!user;
  const isProvider = user?.role === "provider";
  const verified = user?.verified || "unverified";
  const isApproved = isProvider && verified === "approved";
  const [incoming, setIncoming] = useState(null);
  const [skipIn, setSkipIn] = useState(60);
  const providerStats = {
    avg_rating: user?.avg_rating || null,
    total_jobs: user?.total_jobs || 0,
  };
  const timeoutRef = useRef(null);

// ── Broadcast provider GPS location while online ──
  useEffect(() => {
    if (!available || !isApproved) return;
    const broadcastLocation = () => {
      if (!navigator.geolocation) return;
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          const { latitude: lat, longitude: lng } = pos.coords;
          const tok = _apiToken || sessionStorage.getItem("marha_token");
          fetch("https://zyad.marha.app/location", {
            method: "POST",
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${tok}` },
            body: JSON.stringify({ lat, lng })
          }).catch(() => {});
        },
        () => {},
        { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
      );
    };
    broadcastLocation();
    const locTimer = setInterval(broadcastLocation, 5000);
    return () => clearInterval(locTimer);
  }, [available, isApproved]);

useEffect(() => {
    if (available && isApproved) {
      const _tmr = setTimeout(() => {
        // Real job notifications come via FCM
      }, 1800);
      return () => clearTimeout(_tmr);
    }
  }, [available, isApproved]);

useEffect(() => {
    if (incoming) {
      setSkipIn(60);
      timeoutRef.current = setTimeout(() => setIncoming(null), 60000);
      return () => clearTimeout(timeoutRef.current);
    }
  }, [incoming]);

useEffect(() => {
    if (!incoming) return;
    const interval = setInterval(() => setSkipIn((s) => (s > 0 ? s - 1 : 0)), 1000);
    return () => clearInterval(interval);
  }, [incoming]);

const toggleAvailable = () => {
    if (!isApproved) return; // hard-blocked until ID + selfie are approved
    setAvailable((a) => !a);
  };

// Not signed in at all, or signed in as a customer — there's no provider
  // account here yet, so explain that instead of showing a dead toggle.
  if (!isLoggedIn || !isProvider) {
    return (
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
        <TopBar title={t("providerDashboard")} onBack={() => nav.reset("home")} />
        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 30, textAlign: "center" }}>
          <div style={{ width: 56, height: 56, borderRadius: "50%", background: COLORS.paperDim, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Power size={22} color={COLORS.slate} />
          </div>
          <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 16, marginTop: 14, color: COLORS.ink }}>
            {isLoggedIn ? "This account isn't a service pro" : "You're not signed in as a pro"}
          </div>
          <div style={{ fontSize: 13, color: COLORS.slate, marginTop: 6, maxWidth: 260 }}>
            {isLoggedIn
              ? "You're signed in as a customer. Create a separate pro account to receive job requests."
              : "Sign up or log in as a service pro to see your jobs, earnings, and availability here."}
          </div>
          <button
            onClick={() => nav.push("signup", { role: "provider" })}
            style={{
              marginTop: 22, background: COLORS.primary, color: COLORS.primaryText, border: "none", borderRadius: 14,
              padding: "12px 28px", fontWeight: 700, fontSize: 13.5, cursor: "pointer",
            }}
          >
            Become a pro
          </button>
        </div>
      </div>
    );
  }

return (
    <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
      <TopBar title={t("providerDashboard")} onBack={() => nav.reset("home")} />
      <div style={{ flex: 1, overflowY: "auto", padding: "16px 18px 100px" }}>
        {!isApproved && (
          <div style={{
            background: verified === "pending" ? `${COLORS.amber}15` : `${COLORS.ember}12`,
            border: `1.5px solid ${verified === "pending" ? COLORS.amber : COLORS.ember}55`,
            borderRadius: 16, padding: 16, marginBottom: 16,
          }}>
            <div style={{ display:"flex", alignItems:"flex-start", gap: 12 }}>
              <div style={{ fontSize: 28, flexShrink: 0 }}>{verified === "pending" ? "⏳" : "🛡️"}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 14, color: COLORS.ink, marginBottom: 4 }}>
                  {verified === "pending" ? t("verificationInReview") : t("verifyYourIdentity")}
                </div>
                <div style={{ fontSize: 12, color: COLORS.slate, lineHeight: 1.6 }}>
                  {verified === "pending"
                    ? "We're reviewing your ID & selfie. You'll be notified once approved."
                    : "Upload your National ID and a selfie to start accepting job requests."}
                </div>
                {verified !== "pending" && (
                  <button onClick={() => nav.push("verify", {})} style={{
                    marginTop: 10, padding: "9px 18px", border: "none",
                    borderRadius: 10, background: COLORS.primary, color: "#fff",
                    fontWeight: 700, fontSize: 13, cursor: "pointer",
                    display: "flex", alignItems: "center", gap: 6
                  }}>
                    🪪 Verify Now →
                  </button>
                )}
              </div>
            </div>
            {verified === "pending" && (
              <div style={{ display:"flex", alignItems:"center", gap:8, marginTop:14 }}>
                {["Submitted","Under Review","Decision"].map((s,i) => (
                  <React.Fragment key={s}>
                    <div style={{ display:"flex",flexDirection:"column",alignItems:"center",gap:3 }}>
                      <div style={{ width:24,height:24,borderRadius:"50%",background:i<2?COLORS.amber:"#e2e8f0",display:"flex",alignItems:"center",justifyContent:"center" }}>
                        {i===0 && <span style={{ color:"#fff",fontSize:11,fontWeight:700 }}>✓</span>}
                        {i===1 && <span style={{ fontSize:10 }}>⏳</span>}
                        {i===2 && <span style={{ fontSize:10,color:COLORS.slate }}>○</span>}
                      </div>
                      <span style={{ fontSize:9,color:COLORS.slate,fontWeight:600,whiteSpace:"nowrap" }}>{s}</span>
                    </div>
                    {i < 2 && <div style={{ flex:1,height:2,background:i===0?COLORS.amber:COLORS.line,marginBottom:14 }} />}
                  </React.Fragment>
                ))}
              </div>
            )}
          </div>
        )}

<div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          background: COLORS.surface, borderRadius: 16, padding: 14, opacity: isApproved ? 1 : 0.5,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
            <Radar color={available ? COLORS.signal : COLORS.slate} active={available} size={10} />
            <span style={{ fontWeight: 600, fontSize: 13.5, color: COLORS.ink }}>{available ? "Available" : t("offline")}</span>
          </div>
          <button onClick={toggleAvailable} disabled={!isApproved} style={{
            width: 46, height: 26, borderRadius: 20, border: "none", cursor: isApproved ? "pointer" : "not-allowed",
            background: available ? COLORS.signal : COLORS.slate, position: "relative", transition: "0.2s",
          }}>
            <span style={{
              position: "absolute", top: 3, left: available ? 23 : 3, width: 20, height: 20,
              borderRadius: "50%", background: "#fff", transition: "0.2s",
            }} />
          </button>
        </div>

<Section title={t("todaysJobs")}>
          {[{ t: "09:20", n: "AC inspection", c: "Yassmine A.", s: t("completed") },
            { t: "11:45", n: "Outlet repair", c: "Driss L.", s: t("completed") }].map((j, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", background: COLORS.surface, borderRadius: 12, padding: 12, marginBottom: 8 }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: COLORS.ink }}>{j.n}</div>
                <div style={{ fontSize: 11.5, color: COLORS.slate, marginTop: 2 }}>{j.c} · {j.t}</div>
              </div>
              <span style={{ fontSize: 11, color: COLORS.signal, fontWeight: 700, alignSelf: "center" }}>{j.s}</span>
            </div>
          ))}
        </Section>
      </div>

{incoming && (
        <div style={{
          position: "absolute", left: 18, right: 18, bottom: 14,
          background: "#1B3FA0",
          borderRadius: 22, padding: "18px 16px 16px",
          boxShadow: "0 20px 60px rgba(0,0,0,0.85), 0 0 0 2px #5B8AF0",
          zIndex: 60,
        }}>
          {/* Pulsing ring */}
          <div style={{
            position: "absolute", inset: -4, borderRadius: 26,
            border: "2px solid #7EB3FF",
            opacity: 0.6, animation: "ih-pulse 1.5s ease-out infinite",
            pointerEvents: "none",
          }} />

{/* Header */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 12 }}>
            <div>
              <div style={{ fontWeight: 800, fontSize: 16, fontFamily: "Space Grotesk, sans-serif", color: "#FFFFFF", letterSpacing: -0.3 }}>
                🔔 New job request
              </div>
              <div style={{ fontSize: 12.5, color: "#D6E8FF", fontWeight: 600, marginTop: 3 }}>
                Respond before it's gone
              </div>
            </div>
            <div style={{
              background: "#0F2460", borderRadius: 12, padding: "6px 12px",
              fontSize: 15, color: "#FFFFFF", fontWeight: 800,
              fontFamily: "Space Grotesk, sans-serif", minWidth: 48, textAlign: "center",
              border: "1.5px solid #4A7CF6",
            }}>
              {skipIn}s
            </div>
          </div>

{/* Job card — fully opaque */}
          <div style={{
            background: "#0F2460", borderRadius: 14, padding: "13px 14px", marginBottom: 14,
            border: "1px solid #3B6FD4",
          }}>
            <div style={{ color: "#FFFFFF", fontSize: 15.5, fontWeight: 700 }}>
              {incoming.name}
            </div>
            <div style={{ color: "#D6E8FF", fontSize: 13, fontWeight: 600, marginTop: 5 }}>
              {tService(incoming.job, t)} · {incoming.distance}
            </div>
            <div style={{ color: "#B8D4FF", fontSize: 12.5, marginTop: 8, fontStyle: "italic", lineHeight: 1.5 }}>
              "{incoming.desc}"
            </div>
          </div>

{/* Buttons */}
          <div style={{ display: "flex", gap: 10 }}>
            <button onClick={() => setIncoming(null)} style={{
              flex: 1, padding: "13px 0", borderRadius: 12,
              border: "2px solid #D6E8FF",
              background: "transparent",
              color: "#FFFFFF", fontWeight: 700, fontSize: 14,
              cursor: "pointer", fontFamily: "Space Grotesk, sans-serif",
            }}>{t("decline")}</button>
            <button onClick={() => {
              const bookingId = onAcceptJob?.(incoming);
              nav.push("providerJob", { job: { ...incoming, bookingId } });
              setIncoming(null);
            }} style={{
              flex: 2, padding: "13px 0", borderRadius: 12, border: "none",
              background: "#FFFFFF",
              color: "#1B3FA0", fontWeight: 800, fontSize: 14.5, cursor: "pointer",
              fontFamily: "Space Grotesk, sans-serif",
              boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
            }}>✓ Accept job</button>
          </div>
        </div>
      )}
    </div>
  );
}

function navigateToJob(job) {
  // No real customer coordinates exist in this mock data layer — in
  // production this would use the booking's actual lat/lng from
  // bookings.customer_location (see schema.sql). For now we open Google
  // Maps directions toward the job's general area so the action is real.
  const destination = encodeURIComponent(`${job.name} (Marha job), Casablanca`);
  window.open(`https://www.google.com/maps/dir/?api=1&destination=${destination}&travelmode=driving`, "_blank");
}

// Real Leaflet map for provider — shows customer destination + provider's own GPS
  useEffect(() => {
    if (!provMapRef.current || provMapInstanceRef.current || typeof L === "undefined") return;
    const custLat = job?.customerLat || 33.5731;
    const custLng = job?.customerLng || -7.5898;
    const map = L.map(provMapRef.current, { center:[custLat,custLng], zoom:14, zoomControl:false, attributionControl:false });
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom:19 }).addTo(map);
    custMarkerRef2.current = L.marker([custLat,custLng], {
      icon: L.divIcon({ html:`<div style="background:#DC2626;width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 12px rgba(220,38,38,.5);display:flex;align-items:center;justify-content:center;font-size:20px">🏠</div>`, className:"", iconSize:[38,38], iconAnchor:[19,38] })
    }).addTo(map).bindPopup(job.name + " · Destination");
    provMapInstanceRef.current = map;
    setTimeout(() => map.invalidateSize(), 200);

const handlePhotoUpload = (e, setter) => {
    const files = Array.from(e.target.files || []);
    const withPreviews = files.map((f) => ({ url: URL.createObjectURL(f), name: f.name }));
    setter((prev) => [...prev, ...withPreviews]);
    e.target.value = "";
  };

const removePhoto = (idx, setter) =>
    setter((prev) => prev.filter((_, i) => i !== idx));

function PhotoUploadPanel({ label, hint, photos, inputRef, setter, color }) {
    return (
      <div style={{ marginTop: 10 }}>
        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          multiple
          style={{ display: "none" }}
          onChange={(e) => handlePhotoUpload(e, setter)}
        />
        <div style={{ fontSize: 11.5, color: COLORS.ink, opacity: 0.7, marginBottom: 6 }}>{hint}</div>
        <button
          onClick={() => inputRef.current?.click()}
          style={{
            width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "10px 12px",
            border: `1.5px dashed ${photos.length > 0 ? color : COLORS.line}`,
            background: photos.length > 0 ? `${color}14` : COLORS.buttonSubtle,
            borderRadius: 12, cursor: "pointer", fontSize: 12.5, fontWeight: 600, color: COLORS.ink,
          }}
        >
          <Camera size={15} color={photos.length > 0 ? color : COLORS.ink} />
          {photos.length > 0 ? `${photos.length} photo${photos.length > 1 ? "s" : ""} ${t("uploaded")}` : `${t("uploadLabel")} ${label === "before" ? t("beforePhotos") : t("afterPhotos")}`}
        </button>
        {photos.length > 0 && (
          <div style={{ display: "flex", gap: 8, marginTop: 8, flexWrap: "wrap" }}>
            {photos.map((p, i) => (
              <div key={i} style={{ position: "relative", width: 64, height: 64 }}>
                <img src={p.url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 10, border: `2px solid ${color}` }} />
                <button
                  onClick={() => removePhoto(i, setter)}
                  style={{
                    position: "absolute", top: -6, right: -6, width: 20, height: 20,
                    borderRadius: "50%", background: COLORS.ink, border: `2px solid ${COLORS.paper}`,
                    display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
                  }}
                >
                  <X size={11} color="#fff" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

// Destroy map when job is completed to prevent blank space
  useEffect(() => {
    if (stage === "completed" && provMapInstanceRef.current) {
      provMapInstanceRef.current.remove();
      provMapInstanceRef.current = null;
    }
  }, [stage]);

useEffect(() => {
    if (stage !== "en_route") return;
    const timerId = setInterval(() => setEta((e) => (e > 1 ? e - 1 : e)), 1500);
    return () => clearInterval(timerId);
  }, [stage]);

// Poll for customer cancellation
  useEffect(() => {
    if (customerCancelled || stage === "completed") return;
    const bid = job.bookingId || job.id || params.bookingId;
    if (!bid) return;
    const tok = _apiToken || sessionStorage.getItem("marha_token");
    if (!tok) return;
    const checkCancel = () => {
      fetch(`https://zyad.marha.app/tracking/${bid}`, {
        headers: { Authorization: `Bearer ${tok}` }
      }).then(r => r.json()).then(res => {
        if (res.status === "success" && res.data && res.data.status === "cancelled") {
          setCustomerCancelled(true);
          const bid2 = job.bookingId || job.id || params.bookingId;
          if (bid2 && removeUpcomingBooking) removeUpcomingBooking(bid2);
        }
      }).catch(() => {});
    };
    checkCancel();
    const _cancelPoll = setInterval(checkCancel, 5000);
    return () => clearInterval(_cancelPoll);
  }, [customerCancelled, stage]);

// Auto-dismiss countdown when customer cancels
  useEffect(() => {
    if (!customerCancelled) return;
    if (dismissCountdown <= 0) { nav.reset("home"); return; }
    const _cTimer = setTimeout(() => setDismissCountdown(c => c - 1), 1000);
    return () => clearTimeout(_cTimer);
  }, [customerCancelled, dismissCountdown]);

// Whenever the stage changes, jump the scroll position back to the top so
  // whatever's now relevant (price quote, progress checklist, etc.) is
  // immediately visible without the provider needing to scroll for it.
  useEffect(() => {
    contentRef.current?.scrollTo({ top: 0, behavior: "smooth" });
    if (stage === "arrived") {
      const _tmr2 = setTimeout(() => priceInputRef.current?.focus(), 350);
      return () => clearTimeout(_tmr2);
    }
  }, [stage]);

const stageMeta = {
    en_route: { label: t("onTheWayToCustomer"), color: COLORS.amber },
    arrived: { label: t("arrivedExamineJob"), color: COLORS.signal },
    in_progress: { label: t("jobInProgress"), color: COLORS.ember },
    completed: { label: t("jobCompleted"), color: COLORS.signal },
  }[stage];

if (stage === "completed") {
    const allPhotos = [
      ...beforePhotos.map((p) => ({ ...p, tag: "Before", color: COLORS.amber })),
      ...afterPhotos.map((p) => ({ ...p, tag: "After", color: COLORS.signal })),
    ];
    return (
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
        <TopBar title={t("jobCompleted")} onBack={() => nav.reset("home")} />
        <div style={{ flex: 1, overflowY: "auto", padding: "24px 22px 40px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: `${COLORS.signal}1A`, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Check size={28} color={COLORS.signal} />
          </div>
          <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 17, marginTop: 14 }}>{t("jobCompletedTitle")}</div>
          <div style={{ fontSize: 13, color: COLORS.slate, marginTop: 6, maxWidth: 260 }}>
            {t("paymentOf")} {quotedPrice} {getCurrency(user).code} {t("paymentOfCollected")} {job.name}.
          </div>

{allPhotos.length > 0 && (
            <div style={{ width: "100%", marginTop: 22, textAlign: "left" }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: COLORS.ink, marginBottom: 10 }}>Job documentation</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {allPhotos.map((p, i) => (
                  <div key={i} style={{ position: "relative" }}>
                    <img src={p.url} alt="" style={{ width: 80, height: 80, objectFit: "cover", borderRadius: 12, border: `2px solid ${p.color}` }} />
                    <span style={{
                      position: "absolute", bottom: 4, left: 4, fontSize: 9, fontWeight: 700,
                      color: "#fff", background: p.color, borderRadius: 4, padding: "2px 5px",
                    }}>{p.tag}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

<button onClick={() => nav.reset("home")} style={{
            marginTop: 22, background: COLORS.primary, color: COLORS.primaryText, border: "none", borderRadius: 14,
            padding: "12px 28px", fontWeight: 700, fontSize: 13.5, cursor: "pointer",
          }}>{t("backToDashboard")}</button>
        </div>
      </div>
    );
  }

// Full in-app navigation view — stays on screen instead of leaving to an
  // external maps app/tab, so the provider never loses the job context.
  if (navigating) {
    return (
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", background: "#0E1A26" }}>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "14px 16px", background: "rgba(255,255,255,0.06)",
        }}>
          <div>
            <div style={{ color: "#fff", fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 15 }}>
              Navigating to {job.name.split(" ")[0]}
            </div>
            <div style={{ color: "rgba(255,255,255,0.6)", fontSize: 11.5, marginTop: 1 }}>{job.distance} away</div>
          </div>
          <button onClick={() => setNavigating(false)} style={{
            width: 34, height: 34, borderRadius: 10, border: "none", background: "rgba(255,255,255,0.12)",
            display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
          }}>
            <X size={16} color="#fff" />
          </button>
        </div>

<div style={{ flex: 1, position: "relative", background: "linear-gradient(160deg, #1B2C3F, #0E1A26)", overflow: "hidden" }}>
          <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
            {[...Array(12)].map((_, i) => (
              <line key={`h${i}`} x1={0} y1={i * 50} x2={390} y2={i * 50 + 70} stroke="rgba(255,255,255,0.08)" strokeWidth="2" />
            ))}
            {[...Array(8)].map((_, i) => (
              <line key={`v${i}`} x1={i * 50} y1={0} x2={i * 50 - 60} y2={700} stroke="rgba(255,255,255,0.08)" strokeWidth="2" />
            ))}
          </svg>
          <svg style={{ position: "absolute", inset: 0 }}>
            <line x1="32%" y1="78%" x2="64%" y2="26%" stroke={COLORS.signal} strokeWidth="4" strokeLinecap="round" />
          </svg>
          <div style={{ position: "absolute", left: "30%", top: "75%" }}>
            <Radar color={COLORS.signal} size={14} />
          </div>
          <div style={{ position: "absolute", left: "62%", top: "22%" }}>
            <div style={{ width: 16, height: 16, borderRadius: "50%", background: COLORS.ember, border: "3px solid #fff" }} />
          </div>
        </div>

<div style={{ padding: "18px 18px calc(20px + env(safe-area-inset-bottom))", background: COLORS.surface }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12, background: `${COLORS.signal}1A`,
              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
            }}>
              <Navigation size={20} color={COLORS.signal} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 16, color: COLORS.ink }}>{eta} min</div>
              <div style={{ fontSize: 11.5, color: COLORS.slate }}>Estimated arrival to {job.name}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }

return (
    <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
      {/* Customer cancellation overlay */}
      {customerCancelled && (
        <div style={{ position:"fixed", top:0, left:0, right:0, bottom:0, zIndex:9999, background:"rgba(0,0,0,0.6)", display:"flex", alignItems:"center", justifyContent:"center", padding:24 }}>
          <div style={{ background:COLORS.paper, borderRadius:20, padding:"32px 24px", textAlign:"center", maxWidth:320, width:"100%", boxShadow:"0 20px 60px rgba(0,0,0,0.3)" }}>
            <div style={{ fontSize:48, marginBottom:16 }}>❌</div>
            <div style={{ fontFamily:"Space Grotesk, sans-serif", fontWeight:800, fontSize:18, color:COLORS.ink, marginBottom:8 }}>{t("customerCancelledTitle")}</div>
            <div style={{ fontSize:13, color:COLORS.slate, lineHeight:1.6, marginBottom:20 }}>{t("customerCancelledDesc")}</div>
            <div style={{ fontSize:12, color:COLORS.slate, marginBottom:16 }}>{t("returningToHome")} ({dismissCountdown}s)</div>
            <button onClick={() => nav.reset("home")} style={{ width:"100%", padding:"14px 0", borderRadius:14, border:"none", background:COLORS.primary, color:"#fff", fontSize:15, fontWeight:700, cursor:"pointer", fontFamily:"Space Grotesk, sans-serif" }}>
              {t("backToHomeBtn")}
            </button>
          </div>
        </div>
      )}
      <TopBar title={t("activeJob")} onBack={() => nav.pop()} />

{stage === "en_route" && (
      <div style={{ height: 280, position: "relative", overflow: "hidden", background:"#e8efe8", flexShrink:0 }}>
        <div ref={provMapRef} style={{ position:"absolute", top:0, left:0, right:0, bottom:0 }} />

{/* Status overlay */}
        <div style={{
          position:"absolute", top:10, left:10, right:10, zIndex:1000,
          background:"rgba(8,12,20,0.88)", backdropFilter:"blur(10px)",
          borderRadius:13, padding:"10px 14px",
          display:"flex", alignItems:"center", gap:8,
        }}>
          <div style={{ width:8, height:8, borderRadius:"50%", background:stageMeta?.color || COLORS.signal, flexShrink:0, boxShadow:`0 0 8px ${stageMeta?.color || COLORS.signal}` }} />
          <span style={{ color:"#fff", fontSize:12, fontWeight:600, flex:1 }}>{stageMeta?.label}</span>
        </div>
      </div>
      )}

<div ref={contentRef} style={{ flex: 1, overflowY: "auto", padding: "16px 18px 110px" }}>
        {stage === "arrived" && (
          <div style={{ background: COLORS.surface, borderRadius: 16, padding: 14, marginBottom: 14, border: `1.5px solid ${COLORS.signal}` }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: COLORS.ink, marginBottom: 4 }}>
              {t("quoteYourPriceTitle")}
            </div>
            <div style={{ fontSize: 11.5, color: COLORS.slate, marginBottom: 10, lineHeight: 1.4 }}>
              {t("examineJobSetPrice")}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <input
                ref={priceInputRef}
                type="number"
                inputMode="decimal"
                value={quotedPrice}
                onChange={(e) => { setQuotedPrice(e.target.value); setPriceError(""); }}
                placeholder={t("egPrice")}
                style={{
                  flex: 1, border: `1px solid ${priceError ? COLORS.ember : COLORS.line}`, borderRadius: 12,
                  padding: "11px 13px", fontSize: 14, fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, background: COLORS.surface, color: COLORS.ink,
                }}
              />
              <span style={{ fontSize: 13, color: COLORS.slate, fontWeight: 600 }}>MAD</span>
            </div>
            {priceError && <div style={{ color: COLORS.ember, fontSize: 12, marginTop: 6 }}>{priceError}</div>}
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${COLORS.line}` }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: COLORS.ink }}>📷 {t("beforePhotos")}</div>
              <PhotoUploadPanel
                label="before"
                hint={t("documentIssueBefore")}
                photos={beforePhotos}
                inputRef={beforeInputRef}
                setter={setBeforePhotos}
                color={COLORS.amber}
              />
            </div>
          </div>
        )}

{stage === "in_progress" && (
          <div style={{ background: COLORS.surface, borderRadius: 16, padding: 14, marginBottom: 14 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: COLORS.ink }}>📷 {t("afterPhotos")}</div>
            <PhotoUploadPanel
              label="after"
              hint={t("showCompletedWork")}
              photos={afterPhotos}
              inputRef={afterInputRef}
              setter={setAfterPhotos}
              color={COLORS.signal}
            />
          </div>
        )}

<div style={{ background: COLORS.surface, borderRadius: 16, padding: 14 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14.5, color: COLORS.ink }}>{job.name}</div>
              <div style={{ fontSize: 12, color: COLORS.slate, marginTop: 1 }}>{tService(job.job, t)}</div>
            </div>
            {stage === "en_route" && (
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 17, color: COLORS.signal }}>{eta}m</div>
                <div style={{ fontSize: 10, color: COLORS.slate }}>{t("eta")}</div>
              </div>
            )}
            {stage === "in_progress" && quotedPrice && (
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 17, color: COLORS.ink }}>{quotedPrice} {getCurrency(user).code}</div>
                <div style={{ fontSize: 10, color: COLORS.slate }}>{t("quoted")}</div>
              </div>
            )}
          </div>
          {job.desc && <div style={{ fontSize: 12.5, color: COLORS.ink, opacity: 0.75, marginTop: 10, lineHeight: 1.5 }}>"{job.desc}"</div>}
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <ActionBtn icon={Phone} label={t("callBtn")} subtle onClick={() => callProvider(job.phone || "+212634711399")} />
            <ActionBtn icon={MessageCircle} label={t("whatsappBtn")} subtle onClick={() => whatsappProvider(job.phone || "+212634711399", job.name)} />
            <ActionBtn icon={Navigation} label={t("navigateBtn")} subtle onClick={() => setNavigating(true)} />
          </div>
        </div>

<div style={{ marginTop: 16, fontSize: 11.5, fontWeight: 700, color: COLORS.ink, opacity: 0.6, letterSpacing: 0.3 }}>
          {t("jobProgress")}
        </div>
        <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { key: "en_route", label: t("headingToCustomer") },
            { key: "arrived", label: t("arrivedAtLocation") },
            { key: "in_progress", label: t("jobStarted") },
          ].map((s) => {
            const order = ["en_route", "arrived", "in_progress"];
            const done = order.indexOf(stage) > order.indexOf(s.key) || stage === "completed";
            const current = stage === s.key;
            return (
              <div key={s.key} style={{ display: "flex", alignItems: "center", gap: 10, background: COLORS.surface, borderRadius: 12, padding: 12 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: "50%", flexShrink: 0,
                  background: done ? COLORS.signal : current ? `${COLORS.signal}40` : `${COLORS.ink}22`,
                  border: current ? `2px solid ${COLORS.signal}` : "none",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  {done && <Check size={12} color="#fff" />}
                </div>
                <span style={{ fontSize: 12.5, color: COLORS.ink, fontWeight: current ? 700 : 400, opacity: done ? 0.6 : 1 }}>
                  {tService(s.label, t)}
                </span>
              </div>
            );
          })}
        </div>
      </div>

<BottomActionBar>
        {stage === "en_route" && (
          <button onClick={async () => {
            const bookingId = job.bookingId || job.id;
            if (bookingId && _apiToken) {
              try {
                await fetch(`https://zyad.marha.app/bookings/${bookingId}`, {
                  method: "PUT",
                  headers: { "Content-Type": "application/json", "Authorization": `Bearer ${_apiToken}` },
                  body: JSON.stringify({ status: "arrived" })
                });
              } catch(e) {}
            }
            setStage("arrived");
          }} style={primaryBtnStyle()}>{t("iveArrived")}</button>
        )}
        {stage === "arrived" && (
          <button onClick={startJob} style={primaryBtnStyle()}>{t("confirmPriceStart")}</button>
        )}
        {stage === "in_progress" && (
          <button
            onClick={async () => {
              // Update booking to completed in database
              const bookingId = job.bookingId || job.id;
              const amount = Number(quotedPrice) || 0;
              if (bookingId && _apiToken) {
                try {
                  await fetch(`https://zyad.marha.app/bookings/${bookingId}`, {
                    method: "PUT",
                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${_apiToken}` },
                    body: JSON.stringify({ status: "completed", amount })
                  });
                } catch(e) { console.error("Complete error:", e); }
              }
              onComplete?.({
                role: "provider",
                counterpartyName: job.name,
                service: job.job,
                price: amount,
                bookingId,
              });
              setStage("completed");
            }}
            style={primaryBtnStyle()}
          >{t("finishJobCollect")}</button>
        )}
      </BottomActionBar>
    </div>
  );
}

const primaryBtnStyle = () => ({
  flex: 1, background: COLORS.primary, color: COLORS.primaryText, border: "none", borderRadius: 14,
  padding: "13px 0", fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 14, cursor: "pointer",
});

function PricingSection({ user, onUpdateUser }) {
  const { t } = useLang();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(String(user?.calloutFee ?? 80));
  const [error, setError] = useState("");

return (
    <div style={{ marginTop: 16 }}>
      <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 600, fontSize: 13.5, color: COLORS.ink, marginBottom: 8 }}>
        Your pricing
      </div>
      <div style={{ background: COLORS.surface, borderRadius: 14, padding: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: COLORS.ink }}>Minimum call-out fee</div>
            <div style={{ fontSize: 11, color: COLORS.slate, marginTop: 1 }}>Shown to customers on your profile</div>
          </div>
          {!editing && (
            <button onClick={() => { setValue(String(user?.calloutFee ?? 80)); setEditing(true); }} style={{
              background: "none", border: "none", padding: 0, fontSize: 11.5, fontWeight: 700, color: COLORS.ink, cursor: "pointer",
            }}>
              Edit
            </button>
          )}
        </div>

{editing ? (
          <div style={{ marginTop: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <input
                type="number"
                inputMode="decimal"
                value={value}
                onChange={(e) => { setValue(e.target.value); setError(""); }}
                style={{
                  flex: 1, border: `1.5px solid ${error ? COLORS.ember : COLORS.primary}`, borderRadius: 12,
                  padding: "10px 12px", fontSize: 14, fontFamily: "Space Grotesk, sans-serif", fontWeight: 700,
                  background: COLORS.surface, color: COLORS.ink, WebkitTextFillColor: COLORS.ink,
                  outline: "none",
                }}
              />
              <span style={{ fontSize: 13, color: COLORS.slate, fontWeight: 600 }}>MAD</span>
            </div>
            {error && <div style={{ color: COLORS.ember, fontSize: 11.5, marginTop: 6 }}>{error}</div>}
            <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
              <button onClick={() => setEditing(false)} style={{
                flex: 1, padding: "9px 0", borderRadius: 10,
                border: `1.5px solid ${COLORS.slate}55`,
                background: "none", color: COLORS.ink,
                fontSize: 12, fontWeight: 600, cursor: "pointer",
              }}>{t("cancel")}</button>
              <button onClick={save} style={{
                flex: 1, padding: "9px 0", borderRadius: 10, border: "none", background: COLORS.primary, color: COLORS.primaryText,
                fontSize: 12, fontWeight: 600, cursor: "pointer",
              }}>{t("save")}</button>
            </div>
          </div>
        ) : (
          <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 18, color: COLORS.ink, marginTop: 6 }}>
            {user?.calloutFee ?? 80} {getCurrency(user).code}
          </div>
        )}
      </div>
    </div>
  );
}

function MetricCard({ label, value }) {
  return (
    <div style={{ background: COLORS.surface, borderRadius: 14, padding: 12 }}>
      <div style={{ fontFamily: "Space Grotesk, sans-serif", fontWeight: 700, fontSize: 16, color: COLORS.ink }}>{value}</div>
      <div style={{ fontSize: 11, color: COLORS.slate, marginTop: 2 }}>{label}</div>
    </div>
  );
}

/* ---------------- Bottom tab bar ---------------- */
function TabBar({ nav, active, user, unreadCount, markNotifsRead }) {
  const { t } = useLang();
  const isProvider = user?.role === "provider";
  const tabs = isProvider ? [
    { id: "home", icon: LayoutGrid, label: t("homeLabel") },
    { id: "upcomingBookings", icon: Briefcase, label: t("jobs") },
    { id: "notifications", icon: Bell, label: t("alerts") },
    { id: "account", icon: User, label: t("account") },
  ] : [
    { id: "home", icon: LayoutGrid, label: t("home") },
    { id: "upcomingBookings", icon: Calendar, label: t("bookings") },
    { id: "account", icon: User, label: t("account") },
  ];
  const activeColor = isProvider ? COLORS.signal : COLORS.primary;
  return (
    <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, display: "flex", background: COLORS.surface, borderTop: `1px solid ${COLORS.line}`, padding: "10px 0 calc(10px + env(safe-area-inset-bottom))", zIndex: 40 }}>
      {tabs.map((tab) => {
        const Icon = tab.icon;
        const isActive = active === tab.id;
        return (
          <button key={tab.id} onClick={() => { if (tab.id === "notifications") { markNotifsRead?.(); } nav.reset(tab.id); }}
            style={{ flex: 1, background: "none", border: "none", display: "flex", flexDirection: "column", alignItems: "center", gap: 3, cursor: "pointer", color: isActive ? activeColor : COLORS.slate }}>
            <div style={{ position:"relative" }}>
              <Icon size={19} strokeWidth={isActive ? 2.5 : 1.8} />
              {tab.id === "notifications" && unreadCount > 0 && (
                <span style={{ position:"absolute",top:-4,right:-5,minWidth:14,height:14,borderRadius:7,background:"#DC2626",border:`1.5px solid ${COLORS.surface}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:8,fontWeight:800,color:"#fff" }}>{unreadCount > 9 ? "9+" : unreadCount}</span>
              )}
            </div>
            <span style={{ fontSize: 10.5, fontWeight: isActive ? 700 : 500 }}>{tab.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── Account Row + Section helpers ─────────────────────
function AccountRow({ icon: Icon, iconColor, label, sub, right, danger, onClick, last }) {
  return (
    <>
      <button onClick={onClick} style={{ width: "100%", display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", background: "none", border: "none", cursor: "pointer", textAlign: "start" }}>
        <div style={{ width: 34, height: 34, borderRadius: 10, flexShrink: 0, background: danger ? `${COLORS.ember}14` : `${iconColor}14`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon size={16} color={danger ? COLORS.ember : iconColor} strokeWidth={1.8} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: danger ? COLORS.ember : COLORS.ink }}>{label}</div>
          {sub && <div dir="auto" style={{ fontSize: 11, color: COLORS.slate, marginTop: 1 }}>{sub}</div>}
        </div>
        {right ? <span style={{ fontSize: 11, color: COLORS.primary, fontWeight: 700, background: `${COLORS.primary}12`, borderRadius: 8, padding: "2px 7px" }}>{right}</span> : <ChevronRight size={15} color={COLORS.slate} />}
      </button>
      {!last && <div style={{ height: 1, background: COLORS.line, marginLeft: 62 }} />}
    </>
  );
}

function AccountSection({ title, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      {title && <div style={{ fontSize: 10.5, fontWeight: 800, color: COLORS.slate, letterSpacing: 0.8, marginBottom: 6, paddingLeft: 2 }}>{title}</div>}
      <div style={{ background: COLORS.surface, borderRadius: 16, overflow: "hidden", border: `1px solid ${COLORS.line}` }}>{children}</div>
    </div>
  );
}

</script>
<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(reg) {
      console.log('[Marha] SW registered:', reg.scope);
    }).catch(function(err) {
      console.log('[Marha] SW failed:', err);
    });
  });
}
</script>
</body>
</html>