import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-matrix", `
  .at-matrix{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-family:var(--font-sans)}
  .at-matrix table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
  .at-matrix th,.at-matrix td{border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
  .at-matrix th:last-child,.at-matrix td:last-child{border-right:0}
  .at-matrix tr:last-child td{border-bottom:0}
  .at-matrix__col-h{background:var(--at-plum-100);padding:10px 12px;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--border-line)}
  .at-matrix__col-name{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--fg-1);display:block;margin-bottom:2px}
  .at-matrix__col-count{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
  .at-matrix__row-h{background:var(--at-plum-100);padding:14px 16px;text-align:left;font-size:12px;color:var(--fg-1);font-weight:500;white-space:nowrap;border-right:1px solid var(--border-line);min-width:160px}
  .at-matrix__row-team{display:flex;align-items:center;gap:8px}
  .at-matrix__bullet{width:8px;height:8px;border-radius:2px;background:var(--at-flush-600)}
  .at-matrix__row-meta{color:var(--fg-3);font-size:11px;font-weight:400;margin-top:2px}
  .at-matrix__cell{padding:16px 18px;min-width:84px}
  .at-matrix__num{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:20px;color:var(--fg-1)}
  .at-matrix__cell--empty .at-matrix__num{color:var(--at-plum-400)}
  .at-matrix__split{height:4px;border-radius:2px;background:var(--at-plum-100);margin-top:8px;display:flex;overflow:hidden}
  .at-matrix__seg-emp{background:var(--at-plum-900)}
  .at-matrix__seg-con{background:var(--at-flush-600)}
  .at-matrix__cell-meta{font-size:10px;color:var(--fg-4);margin-top:6px}
`);

/**
 * The matrix grid layout shell: a column header row, row headers, and cells with
 * a serif count, an optional employee/contractor split bar, and optional meta.
 * It is layout chrome — the applied function x work-group matrix in ui_kits/app
 * is an instance bound to the ledger.
 */
export function Matrix({ columns = [], rows = [] }) {
  return (
    <div className="at-matrix">
      <table>
        <thead>
          <tr>
            <th className="at-matrix__col-h" />
            {columns.map((col, ci) => (
              <th key={ci} className="at-matrix__col-h">
                <span className="at-matrix__col-name">{col.name}</span>
                {col.meta && <span className="at-matrix__col-count">{col.meta}</span>}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri}>
              <td className="at-matrix__row-h">
                <span className="at-matrix__row-team"><span className="at-matrix__bullet" />{row.header.name}</span>
                {row.header.meta && <div className="at-matrix__row-meta">{row.header.meta}</div>}
              </td>
              {row.cells.map((cell, ci) => (
                cell ? (
                  <td key={ci} className="at-matrix__cell">
                    <div className="at-matrix__num">{cell.count}</div>
                    {cell.split && (
                      <div className="at-matrix__split">
                        {cell.split.employee != null && <span className="at-matrix__seg-emp" style={{ width: cell.split.employee + "%" }} />}
                        {cell.split.contractor != null && <span className="at-matrix__seg-con" style={{ width: cell.split.contractor + "%" }} />}
                      </div>
                    )}
                    {cell.meta && <div className="at-matrix__cell-meta">{cell.meta}</div>}
                  </td>
                ) : (
                  <td key={ci} className="at-matrix__cell at-matrix__cell--empty"><div className="at-matrix__num">&mdash;</div></td>
                )
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}