// Aria editor — Modifica mirata con AI: prompt su una sezione/campo → proposta diff → accetta.
// `onGenerate(instruction)` è ASINCRONA: chiama POST /assistants/build con un target e
// restituisce { summary, changes, nextConfig }. Su fallimento rifiuta con un Error.
const { Dialog, Button, Badge, Icon, TextField, Banner } = window.AriaDesignSystem_af77ab;

function DiffRow({ change }) {
  return (
    <div style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
      <div style={{ padding: "8px 12px", fontSize: 12, fontWeight: 500, color: "var(--text-muted)", background: "var(--surface-sunken)", borderBottom: "1px solid var(--border-subtle)" }}>{change.label}</div>
      <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
          <span style={{ flex: "none", marginTop: 1, color: "var(--danger-700)" }}><Icon name="minus" size={14} /></span>
          <span style={{ fontSize: 13, color: "var(--text-muted)", textDecoration: "line-through", textDecorationColor: "var(--danger-500)" }}>{change.before || <em>vuoto</em>}</span>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
          <span style={{ flex: "none", marginTop: 1, color: "var(--success-700)" }}><Icon name="plus" size={14} /></span>
          <span style={{ fontSize: 13, color: "var(--text-strong)", background: "var(--success-100)", borderRadius: 5, padding: "1px 6px" }}>{change.after}</span>
        </div>
      </div>
    </div>
  );
}

function AiEditDialog({ open, scope, examples, onGenerate, onApply, onClose }) {
  const [instruction, setInstruction] = React.useState("");
  const [phase, setPhase] = React.useState("input"); // input | generating | review
  const [proposal, setProposal] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (open) { setInstruction(""); setPhase("input"); setProposal(null); setError(null); }
  }, [open, scope && scope.title]);

  async function generate() {
    setPhase("generating");
    setError(null);
    try {
      const p = await onGenerate(instruction); // async: POST /assistants/build con target
      setProposal(p);
      setPhase("review");
    } catch (err) {
      setError(err);
      setPhase("input");
    }
  }

  if (!open) return null;

  const footer =
    phase === "review" ? (
      <React.Fragment>
        <Button variant="ghost" iconLeft={<Icon name="refresh-cw" size={15} />} onClick={generate}>Rigenera</Button>
        <Button variant="secondary" onClick={onClose}>Annulla</Button>
        <Button iconLeft={<Icon name="check" size={16} />} onClick={() => onApply(proposal)}>Applica</Button>
      </React.Fragment>
    ) : (
      <React.Fragment>
        <Button variant="secondary" onClick={onClose}>Annulla</Button>
        <Button iconLeft={<Icon name="sparkles" size={16} />} disabled={!instruction.trim() || phase === "generating"} onClick={generate}>Genera proposta</Button>
      </React.Fragment>
    );

  return (
    <Dialog open={open} onClose={onClose} width={560}
      title={<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="sparkles" size={18} color="var(--primary-text)" />Modifica con AI</span>}
      footer={footer}>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <Badge tone="neutral">{scope ? scope.subtitle : ""}</Badge>

        {phase !== "review" && (
          <React.Fragment>
            {error && (
              <Banner tone="danger" title="Proposta non riuscita" icon="alert-circle">
                {error.message || "Errore inatteso. Riprova."}
              </Banner>
            )}
            <TextField label="Cosa vuoi modificare?" multiline rows={3}
              placeholder={scope ? scope.placeholder : "Descrivi la modifica…"}
              value={instruction} onChange={(e) => setInstruction(e.target.value)} disabled={phase === "generating"} />
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {(examples || []).map((ex, i) => (
                <button key={i} onClick={() => setInstruction(ex)} disabled={phase === "generating"} style={{
                  border: "1px solid var(--border-subtle)", background: "var(--surface-sunken)", color: "var(--text-muted)",
                  borderRadius: "var(--radius-pill)", padding: "5px 12px", fontSize: 12, cursor: "pointer", textAlign: "left", maxWidth: "100%",
                }}>{ex}</button>
              ))}
            </div>
          </React.Fragment>
        )}

        {phase === "generating" && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text-muted)", fontSize: 13, padding: "4px 0" }}>
            <Icon name="loader" size={16} color="var(--primary-text)" />
            Aria sta preparando una proposta conforme allo schema…
          </div>
        )}

        {phase === "review" && proposal && (
          <React.Fragment>
            <p style={{ fontSize: 13, color: "var(--text-muted)" }}>{proposal.summary}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {proposal.changes.length === 0
                ? <p style={{ fontSize: 13, color: "var(--text-subtle)" }}>Nessuna modifica proposta.</p>
                : proposal.changes.map((c, i) => <DiffRow key={i} change={c} />)}
            </div>
            <p style={{ fontSize: 12, color: "var(--text-subtle)" }}>Le modifiche vengono applicate solo dopo «Applica» e restano revisionabili.</p>
          </React.Fragment>
        )}
      </div>
    </Dialog>
  );
}

Object.assign(window, { AiEditDialog });