import React from "react";
import { Avatar } from "../core/Avatar";

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-table", `
  .at-table{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-family:var(--font-sans)}
  .at-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;font-variant-numeric:tabular-nums}
  .at-table thead th{text-align:left;font-weight:500;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--fg-4);padding:8px 12px;border-bottom:1px solid var(--border-subtle);background:var(--at-plum-100)}
  .at-table tbody td{padding:8px 12px;border-bottom:1px solid var(--border-subtle);color:var(--fg-1)}
  .at-table tbody tr:last-child td{border-bottom:0}
  .at-table tbody tr:hover td{background:var(--at-plum-100)}
  .at-table__num{text-align:right}
  .at-table__person{display:flex;align-items:center;gap:8px}
  .at-table__pname{font-weight:500;color:var(--fg-1)}
  .at-table__prole{color:var(--fg-3);font-size:11px}
`);

/**
 * Person cell for a Table — avatar plus name and role. Composes Avatar.
 */
export function PersonCell({ name, role, kind = "employee" }) {
  return (
    <span className="at-table__person">
      <Avatar name={name} kind={kind} size="sm" />
      <span><span className="at-table__pname">{name}</span> <span className="at-table__prole">{role}</span></span>
    </span>
  );
}

/**
 * The dense ledger table shell: uppercase column labels, hairline rows, tabular
 * figures, and right-aligned numeric columns. People, events, reporting, and cost
 * tables in ui_kits/app are instances of this chrome bound to their rows.
 */
export function Table({ columns = [], rows = [] }) {
  return (
    <div className="at-table">
      <table>
        <thead>
          <tr>
            {columns.map((col, ci) => (
              <th key={ci} className={col.align === "right" ? "at-table__num" : undefined}>{col.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri}>
              {row.map((cell, ci) => (
                <td key={ci} className={columns[ci] && columns[ci].align === "right" ? "at-table__num" : undefined}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}