// OM Group — Centralized Document Header Component (v1)
// Single source of truth for all printable document headers.
// Exports: window.DocHeader
//
// Usage:
//   <DocHeader companyId={id} docTitle="Vendor Statement" docMeta={[['Period','Jan–Mar'],['Ref','ABC123']]} />
//
// companyId: company store ID, or 'group' for OM Group master.
// docTitle:  document type label shown top-right (e.g. "Vendor Statement").
// docMeta:   array of [label, value] pairs shown below docTitle.

const OM_DOC_FULL_LOGO = 'uploads/OM GROUP FULL LOGO-61ed36bc.png';

// Inject print-safe CSS once
(function injectDocHeaderCSS() {
  if (document.getElementById('om-doc-header-css')) return;
  const style = document.createElement('style');
  style.id = 'om-doc-header-css';
  style.textContent = `
    .dh-wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 3px solid #F97316;
      padding-bottom: 18px;
      margin-bottom: 20px;
    }
    .dh-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 55%; }
    .dh-logo {
      width: 130px;
      height: auto;
      object-fit: contain;
      display: block;
      margin-bottom: 8px;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .dh-co-name { font-size: 15px; font-weight: 700; color: #111; line-height: 1.35; margin-bottom: 3px; }
    .dh-co-detail { font-size: 10.5px; color: #555; line-height: 1.6; }
    .dh-doc-info { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 4px; }
    .dh-doc-title { font-size: 17px; font-weight: 800; color: #111; margin-bottom: 8px; letter-spacing: -0.2px; }
    .dh-doc-meta-row { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; }
    .dh-doc-meta-label { color: #999; }
    .dh-doc-meta-value { font-weight: 600; color: #333; }
    @media print {
      .dh-logo { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    }
  `;
  document.head.appendChild(style);
}());

function DocHeader({ companyId, docTitle, docMeta }) {
  const co = (companyId && companyId !== 'group') ? Store.byId('companies', companyId) : null;
  const coName = co ? co.name : (companyId === 'group' ? 'OM Group' : 'OM Group');
  const meta = docMeta || [];

  return (
    <div className="dh-wrap">
      <div className="dh-brand">
        <img
          src={OM_DOC_FULL_LOGO}
          alt="OM Group"
          className="dh-logo"
          onError={function(e) { e.currentTarget.style.display = 'none'; }}
        />
        <div className="dh-co-name">{coName}</div>
        {co && co.gst     && <div className="dh-co-detail">GST: {co.gst}</div>}
        {co && co.address && <div className="dh-co-detail">{co.address}</div>}
        {co && co.phone   && <div className="dh-co-detail">Phone: {co.phone}</div>}
        {co && co.email   && <div className="dh-co-detail">Email: {co.email}</div>}
        {co && co.website && <div className="dh-co-detail">{co.website}</div>}
      </div>
      <div className="dh-doc-info">
        {docTitle && <div className="dh-doc-title">{docTitle}</div>}
        {meta.map(function(pair, i) {
          return (
            <div key={i} className="dh-doc-meta-row">
              <span className="dh-doc-meta-label">{pair[0]}:</span>
              <span className="dh-doc-meta-value">{pair[1]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.DocHeader = DocHeader;