/* Assistente MAIA — chat agent (window.claude.complete) */
const { useState: chus, useEffect: chuef, useRef: churef } = React;

const SCREEN_CONTEXT = {
  riepilogo: {
    nome: "M1 — Riepilogo",
    descr: "Cruscotto sintetico con KPI (ricoveri, pazienti distinti, interventi eseguiti, età media, degenza media, peso DRG, giornate, ripetuti), bar chart per dipartimento, donut per regime di ricovero, trend mensile a 12 mesi multi-serie, heatmap dipartimento × giorno settimana, piramide F/M per fasce di età, distribuzione provenienza pazienti, elettivo vs PS/Urgenza, top 8 DRG con sparkline.",
    suggerimenti: [
      "Cosa mostra questa schermata?",
      "Come è calcolato il peso medio DRG?",
      "Posso filtrare i KPI per dipartimento?",
      "Cosa significano i quattro regimi di ricovero?"
    ]
  },
  filtri: {
    nome: "M2 — Filtri",
    descr: "Maschera di impostazione filtri: periodo temporale con preset rapidi, multi-select su dipartimento, regime, tipo intervento, genere, fasce età, provenienza pazienti, ricerca DRG, ricerca procedure ICD-9-CM, ricerca diagnosi ICD-9-CM, indicatori PNE (Programma Nazionale Esiti). Anteprima in tempo reale di pazienti, ricoveri, interventi eseguiti. Ricerche salvate ed esportazione CSV/XLSX/PDF.",
    suggerimenti: [
      "Cos'è un indicatore PNE?",
      "Come funziona la ricerca DRG?",
      "Posso salvare i filtri impostati?",
      "Differenza fra DRG, procedura e diagnosi?"
    ]
  },
  dettagli: {
    nome: "M3 — Dettagli & drill",
    descr: "Maschera di dettaglio con tabella pivot a dimensione configurabile (Dipartimento, DRG, Regime, Fascia età). KPI: pazienti, ricoveri, interventi, degenza media, peso DRG, ripetuti. Grafici ricoveri e dimissioni per giorno della settimana. Click su una riga della pivot apre un pannello laterale con la gerarchia Dipartimento → DRG → Paziente → Profilo (drill-down); breadcrumb cliccabile per il drill-up.",
    suggerimenti: [
      "Come funziona il drill-down?",
      "Posso tornare indietro nella gerarchia?",
      "Cosa sono i ricoveri ripetuti?",
      "Come cambio la dimensione della pivot?"
    ]
  },
  ia: {
    nome: "M4 — Intelligenza Artificiale",
    descr: "Strumenti di IA per individuare i fattori di influenza su quattro target: costo totale, costo dispositivi medici, giornate di degenza, margine vs DRG. Tre modelli alternativi (Gradient Boosting, Random Forest, Regressione regolarizzata) con metriche R²/MAE/RMSE. Componenti: feature importance bar chart, scatter predetto vs reale, simulatore what-if con slider (età, peso DRG, durata intervento, gg degenza, regime), segmentazione in 4 cluster automatici, rilevamento anomalie con driver principale identificato.",
    suggerimenti: [
      "Cosa significa R² 0.847?",
      "Come uso il simulatore what-if?",
      "Cosa sono i cluster identificati?",
      "Su cosa si basa il rilevamento anomalie?"
    ]
  },
  consumi: {
    nome: "M5 — Consumi DM",
    descr: "Dettaglio consumi dispositivi medici in attività chirurgica. Filtri locali per procedura, primo chirurgo, categoria DM. KPI: interventi, costo DM totale, medio, mediano, DM medi per intervento. Lista interventi cliccabile; per ciascuno dettaglio DM raggruppato per categoria (protesi, stent, suturatrici, reti, ecc.) con quantità, costo unitario, costo totale. Confronto costo DM medio fra chirurghi (primo chirurgo) sulla stessa procedura, confronto con altri interventi della stessa tipologia/dipartimento, box-plot percentili, top DM per impatto economico.",
    suggerimenti: [
      "Come confronto i chirurghi su una procedura?",
      "Cosa rappresenta il box-plot?",
      "Posso esportare il dettaglio DM?",
      "Cosa sono le 'categorie' DM?"
    ]
  }
};

function ChatAssistant({ currentScreen }) {
  const [open, setOpen] = chus(false);
  const [messages, setMessages] = chus([]);
  const [input, setInput] = chus("");
  const [loading, setLoading] = chus(false);
  const messagesEndRef = churef(null);

  const ctx = SCREEN_CONTEXT[currentScreen] || SCREEN_CONTEXT.riepilogo;

  chuef(() => {
    if (messagesEndRef.current) messagesEndRef.current.scrollTop = messagesEndRef.current.scrollHeight;
  }, [messages, loading]);

  // Welcome message on first open
  chuef(() => {
    if (open && messages.length === 0) {
      setMessages([{
        role: "assistant",
        text: "Ciao! Sono l'assistente MAIA. Sei sulla maschera **" + ctx.nome + "**. Posso spiegarti cosa vedi, come usare ogni funzionalità, o rispondere a domande sui dati clinici e sugli indicatori. Cosa vuoi sapere?"
      }]);
    }
  }, [open]);

  function buildSystemPrompt() {
    const lista = Object.values(SCREEN_CONTEXT).map(s => "- " + s.nome + ": " + s.descr).join("\n");
    return `Sei l'assistente conversazionale di MAIA, una piattaforma di Business Intelligence & Analytics clinico sviluppata da CrowdM AI per AUSL Bologna (Servizio Sanitario Regionale Emilia-Romagna). Stai parlando con un valutatore tecnico/clinico durante una demo di gara pubblica.

MAIA contiene 5 maschere principali:
${lista}

L'utente sta attualmente visualizzando: **${ctx.nome}**.

REGOLE:
- Rispondi sempre in italiano, in modo professionale ma cordiale.
- Sii conciso: 2-4 frasi nella maggior parte dei casi. Mai bullet list più lunghe di 5 voci.
- Quando spiega una funzionalità, riferisci dove si trova nella UI (es. "la trovi nel pannello a sinistra", "click sulla card 'Costo totale'").
- Per termini clinici (DRG, PNE, ICD-9-CM, peso DRG, ricovero ripetuto) dai una definizione breve e tecnicamente accurata.
- Se la domanda esula dal contesto di una BI ospedaliera, riconducila gentilmente al prodotto.
- Non inventare numeri o KPI precisi: rimanda l'utente alla schermata pertinente.
- Usa **grassetto markdown** per evidenziare termini chiave.`;
  }

  async function send(text) {
    const userText = (text || input).trim();
    if (!userText || loading) return;
    setInput("");
    const newMessages = [...messages, { role: "user", text: userText }];
    setMessages(newMessages);
    setLoading(true);

    try {
      // 1) Backend proxy (production) — POST /api/chat o endpoint configurato
      const endpoint = window.MAIA_CHAT_ENDPOINT || "/api/chat";
      const useBackend = endpoint && (location.protocol === "http:" || location.protocol === "https:");

      if (useBackend) {
        try {
          const convo = newMessages.map(m => ({ role: m.role, content: m.text }));
          const r = await fetch(endpoint, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ currentScreen, messages: convo })
          });
          if (r.ok) {
            const data = await r.json();
            if (data.text) {
              setMessages(m => [...m, { role: "assistant", text: data.text }]);
              return;
            }
          }
          if (r.status === 429) {
            setMessages(m => [...m, { role: "assistant", text: "⏱️ Troppe richieste in pochi secondi, attendi un attimo e riprova." }]);
            return;
          }
          if (r.status === 404) {
            // fallthrough to window.claude
          } else {
            const err = await r.json().catch(() => ({}));
            throw new Error(err.error || "Backend HTTP " + r.status);
          }
        } catch (_be) {
          // Fall through to window.claude or fallback
        }
      }

      // 2) Fallback: window.claude (dev environment)
      if (!window.claude || typeof window.claude.complete !== "function") {
        setMessages(m => [...m, { role: "assistant", text: "ℹ️ **Assistente non disponibile in questa modalità.**\n\nIl chatbot conversazionale richiede l'integrazione con il modello linguistico, attiva nell'ambiente di sviluppo della demo. In produzione l'assistente sarà collegato al servizio aziendale di IA generativa configurato.\n\nNel frattempo puoi esplorare le funzionalità navigando la sidebar a sinistra." }]);
        return;
      }
      const convo = newMessages.slice(0, -1).map(m => ({ role: m.role, content: m.text }));
      convo.push({ role: "user", content: userText });

      const resp = await window.claude.complete({
        messages: [
          { role: "user", content: buildSystemPrompt() },
          { role: "assistant", content: "Capito. Sono pronto ad aiutare." },
          ...convo
        ]
      });
      setMessages(m => [...m, { role: "assistant", text: resp || "Non sono riuscito a generare una risposta. Riprova fra un momento." }]);
    } catch (err) {
      setMessages(m => [...m, { role: "assistant", text: "⚠️ Si è verificato un errore: " + (err?.message || "riprova più tardi") }]);
    } finally {
      setLoading(false);
    }
  }

  function reset() {
    setMessages([]);
  }

  return (
    <>
      {/* FAB */}
      {!open && (
        <button className="chat-fab" onClick={() => setOpen(true)} aria-label="Apri assistente MAIA">
          <ChatIcon />
          <span>Chiedi a MAIA</span>
          <span className="chat-fab__pulse" />
        </button>
      )}

      {/* Panel */}
      {open && (
        <div className="chat-panel" role="dialog" aria-label="Assistente MAIA">
          <header className="chat-panel__head">
            <div className="chat-panel__avatar">
              <ChatIcon size={16} color="white" />
            </div>
            <div style={{ flex: 1 }}>
              <div className="chat-panel__title">Assistente MAIA</div>
              <div className="chat-panel__sub">
                <span className="chat-panel__live" />
                Contesto: {ctx.nome}
              </div>
            </div>
            <button className="chat-panel__icon-btn" onClick={reset} title="Nuova conversazione" aria-label="Reset">
              <Icon name="refresh" size={14} />
            </button>
            <button className="chat-panel__icon-btn" onClick={() => setOpen(false)} title="Chiudi" aria-label="Chiudi">
              <Icon name="close" size={16} />
            </button>
          </header>

          <div className="chat-panel__body" ref={messagesEndRef}>
            {messages.map((m, i) => (
              <ChatBubble key={i} role={m.role} text={m.text} />
            ))}
            {loading && (
              <ChatBubble role="assistant" text={null} loading />
            )}
          </div>

          {messages.length <= 1 && (
            <div className="chat-panel__suggestions">
              <div className="chat-panel__suggestions-label">Prova a chiedere:</div>
              <div className="chat-panel__suggestion-list">
                {ctx.suggerimenti.map(s => (
                  <button key={s} className="chat-suggestion" onClick={() => send(s)}>
                    {s}
                  </button>
                ))}
              </div>
            </div>
          )}

          <form className="chat-panel__input" onSubmit={e => { e.preventDefault(); send(); }}>
            <input
              type="text"
              className="chat-panel__textbox"
              placeholder={"Domanda su " + ctx.nome + "..."}
              value={input}
              onChange={e => setInput(e.target.value)}
              disabled={loading}
              autoFocus
            />
            <button type="submit" className="chat-panel__send" disabled={!input.trim() || loading} aria-label="Invia">
              <SendIcon />
            </button>
          </form>
          <div className="chat-panel__footer">
            <Icon name="info" size={11} color="#94A3B8" />
            <span>Risposte generate da IA · solo per supporto demo</span>
          </div>
        </div>
      )}
    </>
  );
}

function ChatBubble({ role, text, loading }) {
  return (
    <div className={"chat-bubble chat-bubble--" + role}>
      {role === "assistant" && (
        <div className="chat-bubble__avatar">
          <ChatIcon size={11} color="white" />
        </div>
      )}
      <div className="chat-bubble__content">
        {loading ? (
          <div className="chat-bubble__typing">
            <span /><span /><span />
          </div>
        ) : (
          <div dangerouslySetInnerHTML={{ __html: renderMd(text) }} />
        )}
      </div>
    </div>
  );
}

// Tiny markdown renderer (just **bold**, *italic*, line breaks, lists)
function renderMd(text) {
  if (!text) return "";
  const esc = String(text)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  return esc
    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    .replace(/(^|[\s(])\*([^*]+)\*/g, "$1<em>$2</em>")
    .replace(/`([^`]+)`/g, "<code>$1</code>")
    .replace(/\n\s*[-•]\s+(.+)/g, "<li>$1</li>")
    .replace(/(<li>.*<\/li>\s*)+/gs, m => "<ul>" + m + "</ul>")
    .replace(/\n/g, "<br>");
}

function ChatIcon({ size = 18, color = "white" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
    </svg>
  );
}

function SendIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="22" y1="2" x2="11" y2="13" />
      <polygon points="22 2 15 22 11 13 2 9 22 2" />
    </svg>
  );
}

Object.assign(window, { ChatAssistant });