// Founder-only UI. The server separately enforces every authority and money calculation.
function FieldOperationsAdmin({ role }) {
  const t = controlTranslate, [status, setStatus] = React.useState(null), [error, setError] = React.useState("");
  const [username, setUsername] = React.useState(""), [usernameAgain, setUsernameAgain] = React.useState("");
  const [password, setPassword] = React.useState(""), [again, setAgain] = React.useState("");
  const [busy, setBusy] = React.useState(false), [message, setMessage] = React.useState("");
  const refresh = () => HydorAPI.get("/field/status").then(setStatus).catch(() => setError("Field features unavailable"));
  React.useEffect(() => { if (window.HydorAPI?.isAuthed()) refresh(); }, []);
  const configure = async disabled => {
    const normalizedUsername = username.trim().toLowerCase();
    if (!disabled && (normalizedUsername !== usernameAgain.trim().toLowerCase() || !/^[a-z0-9][a-z0-9._-]{2,31}$/.test(normalizedUsername))) { setError("screen_username_format"); return; }
    if (!disabled && (password !== again || password.length < 12)) { setError("screen_password_length"); return; }
    setBusy(true); setError(""); setMessage("");
    try { await HydorAPI.post("/field/screen/config", disabled ? { disabled: true } : { username: normalizedUsername, password });
      setUsername(""); setUsernameAgain(""); setPassword(""); setAgain(""); setMessage("Screen access updated; previous screen sessions ended"); await refresh();
    } catch (e) { setError(e.message); } finally { setBusy(false); }
  };
  return <section className="control-ledger" aria-label={t("Field administration")}>
    <div className="control-panel-heading"><div><span className="control-eyebrow">{t("FOUNDERS ONLY")}</span><h3>{t("Fuel settlement & office display")}</h3></div></div>
    {error && <p className="control-note" role="alert">{t(error)}</p>}{message && <p role="status">{t(message)}</p>}
    {status && !status.fuelEnabled && <p className="control-note">{t("Fuel ledger is not activated; no payment can be recorded")}</p>}
    {status?.fuelEnabled && <FieldFuelLedger />}
    {role === "owner" && <details className="control-guide"><summary>{t("Office screen password")}</summary>
      <p>{t("Independent display login only; never use an owner session on the office screen")}</p>
      <p>{t("Use this screen username and password at hydorwater.org to open the display directly. No owner login is needed on the TV.")}</p>
      <a className="btn sm" href="/operations-screen.html" target="_blank" rel="noopener noreferrer">{t("Open independent office screen")}</a>
      {!status?.screenEnabled ? <p>{t("Office display login is not activated")}</p> : <>
        <p>{t(status.screenConfigured ? "Screen username and password are configured" : "Set a screen username and password before first use")}</p>
        <form className="field-form" onSubmit={e => { e.preventDefault(); configure(false); }}>
          <label>{t("Screen username — 3 to 32 letters, digits, dot, dash or underscore")}<input className="inp" type="text" autoComplete="username" value={username} minLength={3} maxLength={32} pattern="[A-Za-z0-9][A-Za-z0-9._-]{2,31}" required onChange={e => setUsername(e.target.value)} /></label>
          <label>{t("Repeat screen username")}<input className="inp" type="text" autoComplete="off" value={usernameAgain} minLength={3} maxLength={32} required onChange={e => setUsernameAgain(e.target.value)} /></label>
          <label>{t("New screen password")}<input className="inp" type="password" autoComplete="new-password" value={password} minLength={12} maxLength={72} required onChange={e => setPassword(e.target.value)} /></label>
          <label>{t("Repeat screen password")}<input className="inp" type="password" autoComplete="new-password" value={again} required onChange={e => setAgain(e.target.value)} /></label>
          <button className="btn" disabled={busy}>{t("Save screen credentials and revoke old sessions")}</button>
        </form>
        {status.screenConfigured && <button className="btn sm" disabled={busy} onClick={() => configure(true)}>{t("Disable office screen and revoke sessions")}</button>}
      </>}
    </details>}
  </section>;
}

// Explicit human-reviewed distance, never represented as GPS or a road engine result.
function fieldFuelAdjustment(trip, draft) {
  if (!draft?.enabled) return null;
  const value = String(draft.km || "").trim();
  const metres = /^\d{1,3}(?:\.\d{1,3})?$/.test(value) ? Math.round(Number(value) * 1000) : NaN;
  return { visitId: trip.visitId, metres, reason: draft.reason || "", reference: draft.reference || "" };
}
function fieldFuelAdjustmentValid(a) {
  return !!a && Number.isInteger(a.metres) && a.metres > 0 && a.metres <= 100000 && a.reason.trim().length >= 10 && a.reference.trim().length >= 10;
}
function FieldFuelLedger() {
  const t = controlTranslate, today = HydorAttendancePolicy.ammanDate(Date.now());
  const [from, setFrom] = React.useState(new Date(Date.parse(today + "T12:00:00Z") - 6 * 86400000).toISOString().slice(0, 10));
  const [to, setTo] = React.useState(today), [employee, setEmployee] = React.useState("");
  const [ledger, setLedger] = React.useState(null), [review, setReview] = React.useState(null), [selected, setSelected] = React.useState([]);
  const [busy, setBusy] = React.useState(false), [error, setError] = React.useState(""), [message, setMessage] = React.useState("");
  const [note, setNote] = React.useState(""), [accepted, setAccepted] = React.useState(false), [paid, setPaid] = React.useState(false);
  const [drafts, setDrafts] = React.useState({}), [adjustmentsAccepted, setAdjustmentsAccepted] = React.useState(false);
  const retry = React.useRef(null), [offset, setOffset] = React.useState(0);
  const money = fils => (Number(fils || 0) / 1000).toFixed(3) + " " + t("JOD");
  const km = metres => metres == null ? t("Unknown") : (metres / 1000).toFixed(3) + " " + t("km");
  const refresh = async (page = offset) => { const d = await HydorAPI.get("/field/fuel/ledger?offset=" + page); setLedger(d); };
  React.useEffect(() => { refresh().catch(e => setError(e.message)); }, [offset]);
  const clearReview = () => { setReview(null); setSelected([]); setDrafts({}); setAdjustmentsAccepted(false); setMessage(""); setError(""); retry.current = null; };
  const calculate = async () => {
    setBusy(true); clearReview(); setAccepted(false); setPaid(false); setNote("");
    try { const d = await HydorAPI.post("/field/fuel/review", { employeeId: employee, from, to }); setReview(d); }
    catch (e) { setError(e.message); } finally { setBusy(false); }
  };
  const picked = (review?.trips || []).filter(x => selected.includes(x.visitId));
  const editable = x => review?.documentedAdjustments === true && !x.paid && !x.provisional && ["visit_end", "checkout"].includes(x.stopReason);
  const adjustment = x => editable(x) ? fieldFuelAdjustment(x, drafts[x.visitId]) : null;
  const available = x => drafts[x.visitId]?.enabled ? fieldFuelAdjustmentValid(adjustment(x)) : x.eligible;
  const selectedAdjustments = picked.map(adjustment).filter(Boolean);
  const validSelection = picked.every(available);
  const metres = picked.reduce((n, x) => n + (adjustment(x)?.metres || x.metres || 0), 0), estimated = picked.some(x => !adjustment(x) && x.status === "estimated");
  const editDraft = (x, update) => {
    setDrafts({ ...drafts, [x.visitId]: { ...drafts[x.visitId], ...update } });
    setAdjustmentsAccepted(false); setPaid(false); setSelected(selected.filter(id => id !== x.visitId));
  };
  const savePayment = async () => {
    if (!validSelection || !picked.length || !paid || (selectedAdjustments.length && !adjustmentsAccepted)) return;
    const payload = { reviewId: review.id, visitIds: selected, estimatesAccepted: accepted, confirmPaid: paid, note,
      ...(selectedAdjustments.length ? { adjustments: selectedAdjustments, adjustmentsAccepted } : {}) };
    const key = JSON.stringify(payload);
    if (!retry.current || retry.current.key !== key) retry.current = { key, id: crypto.randomUUID() };
    setBusy(true); setError("");
    try {
      // A distinct endpoint fails closed if the backend has been rolled back to an older version.
      const receipt = await HydorAPI.post(selectedAdjustments.length ? "/field/fuel/pay-reviewed" : "/field/fuel/pay", { ...payload, requestId: retry.current.id });
      setMessage(t("Payment recorded") + ": " + money(receipt.amountFils) + " · " + receipt.id);
      setReview(null); setSelected([]); setPaid(false); retry.current = null; await refresh();
    } catch (e) { setError(e.message); } finally { setBusy(false); }
  };
  return <div className="field-fuel">
    <p className="control-note">{t("0.100 JOD per approved kilometre. Separate from payroll and Company Costs; no automatic expense posting.")}</p>
    <div className="field-form">
      <label>{t("Employee")}<select className="sel" disabled={busy} value={employee} onChange={e => { setEmployee(e.target.value); clearReview(); }}><option value="">{t("Choose employee")}</option>{(ledger?.users || []).map(u => <option value={u.id} key={u.id}>{u.name}{!u.active ? " · " + t("Inactive") : ""}</option>)}</select></label>
      <label>{t("From")}<input className="inp" disabled={busy} type="date" value={from} max={to} onChange={e => { setFrom(e.target.value); clearReview(); }} /></label>
      <label>{t("To")}<input className="inp" disabled={busy} type="date" value={to} max={today} min={from} onChange={e => { setTo(e.target.value); clearReview(); }} /></label>
      <button className="btn" disabled={busy || !employee} onClick={calculate}>{t(busy ? "Processing…" : "Calculate kilometres for review")}</button>
    </div>
    <p className="hx-sub">{t("Choose up to seven days. Only visits explicitly closed or ended by check-out are eligible.")}</p>
    {error && <p className="control-note" role="alert">{t(error)}</p>}{message && <p role="status" className="control-note">{message}</p>}
    {review && <div className="field-review">
      <h4>{review.employeeName} · {review.from} → {review.to}</h4>
      <div className="field-totals"><div>{t("Unpaid distance available for review")}<b>{km(review.availableMetres)}</b></div><div>{t("Selected payment")}<b>{money(Math.round(metres / 10))}</b><small>{km(metres)} × 0.100</small></div><div>{t("Visits with unknown distance")}<b>{review.unknownTrips}</b></div></div>
      <p>{t("Select the visits you approve. Unknown or incomplete evidence is not an employee violation.")}</p>
      {!review.trips.length && <p>{t("No accepted visit starts in this period")}</p>}
      <div className="field-table-wrap"><table className="field-table"><thead><tr>{["Select", "Customer", "Visit start", "Distance", "Evidence", "Status"].map(s => <th key={s}>{t(s)}</th>)}</tr></thead><tbody>
        {review.trips.map(x => <tr key={x.visitId}><td><input type="checkbox" aria-label={t("Select") + " " + x.customer} disabled={!available(x) || busy} checked={selected.includes(x.visitId)} onChange={e => { setSelected(e.target.checked ? [...selected, x.visitId] : selected.filter(id => id !== x.visitId)); setPaid(false); }} /></td><td>{x.customer}</td><td><time>{new Date(x.startedAt).toLocaleString("en-GB", { timeZone: "Asia/Amman" })}</time></td><td>{km(x.metres)}</td><td>{t(x.status === "odometer" ? "Employee-confirmed odometer" : x.status === "estimated" ? "Estimated driving road" : x.status === "observed" ? "Recorded GPS" : "Unknown")}
          {typeof OdometerEvidence !== 'undefined' && <OdometerEvidence data={x.odometer} assessment={x.endLocation}/>}
          {editable(x) && <details><summary>{t("Review distance with evidence")}</summary>
            <label className="field-check"><input type="checkbox" aria-label={t("Use reviewed distance") + " " + x.customer} disabled={busy} checked={!!drafts[x.visitId]?.enabled} onChange={e => editDraft(x, { enabled: e.target.checked })} />{t("Use reviewed distance")}</label>
            {drafts[x.visitId]?.enabled && <div className="field-adjustment">
              <label>{t("Total approved visit km (replaces, not adds)")}<input className="inp" aria-label={t("Reviewed km") + " " + x.customer} type="text" inputMode="decimal" maxLength={7} value={drafts[x.visitId]?.km || ""} disabled={busy} onChange={e => editDraft(x, { km: e.target.value })} /></label>
              <label>{t("Reason for distance review")}<textarea className="inp" aria-label={t("Reason for distance review") + " " + x.customer} maxLength={500} value={drafts[x.visitId]?.reason || ""} disabled={busy} onChange={e => editDraft(x, { reason: e.target.value })} /></label>
              <label>{t("Evidence reference / odometer readings")}<textarea className="inp" aria-label={t("Evidence reference / odometer readings") + " " + x.customer} maxLength={500} value={drafts[x.visitId]?.reference || ""} disabled={busy} onChange={e => editDraft(x, { reference: e.target.value })} /></label>
              <small>{t("Use the vehicle odometer or agreed documented evidence. Each explanation needs at least 10 characters. Maximum 100 km per visit.")}</small>
            </div>}
          </details>}
        </td><td>{t(x.paid ? "Already paid" : available(x) ? "Ready for review" : x.provisional ? "Visit still open" : !["visit_end", "checkout"].includes(x.stopReason) ? "Missing visit closure" : "No payable distance")}</td></tr>)}
      </tbody></table></div>
      <p className="hx-sub">{t("Road estimates use the currently saved customer pin. Review it before paying. Review expires after 15 minutes.")}</p>
      {estimated && <label className="field-check"><input type="checkbox" checked={accepted} disabled={busy} onChange={e => setAccepted(e.target.checked)} />{t("I reviewed the estimated roads and current customer locations")}</label>}
      {!!selectedAdjustments.length && <label className="field-check"><input type="checkbox" aria-label={t("Confirm documented distances")} checked={adjustmentsAccepted} disabled={busy} onChange={e => setAdjustmentsAccepted(e.target.checked)} />{t("I reviewed these total distances with the employee and the evidence. They are human-reviewed, not GPS measurements.")}</label>}
      <label>{t("Payment note / reference")}<input className="inp" value={note} maxLength={500} disabled={busy} onChange={e => setNote(e.target.value)} /></label>
      <label className="field-check"><input type="checkbox" checked={paid} disabled={busy} onChange={e => setPaid(e.target.checked)} />{t("I have handed this amount to the employee; record it as paid")}</label>
      <button className="btn" disabled={busy || !picked.length || !validSelection || !paid || note.trim().length < 3 || (estimated && !accepted) || (!!selectedAdjustments.length && !adjustmentsAccepted)} onClick={savePayment}>{t("Mark selected visits paid")} · {money(Math.round(metres / 10))}</button>
    </div>}
    <details className="control-guide" open><summary>{t("Paid fuel receipts")}</summary>
      <p className="hx-sub">{t("Receipts are permanent. Paid visits cannot be paid again, even in overlapping periods.")}</p>
      {(ledger?.totals || []).map(x => <p key={x.employee_id}>{ledger.users.find(u => u.id === x.employee_id)?.name || x.employee_id}: {km(Number(x.metres))} · {money(x.amount_fils)}</p>)}
      {!(ledger?.receipts || []).length && <p>{t("No recorded fuel payments")}</p>}
      {(ledger?.receipts || []).map(r => <details key={r.id} className="field-receipt"><summary>{r.employee_name} · {money(r.amount_fils)} · {km(r.metres)} · {new Date(r.paid_at).toLocaleDateString("en-GB", { timeZone: "Asia/Amman" })}</summary><p>{r.id} · {r.paid_by_name} · {r.note}</p><p>{r.snapshot.from} → {r.snapshot.to}</p>{r.snapshot.trips.map(x => <div key={x.visitId}><p>{x.customer} · {km(x.metres)} · {t(x.status === "odometer" ? "Employee-confirmed odometer" : x.status === "reviewed" ? "Documented distance review" : x.status === "estimated" ? "Estimated driving road" : "Recorded GPS")}</p>{typeof OdometerEvidence !== 'undefined' && <OdometerEvidence data={x.odometer} assessment={x.endLocation} paid/>}{x.adjustment && <p>{t("Original distance")}: {km(x.adjustment.originalMetres)} · {x.adjustment.reason} · {x.adjustment.reference}</p>}</div>)}</details>)}
      <div className="field-form"><button className="btn sm" disabled={busy || offset === 0} onClick={() => setOffset(Math.max(0, offset - 100))}>{t("Previous")}</button><button className="btn sm" disabled={busy || !ledger?.hasMore} onClick={() => setOffset(offset + 100)}>{t("Next")}</button></div>
    </details>
  </div>;
}