Aprobación de acciones del asistente

"use client";

import { useState, useEffect, useRef, type CSSProperties } from "react";

/** Aprobación de acciones del asistente. React + TypeScript, sin dependencias. Personaliza con variables --gczh-*. */
export type AiAprobacionProps = {
  title?: string;
  description?: string;
  details?: { label: string; value: string }[];
  onDecision?: (approved: boolean) => Promise<void> | void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gczh-root { box-sizing: border-box; min-width: 0; max-width: 100%; color: var(--gczh-fg, #202421); font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gczh-root *, .gczh-root *::before, .gczh-root *::after { box-sizing: border-box; }
.gczh-root button, .gczh-root input, .gczh-root textarea, .gczh-root select { font: inherit; }
.gczh-root button, .gczh-root a { -webkit-tap-highlight-color: transparent; }
.gczh-root :focus-visible { outline: 2px solid var(--gczh-accent, #25724b); outline-offset: 4px; }
.gczh-root ::selection { background: var(--gczh-accent, #25724b); color: #fff; }
.gczh-root button:disabled { opacity: .5; cursor: not-allowed; }
.gczh-root svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .gczh-root *, .gczh-root *::before, .gczh-root *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.gczh-root { width:480px; padding:24px; border:1px solid #c7d2ce; border-radius:12px; background:var(--gczh-bg,#fff); }
.gczh-heading { display:flex; align-items:center; gap:12px; color:#325342; }
.gczh-heading h3 { font-size:18px; font-weight:600; margin:0; }
.gczh-root>p { color:#5a695f; font-size:13px; margin:14px 0 20px; }
.gczh-root dl { margin:0 0 24px; }
.gczh-root dl>div { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:11px 0; border-bottom:1px solid #e3e7e1; font-size:12px; }
.gczh-root dt { color:#5a695f; flex-shrink:0; }
.gczh-root dd { color:#293f30; text-align:right; margin:0; overflow-wrap:anywhere; }
.gczh-actions { display:flex; gap:10px; }
.gczh-actions button,.gczh-reset { border:1px solid #bccabd; border-radius:6px; min-height:44px; padding:10px 20px; cursor:pointer; background:#fff; color:#35563f; font-size:13px!important; }
.gczh-actions button:last-child { background:var(--gczh-accent,#345c42); color:#fff; border-color:transparent; }
.gczh-actions button:hover:not(:disabled) { filter:brightness(.95); }
.gczh-root .gczh-status { font-size:11px; margin:18px 0 0; }`;

export function AiAprobacion({
  title = "Revisar antes de continuar",
  description = "El asistente propone preparar una exportación. Revisa el alcance y decide.",
  details = [
    { label: "Acción", value: "Preparar un archivo CSV" },
    { label: "Contenido", value: "Datos de muestra seleccionados" },
    { label: "Destino", value: "Descarga local" },
  ],
  onDecision,
  className = "",
  style,
}: AiAprobacionProps) {
  const [state, setState] = useState<
    "pending" | "busy" | "approved" | "rejected" | "error"
  >("pending");
  const mounted = useRef(false);
  const busy = useRef(false);
  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);
  async function decide(approved: boolean) {
    if (busy.current) return;
    busy.current = true;
    setState("busy");
    try {
      await onDecision?.(approved);
      if (mounted.current) setState(approved ? "approved" : "rejected");
    } catch {
      if (mounted.current) setState("error");
    } finally {
      busy.current = false;
    }
  }
  return (
    <section className={`gczh-root ${className}`} style={style}>
      <style>{CSS}</style>
      <div className="gczh-heading">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6Z" />
          <path d="m8 12 3 3 5-6" />
        </svg>
        <h3>{title}</h3>
      </div>
      <p>{description}</p>
      <dl>
        {details.map((detail, i) => (
          <div key={i}>
            <dt>{detail.label}</dt>
            <dd>{detail.value}</dd>
          </div>
        ))}
      </dl>
      {state === "approved" || state === "rejected" ? (
        <button
          type="button"
          className="gczh-reset"
          onClick={() => setState("pending")}
        >
          Revisar de nuevo
        </button>
      ) : (
        <div className="gczh-actions">
          <button
            type="button"
            disabled={state === "busy"}
            onClick={() => decide(false)}
          >
            Rechazar
          </button>
          <button
            type="button"
            disabled={state === "busy"}
            onClick={() => decide(true)}
          >
            {state === "busy" ? "Procesando…" : "Aprobar acción"}
          </button>
        </div>
      )}
      <p className="gczh-status" role="status">
        {state === "approved"
          ? onDecision
            ? "Acción aprobada."
            : "Aprobación de muestra registrada. No se ejecutó ninguna acción."
          : state === "rejected"
            ? "Acción rechazada."
            : state === "error"
              ? "No se pudo registrar la decisión. Inténtalo de nuevo."
              : "Solo continúa después de tu elección."}
      </p>
    </section>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/ai-aprobacion

import { AiAprobacion } from "./ai-aprobacion";

export default function Ejemplo() {
  return <AiAprobacion title="Ejemplo" />;
}