// OPT-QC-08 · Add remarks & photos
const QcRemarks = ({ t, go }) => {
  const { Btn, Banner, PhotoTile } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.remarks; // noBreach | breach | photoLimit
  const breach = state === "breach";
  const atLimit = state === "photoLimit";
  const photoCount = atLimit ? 6 : 2;

  const TA = ({ label, req, ph, value }) => (
    <div className="op-field" style={{ margin: 0 }}>
      <div className="op-label">{label} {req && <span className="req">*</span>}{req && <span className="badge badge-rejected" style={{ fontSize: 10, marginLeft: 6 }}>Required — breach present</span>}</div>
      <textarea className="op-textarea" placeholder={ph} defaultValue={value} style={{ minHeight: 72, borderColor: req ? "oklch(from var(--destructive) l c h / 0.4)" : undefined }}/>
    </div>
  );

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad" style={{ flex: 1 }}>
        {breach && <div style={{ marginBottom: 16 }}><Banner tone="danger" icon={Ic.Warning} title="Remarks are required because a breach was recorded" desc="When parameters breach the matrix, remarks become a mandatory part of the audit chain. The decision screen is blocked until the highlighted sections are filled."/></div>}

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20, alignItems: "start" }}>
          {/* Remarks column */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="op-sec" style={{ margin: 0 }}><span className="op-sec-title">Per-stage remarks</span></div>
            <div className="op-grid-2" style={{ gap: 14 }}>
              <TA label="DM stage" req={breach} ph={breach ? "Describe the low dry-matter readings…" : "Optional notes on Dry Matter"} value={breach ? "S2 read 19.2% — re-sampled from a shaded bin, second reading consistent." : ""}/>
              <TA label="FFA stage" ph="Optional notes on Free Fatty Acid"/>
            </div>
            <TA label="Overall inspection remarks" req={breach} ph="e.g. condition of load, anomalies, ambient conditions…" value={breach ? "Load partially shaded on arrival; one section appears harvested early. Recommend supervisor review before approval." : ""}/>
            <div className="op-hint" style={{ margin: 0 }}>No length cap — a soft hint appears past 500 characters. {breach ? "" : "All remarks optional with no breaches present."}</div>
          </div>

          {/* Photos column */}
          <div>
            <div className="op-sec" style={{ margin: "0 0 12px" }}><span className="op-sec-title">Evidence photos</span><span className="op-muted" style={{ fontSize: 12 }}>{photoCount} / 6</span></div>
            {atLimit && <div style={{ marginBottom: 12 }}><Banner tone="info" icon={Ic.Info} title="Maximum 6 photos" desc="Remove a photo to add another."/></div>}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {Array.from({ length: photoCount }).map((_, i) => (
                <div key={i}>
                  <PhotoTile filled label="Photo" tag={`P${i + 1}`} onTap={() => {}} aspect="4 / 3"/>
                  <input className="op-input" style={{ height: 38, fontSize: 12.5, marginTop: 6 }} placeholder="Caption (optional)" defaultValue={i === 0 ? "Bin 6 — overall condition" : i === 1 ? "Close-up, sample S2 cross-section" : ""}/>
                </div>
              ))}
              {!atLimit && <PhotoTile label="Add photo" hint="Camera or gallery" onTap={() => {}} aspect="4 / 3"/>}
            </div>
            <div className="op-muted" style={{ fontSize: 11.5, marginTop: 12, lineHeight: 1.5, display: "flex", gap: 7 }}><Ic.Info size={14} style={{ flexShrink: 0, marginTop: 1 }}/> Each photo carries a capture timestamp and the inspector ID in its metadata.</div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="ghost" onClick={() => go("dmParam")}>Cancel</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.Check} onClick={() => go("decision")}>Save remarks</Btn>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  remarks: { chrome: "flow", title: "Inspection remarks — GPN-…0041", sub: "Narrative record", back: "dmParam", render: (ctx) => <QcRemarks {...ctx}/> },
});