// Ariba Project Preview — Screen 05 in the updated flow.
// Triggered when a user confirms an approved request from the queue.

const { useState: useStateAP } = React;

const VENDOR_SUGGESTIONS = [
  { name: "LML Plastics",       lastQuote: "₹4,100/unit", rating: 4 },
  { name: "FurniCraft India",   lastQuote: "₹4,400/unit", rating: 5 },
  { name: "OfficeWorld Supplies", lastQuote: "₹4,800/unit", rating: 3 },
];

function StarRating({ value }) {
  return (
    <span className="star-rating">
      {[1, 2, 3, 4, 5].map((i) => (
        <span key={i} className={i <= value ? "star star-on" : "star star-off"}>★</span>
      ))}
    </span>
  );
}

function deliveryDate() {
  const d = new Date();
  d.setDate(d.getDate() + 30);
  return d.toLocaleDateString("en-IN", { day: "numeric", month: "long", year: "numeric" });
}

function formatCurrency(n) {
  return n > 0 ? "₹" + n.toLocaleString("en-IN") : "—";
}

function AribaProjectPreview({ request, onClose }) {
  const [clicked, setClickedState] = useStateAP(false);

  if (!request) return null;

  const title = `Sourcing Project — ${request.product} (${request.id})`;

  return (
    <div className="ariba-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="ariba-modal">

        <div className="ariba-modal-head">
          <div>
            <div className="eyebrow-sm">Step 05 · Ariba handoff</div>
            <div className="ariba-modal-title">{title}</div>
          </div>
          <button className="btn btn-ghost btn-icon" onClick={onClose} title="Close">
            <Icon.x size={15} />
          </button>
        </div>

        <div className="ariba-modal-body">

          <div className="ariba-card">
            <div className="ariba-card-head">
              <span className="ariba-card-label">Sourcing project details</span>
              <span className="pill pill-green"><span className="pdot"></span>Ready to stage</span>
            </div>
            <div className="kv-block" style={{ margin: 0 }}>
              <div className="kv-row"><span className="k">Request ID</span><span className="v">{request.id}</span><span></span></div>
              <div className="kv-row"><span className="k">Product</span><span className="v">{request.product}</span><span></span></div>
              <div className="kv-row"><span className="k">Specs</span><span className="v">{request.specs}</span><span></span></div>
              <div className="kv-row"><span className="k">Quantity</span><span className="v">{request.qty} units</span><span></span></div>
              <div className="kv-row"><span className="k">Unit price</span><span className="v">{formatCurrency(request.unitPrice)}</span><span></span></div>
              <div className="kv-row"><span className="k">Total value</span><span className="v">{formatCurrency(request.total)}</span><span></span></div>
              <div className="kv-row"><span className="k">Vendor</span><span className="v">{request.vendor}</span><span></span></div>
              <div className="kv-row"><span className="k">Category</span><span className="v">{request.category}</span><span></span></div>
              <div className="kv-row"><span className="k">Requested delivery</span><span className="v">{deliveryDate()}</span><span></span></div>
            </div>
          </div>

          <div className="ariba-card" style={{ marginTop: 16 }}>
            <div className="ariba-card-head">
              <span className="ariba-card-label">Top vendor suggestions</span>
              <span style={{ fontSize: 11.5, color: "var(--text-3)" }}>Based on historical quotes</span>
            </div>
            <div className="vendor-list">
              {VENDOR_SUGGESTIONS.map((v, i) => (
                <div key={i} className="vendor-row">
                  <div className="vendor-rank">{i + 1}</div>
                  <div className="vendor-info">
                    <div className="vendor-name">{v.name}</div>
                    <div className="vendor-meta">Last quote: <span className="mono">{v.lastQuote}</span></div>
                  </div>
                  <StarRating value={v.rating} />
                </div>
              ))}
            </div>
          </div>

          <div className="ariba-cta">
            {clicked ? (
              <div className="ariba-success">
                <div className="success-check">
                  <Icon.check size={18} />
                </div>
                <div className="success-text">
                  <div className="success-title">Project {request.id} is ready — confirm in Ariba to finalise</div>
                  <div className="success-note">Procura has not modified any Ariba records. This project is staged for your review.</div>
                </div>
              </div>
            ) : (
              <React.Fragment>
                <button className="btn btn-primary btn-lg" onClick={() => setClickedState(true)}>
                  Create project in Ariba
                </button>
                <div className="ariba-disclaimer">Procura never acts without your confirmation</div>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AribaProjectPreview });