const { Checkbox } = window.ACRFlowDesignSystem_ba1e9c;

const DIAS_SEMANA = [
  { n: 1, curto: "Seg", nome: "Segunda" },
  { n: 2, curto: "Ter", nome: "Terça" },
  { n: 3, curto: "Qua", nome: "Quarta" },
  { n: 4, curto: "Qui", nome: "Quinta" },
  { n: 5, curto: "Sex", nome: "Sexta" },
  { n: 6, curto: "Sáb", nome: "Sábado" },
  { n: 0, curto: "Dom", nome: "Domingo" },
];
const DIAS_UTEIS = [1, 2, 3, 4, 5];

/** Seletor de dias da semana. Fim de semana fica visualmente separado:
 *  não há expediente aos domingos e o sábado é exceção, não rotina. */
function SeletorDias({ valor = [], onChange, disabled }) {
  const marcado = (n) => valor.includes(n);
  const alternar = (n) => onChange(marcado(n) ? valor.filter((v) => v !== n) : [...valor, n].sort((a, b) => (a || 7) - (b || 7)));
  const atalho = (dias) => onChange(dias);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <span style={{ font: "var(--type-label)", color: "var(--text-body)" }}>Dias da semana</span>
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap", alignItems: "center" }}>
        {DIAS_SEMANA.map((d) => {
          const fds = d.n === 0 || d.n === 6;
          const on = marcado(d.n);
          return (
            <React.Fragment key={d.n}>
              {d.n === 6 ? <span style={{ width: 1, alignSelf: "stretch", background: "var(--border-subtle)", margin: "0 6px" }} /> : null}
              <label title={d.nome + (fds ? " — fora do expediente" : "")}
                style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 10px 6px 8px", borderRadius: "var(--radius-control, 8px)",
                  cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1,
                  background: on ? (fds ? "var(--accent-warning-soft, #fef3c7)" : "var(--accent-primary-soft, var(--surface-raised))") : "transparent",
                  border: "1px solid " + (on ? (fds ? "var(--accent-warning, #b45309)" : "var(--accent-primary)") : "var(--border-subtle)") }}>
                <Checkbox checked={on} disabled={disabled} onChange={() => alternar(d.n)} />
                <span style={{ font: "var(--type-body)", fontSize: "var(--text-xs)", color: fds && !on ? "var(--text-muted)" : "var(--text-strong)" }}>{d.curto}</span>
              </label>
            </React.Fragment>
          );
        })}
      </div>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <button type="button" disabled={disabled} onClick={() => atalho(DIAS_UTEIS)}
          style={{ background: "none", border: "none", padding: 0, cursor: "pointer", font: "var(--type-caption)", color: "var(--accent-primary)", textDecoration: "underline" }}>
          Somente dias úteis
        </button>
        <span style={{ color: "var(--border-strong)" }}>·</span>
        <button type="button" disabled={disabled} onClick={() => atalho([])}
          style={{ background: "none", border: "none", padding: 0, cursor: "pointer", font: "var(--type-caption)", color: "var(--text-muted)", textDecoration: "underline" }}>
          Limpar
        </button>
        {valor.some((n) => n === 0 || n === 6) ? (
          <span style={{ font: "var(--type-caption)", color: "var(--accent-warning, #b45309)" }}>
            Inclui fim de semana — confirme se há expediente.
          </span>
        ) : null}
      </div>
    </div>
  );
}

/** Texto curto da recorrência, usado em etiquetas e resumos. */
function resumoRecorrencia(rec) {
  if (!rec || !rec.type || rec.type === "none") return "";
  const rot = { daily: "Diária", weekly: "Semanal", monthly: "Mensal", yearly: "Anual", custom: "Personalizada" };
  const dias = Array.isArray(rec.days) ? rec.days : [];
  let base = rot[rec.type] || "Recorrente";
  if (dias.length) {
    const uteis = dias.length === 5 && DIAS_UTEIS.every((n) => dias.includes(n));
    base += " · " + (uteis ? "dias úteis" : dias.map((n) => (DIAS_SEMANA.find((d) => d.n === n) || {}).curto).filter(Boolean).join(", "));
  } else if (rec.skipWeekend) base += " · dias úteis";
  return base + " · " + (rec.time || "08:00");
}

Object.assign(window, { SeletorDias, DIAS_SEMANA, DIAS_UTEIS, resumoRecorrencia });