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-field", `
  .at-field{display:flex;flex-direction:column;gap:var(--space-2xs);font-family:var(--font-sans)}
  .at-field>label{font-size:11px;line-height:15px;font-weight:500;color:var(--fg-3);letter-spacing:var(--tracking-caps)}
  .at-field__required{color:var(--at-flush-700);font-weight:700}
  .at-field__ctrl{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--at-white);
    padding:6px 9px;min-height:30px;display:flex;align-items:center;gap:6px;color:var(--fg-2);
    font-size:13px;line-height:18px;transition:border-color .1s,box-shadow .1s,background .1s}
  .at-field__ctrl:focus-within{border-color:var(--at-flush-600);box-shadow:var(--ring-accent)}
  .at-field__ctrl input,.at-field__ctrl select,.at-field__ctrl textarea{border:0;outline:0;background:transparent;flex:1;
    min-width:0;font:inherit;color:var(--fg-2)}
  .at-field__ctrl textarea{resize:vertical}
  .at-field__hint{font-size:11px;line-height:15px;color:var(--fg-4)}
  .at-field.is-error .at-field__ctrl{border-color:var(--at-flush-700)}
  .at-field.is-error .at-field__hint{color:var(--at-flush-700);font-weight:500}
  .at-field.is-disabled{opacity:.5}
  .at-field.is-disabled .at-field__ctrl{cursor:not-allowed;background:var(--bg-tint)}
  .at-field.is-disabled .at-field__ctrl input,.at-field.is-disabled .at-field__ctrl select,.at-field.is-disabled .at-field__ctrl textarea{cursor:not-allowed}
`);

/**
 * Field wraps a drawer form label, control, and hint/error text.
 */
export function Field({ label, required = false, hint, error, disabled = false, children }) {
  const cls = ["at-field", error ? "is-error" : "", disabled ? "is-disabled" : ""].filter(Boolean).join(" ");
  return (
    <div className={cls}>
      <label>
        {label}
        {required && <span className="at-field__required"> *</span>}
      </label>
      <div className="at-field__ctrl" aria-invalid={error ? "true" : undefined}>
        {children}
      </div>
      {(error || hint) && <span className="at-field__hint">{error || hint}</span>}
    </div>
  );
}