// Screen 1 — Elenco assistenti (filtrato per dominio).
// Dati reali: GET /assistants?domain=<dominio> via window.AriaData.getAssistants.
// Il toggle "Abilitato" è stato di riga → POST /assistants/{thread}/enabled.
const { Card, Table, Badge, Switch, IconButton, Button, Icon, Avatar, TextField, Banner } = window.AriaDesignSystem_af77ab;

function AssistantsList({ domain, onOpen, onCreate, onDelete }) {
  const [rowsAll, setRowsAll] = React.useState(null); // null = caricamento; [] = vuoto
  const [error, setError] = React.useState(null);
  const [query, setQuery] = React.useState("");
  const [enabled, setEnabled] = React.useState({}); // thread -> bool (stato locale del toggle)
  const [toggling, setToggling] = React.useState({}); // thread -> true mentre la POST è in volo

  // Carica gli assistenti del dominio attivo. Si ri-esegue al cambio dominio.
  const load = React.useCallback(() => {
    let alive = true;
    setRowsAll(null);
    setError(null);
    window.AriaData.getAssistants(domain).then(
      (list) => {
        if (!alive) return;
        setRowsAll(list);
        setEnabled(Object.fromEntries(list.map((a) => [a.thread, a.enabled])));
      },
      (err) => { if (alive) setError(err); }
    );
    return () => { alive = false; };
  }, [domain]);

  React.useEffect(() => load(), [load]);

  async function toggleEnabled(a, next) {
    // Optimistic: aggiorna subito, fai rollback se la POST fallisce.
    setEnabled((s) => ({ ...s, [a.thread]: next }));
    setToggling((s) => ({ ...s, [a.thread]: true }));
    try {
      const res = await window.AriaData.setEnabled(a.thread, next);
      if (!res.ok) {
        setEnabled((s) => ({ ...s, [a.thread]: !next }));
        window.AriaToast && window.AriaToast({ tone: "danger", title: "Stato non aggiornato", body: res.kind === "not_found" ? "Assistente non trovato." : "Riprova." });
      }
    } catch (_e) {
      setEnabled((s) => ({ ...s, [a.thread]: !next }));
      window.AriaToast && window.AriaToast({ tone: "danger", title: "Stato non aggiornato", body: "Errore di rete. Riprova." });
    } finally {
      setToggling((s) => { const n = { ...s }; delete n[a.thread]; return n; });
    }
  }

  const rows = (rowsAll || []).filter((a) => a.name.toLowerCase().includes(query.toLowerCase()));

  return (
    <div style={{ padding: 28, maxWidth: 1180, width: "100%", margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <div style={{ width: 280 }}>
          <TextField placeholder="Cerca assistente…" value={query} onChange={(e) => setQuery(e.target.value)} />
        </div>
        {/* Creazione sempre disponibile (non dipende dall'esistenza di assistenti). */}
        <div style={{ marginLeft: "auto", display: "flex", gap: 10 }}>
          <Button variant="secondary" iconLeft={<Icon name="plus" />} onClick={() => onOpen(null)}>Nuovo</Button>
          <Button iconLeft={<Icon name="sparkles" />} onClick={onCreate}>Crea con AI</Button>
        </div>
      </div>

      {error ? (
        <Banner tone="danger" title="Impossibile caricare gli assistenti" icon="alert-circle">
          <span>{error.message || "Errore inatteso."} </span>
          <Button variant="ghost" size="sm" iconLeft={<Icon name="refresh-cw" size={15} />} onClick={load}>Riprova</Button>
        </Banner>
      ) : (
        <Card flat>
          {rowsAll == null ? (
            // Stato di caricamento.
            <div style={{ padding: "48px 24px", textAlign: "center", color: "var(--text-muted)", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
              <Icon name="loader" size={24} color="var(--text-subtle)" />
              <span style={{ fontSize: 13 }}>Caricamento assistenti…</span>
            </div>
          ) : (
            <Table>
              <thead>
                <tr>
                  <th>Nome</th>
                  <th>Stato</th>
                  <th>Versione</th>
                  <th>Ultima modifica</th>
                  <th>Azioni</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((a) => (
                  <tr key={a.thread} data-clickable onClick={() => onOpen(a)}>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <Avatar name={a.name} tone="bot" size="sm" />
                        <span className="aria-table__primary">{a.name}</span>
                      </div>
                    </td>
                    <td onClick={(e) => e.stopPropagation()}>
                      <Switch
                        checked={!!enabled[a.thread]}
                        disabled={!!toggling[a.thread]}
                        onChange={(e) => toggleEnabled(a, e.target.checked)}
                        label={enabled[a.thread] ? "Abilitato" : "Disabilitato"}
                      />
                    </td>
                    <td className="aria-table__muted">v{a.version}</td>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <Avatar name={a.updatedBy} tone="sky" size="sm" />
                        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
                          <span style={{ fontSize: 13, color: "var(--text-body)" }}>{a.updatedBy}</span>
                          <span style={{ fontSize: 11, color: "var(--text-subtle)" }}>{a.updatedAt}</span>
                        </span>
                      </div>
                    </td>
                    <td onClick={(e) => e.stopPropagation()}>
                      <div style={{ display: "inline-flex", gap: 4 }}>
                        <IconButton label="Apri" size="sm" onClick={() => onOpen(a)}><Icon name="pencil" size={16} /></IconButton>
                        <IconButton label="Elimina" size="sm" onClick={() => onDelete(a)}><Icon name="trash-2" size={16} /></IconButton>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
          {rowsAll != null && rows.length === 0 && (
            // Empty state: anche con zero assistenti il dominio è "abitabile".
            // CTA primaria (Crea con AI) + secondaria (Nuovo) → entrambe aprono il flusso
            // di creazione per QUESTO dominio, senza dipendere da assistenti preesistenti.
            <div style={{ padding: "48px 24px", textAlign: "center", color: "var(--text-muted)" }}>
              <Icon name="bot" size={28} color="var(--text-subtle)" />
              <p style={{ marginTop: 10, fontSize: 14 }}>
                {query ? `Nessun assistente corrisponde a «${query}».` : `Nessun assistente per «${domain}».`}
              </p>
              {!query && <p style={{ marginTop: 2, fontSize: 13, color: "var(--text-subtle)" }}>Crea il primo assistente per iniziare.</p>}
              {!query && (
                <div style={{ marginTop: 16, display: "inline-flex", gap: 10 }}>
                  <Button variant="secondary" iconLeft={<Icon name="plus" />} onClick={() => onOpen(null)}>Crea assistente</Button>
                  <Button iconLeft={<Icon name="sparkles" />} onClick={onCreate}>Crea con AI</Button>
                </div>
              )}
            </div>
          )}
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { AssistantsList });