/* ============================================================
   beedle dataroom — shared components
   ============================================================ */

// document-type badge (folder-tab styled)
function DocType({ type, size = "" }) {
  const labels = { pdf: "PDF", image: "IMG", html: "HTML", video: "VIDEO", ppt: "PPT", file: "FILE" };
  return <span className={"dtype " + type + (size ? " " + size : "")}><span className="lab">{labels[type] || "FILE"}</span></span>;
}

function TypeIcon({ type, size = 16 }) {
  const map = { pdf: "file", image: "image", html: "globe", video: "video", ppt: "layers" };
  return <Icon name={map[type] || "file"} size={size} />;
}

function SectionGlyph({ section, size = 46, radius }) {
  return (
    <span className="sec-ico" style={{ width: size, height: size, background: `linear-gradient(150deg, ${section.color}, ${shade(section.color, -16)})`, borderRadius: radius }}>
      <Icon name={section.icon} size={Math.round(size * 0.46)} sw={1.9} />
    </span>
  );
}

// key visibility pill
function KeyPill({ k, locked }) {
  const meta = KEYS[k] || { label: k, tone: "" };
  const tone = meta.tone ? "pill-" + meta.tone : "";
  return (
    <span className={"pill pill-key " + tone}>
      <Icon name={locked ? "lock" : "key"} size={11} />{meta.label}
    </span>
  );
}

function Avatar({ role, size = 34 }) {
  return (
    <span className={"avatar " + (role.avatar || "")} style={{ width: size, height: size, fontSize: size * 0.38 }}>
      {role.initials}
    </span>
  );
}

function Pill({ tone = "", icon, children }) {
  return <span className={"pill " + (tone ? "pill-" + tone : "")}>{icon && <Icon name={icon} size={12} />}{children}</span>;
}

function Toast({ toasts }) {
  return (
    <div className="toast-wrap">
      {toasts.map(t => (
        <div className="toast" key={t.id}>
          <Icon name={t.icon || "check"} size={16} className={t.good ? "g" : ""} />{t.msg}
        </div>
      ))}
    </div>
  );
}

// tiny color shade helper
function shade(hex, amt) {
  let c = hex.replace("#", "");
  if (c.length === 3) c = c.split("").map(x => x + x).join("");
  const n = parseInt(c, 16);
  let r = (n >> 16) + amt, g = ((n >> 8) & 255) + amt, b = (n & 255) + amt;
  r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// confirm dialog (small)
function Confirm({ open, title, body, danger, confirmLabel, onConfirm, onCancel }) {
  confirmLabel = confirmLabel || T("Confirm");
  if (!open) return null;
  return (
    <div className="scrim" onClick={onCancel}>
      <div className="modal" style={{ maxWidth: 420 }} onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <h2>{title}</h2>
            <p>{body}</p>
          </div>
        </div>
        <div className="modal-foot">
          <div className="spacer" />
          <button className="btn btn-ghost" onClick={onCancel}>{T("Cancel")}</button>
          <button className={"btn " + (danger ? "btn-danger" : "btn-primary")} onClick={onConfirm}>{confirmLabel}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DocType, TypeIcon, SectionGlyph, KeyPill, Avatar, Pill, Toast, Confirm, shade });