// AMOMS — M9 field molecules (mobile / field team).
// GPS check-in tile · Visit summary card · Commitment capture card · Help request card.
// Built on the shared design system; exported to window for reuse.

const Ic_m9 = window.Icons;

// ── M9-01 · GPS check-in tile ───────────────────────────────────────────────
const GpsCheckinTile = ({ farm = "Mary Wairimu — Kangema", coords = "-0.7536, 37.0089", accuracy = "±6 m", time = "08:42", checkedIn = true }) => (
  <div className="m9-card">
    <div className="m9-gps-map">
      <div className="m9-gps-grid" />
      <span className="m9-gps-pin"><Ic_m9.MapPin size={22} /></span>
    </div>
    <div className="m9-pad">
      <div className="m9-row-between">
        <span className="badge badge-approved">{checkedIn ? "Checked in" : "Not checked in"}</span>
        <span className="text-label-sm muted">{time}</span>
      </div>
      <div className="text-heading-3" style={{ marginTop: 10 }}>{farm}</div>
      <div className="m9-meta-row">
        <span className="m9-meta"><Ic_m9.Crosshair size={13} />{coords}</span>
        <span className="m9-meta"><Ic_m9.MapPin size={13} />{accuracy}</span>
      </div>
    </div>
  </div>
);

// ── M9-02 · Visit summary card ──────────────────────────────────────────────
const VisitSummaryCard = ({ farmer = "Esther Njeri", id = "VIS-2026-0418", date = "12 May 2026", trees = 240, healthy = 212, notes = "Two blocks showing early anthracnose. Advised copper spray; revisit in 14 days.", status = "approved" }) => (
  <div className="m9-card">
    <div className="m9-pad">
      <div className="m9-row-between">
        <div className="row" style={{ gap: 10 }}>
          <span className="avatar avatar-avocado">{farmer.split(" ").map(w => w[0]).join("").slice(0,2)}</span>
          <div>
            <div className="text-heading-3">{farmer}</div>
            <div className="text-mono-md muted">{id}</div>
          </div>
        </div>
        <window.StatusBadge status={status} />
      </div>
      <div className="m9-stat-grid">
        <div className="m9-stat"><div className="m9-stat-v">{trees}</div><div className="m9-stat-l">Trees inspected</div></div>
        <div className="m9-stat"><div className="m9-stat-v">{healthy}</div><div className="m9-stat-l">Healthy</div></div>
        <div className="m9-stat"><div className="m9-stat-v">{Math.round((healthy/trees)*100)}%</div><div className="m9-stat-l">Health rate</div></div>
      </div>
      <div className="m9-notes">
        <div className="text-label-sm muted" style={{ marginBottom: 4 }}>Field notes</div>
        <div className="text-body-sm">{notes}</div>
      </div>
      <div className="m9-meta-row" style={{ marginTop: 12 }}>
        <span className="m9-meta"><Ic_m9.Calendar size={13} />{date}</span>
      </div>
    </div>
  </div>
);

// ── M9-03 · Commitment capture card ─────────────────────────────────────────
const CommitmentCaptureCard = ({ variety = "Hass", volume = 6200, window: win = "15–19 May", rate = 92 }) => (
  <div className="m9-card">
    <div className="m9-pad">
      <div className="row" style={{ gap: 8 }}>
        <span className="m9-ic tone-jrn"><Ic_m9.Handshake size={16} /></span>
        <div className="text-heading-3">Capture commitment</div>
      </div>
      <div className="m9-commit-vol">
        <span className="text-display-sm">{volume.toLocaleString("en-US")}</span>
        <span className="muted" style={{ fontSize: 15, fontWeight: 500 }}> kg</span>
      </div>
      <div className="m9-kv-list">
        <div className="m9-kv"><span className="muted">Variety</span><span><span className="badge badge-avocado">{variety}</span></span></div>
        <div className="m9-kv"><span className="muted">Delivery window</span><span style={{ fontWeight: 500 }}>{win}</span></div>
        <div className="m9-kv"><span className="muted">Agreed rate</span><span style={{ fontWeight: 500 }}>KSh {rate}/kg</span></div>
      </div>
      <div className="row" style={{ gap: 8, marginTop: 14 }}>
        <button className="btn btn-primary" style={{ flex: 1 }}><Ic_m9.Check size={15} />Confirm commitment</button>
        <button className="btn btn-outline btn-icon" aria-label="Edit"><Ic_m9.Edit size={15} /></button>
      </div>
    </div>
  </div>
);

// ── M9-04 · Help request card ───────────────────────────────────────────────
const HelpRequestCard = ({ topic = "Pump not priming", category = "Irrigation equipment", severity = "high", desc = "Line 2 booster pump won't hold prime after filter change. Affecting morning irrigation.", status = "open" }) => (
  <div className="m9-card">
    <div className="m9-pad">
      <div className="m9-row-between">
        <div className="row" style={{ gap: 8 }}>
          <span className="m9-ic tone-help"><Ic_m9.HelpCircle size={16} /></span>
          <div className="text-heading-3">Help request</div>
        </div>
        <window.SeverityBadge level={severity} />
      </div>
      <div className="text-body-md" style={{ fontWeight: 600, marginTop: 12 }}>{topic}</div>
      <div className="text-label-sm muted" style={{ marginTop: 2 }}>{category}</div>
      <div className="text-body-sm" style={{ marginTop: 10 }}>{desc}</div>
      <div className="row" style={{ gap: 8, marginTop: 14, justifyContent: "space-between" }}>
        <span className="m9-meta"><window.StatusBadge status={status} /></span>
        <button className="btn btn-soil btn-sm"><Ic_m9.Phone size={14} />Request help</button>
      </div>
    </div>
  </div>
);

Object.assign(window, { GpsCheckinTile, VisitSummaryCard, CommitmentCaptureCard, HelpRequestCard });