/* ============================================================
   FLOATING CHAT — assistant d'aide visiteur
   Explique ce qu'est Urbanis.me et comment l'app fonctionne.
   Overlay en bas à droite, ouvert via le FAB.
   ============================================================ */

const SUGGESTIONS = [
  "C'est quoi Urbanis.me ?",
  "Comment ça marche ?",
  "Quel est le coût pour une mairie ?"
];

const SEEDED_MESSAGES = [
  {
    role: "assistant",
    text: "Bonjour, je suis l'assistant du site Urbanis.me.\n\nJe peux vous expliquer comment fonctionne l'application, à qui elle s'adresse et comment elle aide les habitants à s'y retrouver dans les règles d'urbanisme de leur commune.\n\nQue souhaitez-vous savoir ?",
  }
];

function HeroChat() {
  const [messages, setMessages] = React.useState(SEEDED_MESSAGES);
  const [input, setInput] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [messages, loading]);

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

    try {
      const systemPrompt = `Tu es l'assistant du site vitrine Urbanis.me. Tu aides les VISITEURS du site (élus, DGS, agents d'urbanisme, curieux) à comprendre ce qu'est Urbanis.me et comment l'application fonctionne.

CE QU'EST URBANIS.ME :
- Un assistant urbanisme numérique pour les mairies et collectivités
- Il aide les habitants à comprendre les règles d'urbanisme applicables à leur parcelle
- Il identifie la parcelle, la zone PLU, et oriente vers la bonne démarche (DP, PC, CU…)
- Il intègre un disclaimer juridique sur chaque réponse
- Il est intégrable en API, marque blanche ou SaaS sur le site de la mairie

COMMENT ÇA MARCHE :
1. L'habitant entre son adresse
2. L'app identifie la parcelle cadastrale et la zone PLU
3. L'habitant décrit son projet (extension, clôture, piscine…)
4. L'app oriente vers la bonne démarche et les règles applicables

POUR QUI :
- Communes, communautés de communes
- Services urbanisme qui veulent réduire les questions répétitives à l'accueil
- Élus qui veulent moderniser le service public numérique

DÉMO LIVE :
- Une démo est disponible avec la ville de Léognan : app.urbanis.me/leognan
- On peut aussi organiser une démonstration personnalisée avec le PLU de la collectivité

CONTRAINTES DE FORMAT :
- Sois bref : 4 à 7 lignes maximum
- N'utilise jamais d'emoji
- Vouvoiement, ton professionnel et accueillant
- Si la question sort du sujet Urbanis.me, redirige poliment
- Ne fais jamais de réponse d'urbanisme (tu n'es pas l'app, tu es l'assistant du site vitrine)

STYLE (écris comme une personne, pas comme un chatbot) :
- Jamais de tiret cadratin ni demi-cadratin : une virgule, un deux-points ou une parenthèse suffisent
- Pas de gras décoratif, pas de listes dont chaque item commence par un intitulé en gras
- Pas de vocabulaire commercial : « solution innovante », « au cœur de », « incontournable », « clé », « crucial », « riche », « puissant »
- Pas de « ce n'est pas seulement X, c'est Y » ni de « non seulement... mais aussi »
- Ne force pas les énumérations à trois éléments
- Préfère la voix active et les verbes simples (« est », « a ») aux périphrases (« constitue », « se positionne comme »)
- Ne termine pas par une formule d'encouragement générique : arrête-toi sur la dernière information utile
- Si tu ne sais pas, dis-le. N'invente jamais un chiffre, un délai, un tarif ni une référence`;

      const userTurns = next
        .filter(m => m.role === "user" || m.role === "assistant")
        .map(m => ({ role: m.role, content: m.text }));

      const apiResp = await fetch("/api/chat", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          system: systemPrompt,
          messages: userTurns
        })
      });

      if (!apiResp.ok) {
        const errPayload = await apiResp.json().catch(() => ({}));
        throw new Error(errPayload.error || `HTTP ${apiResp.status}`);
      }

      const { text: response } = await apiResp.json();

      setMessages(curr => [
        ...curr,
        { role: "assistant", text: response }
      ]);
    } catch (err) {
      setMessages(curr => [
        ...curr,
        {
          role: "assistant",
          text: "Le service est momentanément indisponible. Vous pouvez nous écrire à contact@urbanis.me."
        }
      ]);
    } finally {
      setLoading(false);
    }
  }

  function renderText(t) {
    const lines = t.split("\n");
    return lines.map((line, i) => {
      if (line.trim().startsWith("•")) {
        return (
          <div key={i} style={{ paddingLeft: "10px", display: "flex", gap: "8px" }}>
            <span style={{ color: "var(--ink-3)" }}>•</span>
            <span>{renderInline(line.replace(/^•\s*/, ""))}</span>
          </div>
        );
      }
      if (line.trim() === "") {
        return <div key={i} style={{ height: "6px" }} />;
      }
      return <div key={i}>{renderInline(line)}</div>;
    });
  }

  function renderInline(line) {
    const parts = line.split(/(\*\*[^*]+\*\*)/g);
    return parts.map((part, j) => {
      if (part.startsWith("**") && part.endsWith("**")) {
        return <strong key={j}>{part.slice(2, -2)}</strong>;
      }
      return <React.Fragment key={j}>{part}</React.Fragment>;
    });
  }

  return (
    <div className="chat-card" role="region" aria-label="Assistant Urbanis.me, aide visiteur">
      <div className="chat-toolbar">
        <div className="chat-toolbar-left">
          <span className="chat-toolbar-mark" aria-hidden="true">
            <img src="assets/logo.png" alt="" />
          </span>
          <span>Urbanis.me · Aide visiteur</span>
        </div>
        <div className="chat-toolbar-right">
          <span className="live-dot" aria-hidden="true"></span>
          <span>En ligne</span>
        </div>
      </div>

      <div className="chat-body" ref={bodyRef} aria-live="polite">
        {messages.map((m, i) => (
          <div key={i} className={"chat-msg " + (m.role === "user" ? "user" : "assistant")}>
            <div className="chat-msg-role">{m.role === "user" ? "Vous" : "Urbanis.me"}</div>
            <div className="chat-bubble">
              {renderText(m.text)}
            </div>
          </div>
        ))}
        {loading && (
          <div className="chat-msg">
            <div className="chat-msg-role">Urbanis.me</div>
            <div className="chat-bubble">
              <span className="typing-dots" aria-label="L'assistant rédige">
                <span></span><span></span><span></span>
              </span>
            </div>
          </div>
        )}
      </div>

      {!loading && messages.length <= 2 && (
        <div className="suggestion-row">
          {SUGGESTIONS.map((s, i) => (
            <button key={i} className="suggestion-chip" onClick={() => send(s)} type="button">
              {s}
            </button>
          ))}
        </div>
      )}

      <form
        className="chat-input"
        onSubmit={(e) => {
          e.preventDefault();
          send();
        }}
      >
        <input
          type="text"
          placeholder="Posez une question sur Urbanis.me…"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          aria-label="Saisir votre question"
          disabled={loading}
        />
        <button type="submit" disabled={loading || !input.trim()} aria-label="Envoyer">
          <svg viewBox="0 0 24 24" width="16" height="16" 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>
        </button>
      </form>
    </div>
  );
}

window.HeroChat = HeroChat;