// Approval Queue

function ApprovalQueue({ ctx }) {
  const { registrations, setRegistrations, can, currentUser } = ctx;
  const pending = registrations.filter(r => r.status === "pending_approval");
  const [selectedIds, setSelectedIds] = React.useState(new Set());
  const [comment, setComment] = React.useState("");

  const toggle = (id) => {
    const next = new Set(selectedIds);
    if (next.has(id)) next.delete(id); else next.add(id);
    setSelectedIds(next);
  };

  const approve = () => {
    const ts = new Date().toISOString().slice(0,16).replace("T", " ");
    const approverName = currentUser?.name || "Manager";
    const remarkText = comment || "Approved";
    setRegistrations(registrations.map(r => {
      if (selectedIds.has(r.id))
        return { ...r, status: "active", approvedBy: approverName, approvedAt: ts, certificateIssued: true, remark: remarkText };
      return r;
    }));
    if (window.sb) {
      window.sb.from('ars_registrations')
        .update({ status: "active", approved_by: approverName, approved_at: ts, certificate_issued: true, remark: remarkText })
        .in('id', [...selectedIds])
        .then(({ error }) => { if (error) console.error('Approve error:', error); });
    }
    setSelectedIds(new Set());
    setComment("");
  };

  const reject = () => {
    const remarkText = comment || "Rejected — please revise";
    setRegistrations(registrations.map(r => {
      if (selectedIds.has(r.id))
        return { ...r, status: "draft", remark: remarkText };
      return r;
    }));
    if (window.sb) {
      window.sb.from('ars_registrations')
        .update({ status: "draft", remark: remarkText })
        .in('id', [...selectedIds])
        .then(({ error }) => { if (error) console.error('Reject error:', error); });
    }
    setSelectedIds(new Set());
    setComment("");
  };

  return (
    <div className="page">
      <div className="page__header">
        <div>
          <h1 className="page__title">Approvals</h1>
          <p className="page__sub">{pending.length} รายการรอ approve • อนุมัติเพื่อสร้าง Certificate PDF</p>
        </div>
        <div className="page__actions">
          <span className="muted small">เลือก {selectedIds.size} รายการ</span>
          {selectedIds.size > 0 && can("approve") && (
            <>
              <button className="btn" onClick={reject}>Reject</button>
              <button className="btn btn--primary" onClick={approve}><Icon name="check" size={14}/> Approve & Issue ({selectedIds.size})</button>
            </>
          )}
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16 }}>
        <div className="card">
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: 40 }}>
                  <input type="checkbox" checked={selectedIds.size === pending.length && pending.length > 0}
                         onChange={e => setSelectedIds(e.target.checked ? new Set(pending.map(r=>r.id)) : new Set())}/>
                </th>
                <th>ARS no.</th>
                <th>Customer</th>
                <th>Product</th>
                <th>Submitted by</th>
                <th>Submitted at</th>
                <th>PO</th>
                <th>Warranty</th>
              </tr>
            </thead>
            <tbody>
              {pending.length === 0 && (
                <tr><td colSpan="8" style={{ textAlign: "center", padding: 48, color: "var(--text-muted)" }}>
                  <Icon name="check" size={28} color="var(--green-600)"/>
                  <div style={{ marginTop: 8, fontWeight: 500 }}>ไม่มีรายการรอ approve</div>
                  <div className="small">ทุกคำขอได้รับการอนุมัติแล้ว 🎉</div>
                </td></tr>
              )}
              {pending.map(r => (
                <tr key={r.id} className="clickable" onClick={() => toggle(r.id)}>
                  <td><input type="checkbox" checked={selectedIds.has(r.id)} onChange={() => toggle(r.id)} onClick={e => e.stopPropagation()}/></td>
                  <td className="mono">{r.arsNo || r.id}</td>
                  <td>
                    <div style={{ fontWeight: 500 }}>{r.customer.company}</div>
                    <div className="muted small">{r.customer.province}</div>
                  </td>
                  <td>
                    <div className="small" style={{ fontWeight: 500 }}>{r.product.model}</div>
                    <div className="muted small mono">{r.product.serial}</div>
                  </td>
                  <td>{r.createdBy}</td>
                  <td className="small">{r.submittedAt || "—"}</td>
                  <td className="mono small">{r.poNo}</td>
                  <td className="mono small">{r.warranty.package} • {r.warranty.years}Y</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card">
            <div className="card__header"><h3 className="card__title">Bulk action</h3></div>
            <div className="card__body">
              {selectedIds.size === 0 ? (
                <div className="muted small">เลือกอย่างน้อย 1 รายการเพื่อ approve หรือ reject</div>
              ) : (
                <>
                  <div className="field">
                    <label>Comment (optional)</label>
                    <textarea className="input" rows="3" placeholder="เช่น ตรวจสอบ PO ครบถ้วน อนุมัติออก Certificate" value={comment} onChange={e => setComment(e.target.value)}></textarea>
                  </div>
                  <button className="btn btn--primary btn--block" style={{ marginTop: 10 }} onClick={approve}>
                    <Icon name="check" size={14}/> Approve & Issue Certificate
                  </button>
                  <button className="btn btn--block" style={{ marginTop: 6 }} onClick={reject}>
                    <Icon name="x" size={14}/> Reject
                  </button>
                </>
              )}
            </div>
          </div>

          <div className="card">
            <div className="card__header"><h3 className="card__title">Approval checklist</h3></div>
            <div className="card__body">
              <ul style={{ padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
                <li style={{ display: "flex", gap: 8 }}><Icon name="check" size={14} color="var(--green-600)"/><span>PO เลขที่ถูกต้องตรงกับ ERP</span></li>
                <li style={{ display: "flex", gap: 8 }}><Icon name="check" size={14} color="var(--green-600)"/><span>Serial number ตรงกับสินค้าที่ส่งมอบ</span></li>
                <li style={{ display: "flex", gap: 8 }}><Icon name="check" size={14} color="var(--green-600)"/><span>Warranty package ตรงตามที่ตกลง</span></li>
                <li style={{ display: "flex", gap: 8 }}><Icon name="check" size={14} color="var(--green-600)"/><span>ข้อมูลลูกค้าครบถ้วน</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ApprovalQueue = ApprovalQueue;