/* ============================================================
   HERO CHAT — mini assistant interactif
   Démarre avec une conversation pré-écrite, puis l'utilisateur
   peut continuer (appel à window.claude.complete).
   ============================================================ */

const SUGGESTIONS = [
  "Puis-je construire une véranda ?",
  "Quelle hauteur max pour ma clôture ?",
  "Mon terrain est-il constructible ?"
];

const SEEDED_MESSAGES = [
  {
    role: "user",
    text: "Je souhaite construire une extension de 25 m² à cette adresse. Quelle démarche dois-je faire ?"
  },
  {
    role: "assistant",
    text: "Votre adresse correspond à la parcelle AB 0142, en zone UB du PLU.\n\nPour une extension de 25 m², une **déclaration préalable (DP)** est généralement requise. Au-delà de 40 m² (ou 20 m² hors zone U couverte par PLU), un **permis de construire (PC)** devient nécessaire.\n\nÀ vérifier avant le dépôt :\n• emprise au sol restante après extension\n• retrait de 3 m par rapport à la limite séparative\n• hauteur faîtage limitée à 9 m en zone UB\n• matériaux de façade compatibles avec le règlement",
    chips: [
      { label: "AB 0142", color: "#FF6A1F" },
      { label: "Zone UB", color: "#1B3A78" },
      { label: "DP probable", color: "#2D7A4A" }
    ],
    disclaimer: "Réponse informative — ne remplace pas l'instruction officielle de la collectivité."
  }
];

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 UrbaConnect, un assistant urbanisme pour la commune fictive de Saint-Martin-du-Lac. Tu réponds en français, vouvoiement, ton institutionnel et clair. Tu aides un habitant à comprendre les règles d'urbanisme applicables à sa parcelle (AB 0142, zone UB du PLU).

CONTRAINTES DE FORMAT :
- Sois bref : 4 à 7 lignes maximum
- N'utilise jamais d'emoji
- Termine TOUJOURS par : "(Réponse informative — ne remplace pas l'instruction officielle de la collectivité.)"
- Si tu cites une démarche, utilise les abréviations métier : DP, PC, CU, permis d'aménager
- Si tu cites une zone, utilise les codes : UA, UB, A, N, AU, UY, Nh
- Si la question sort du sujet urbanisme, redirige poliment

Tu n'es PAS un moteur de recherche du PLU. Tu pars du projet concret de l'habitant pour qualifier une démarche.`;

      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,
          disclaimer: "Réponse informative — ne remplace pas l'instruction officielle de la collectivité."
        }
      ]);
    } catch (err) {
      setMessages(curr => [
        ...curr,
        {
          role: "assistant",
          text: "Le service est temporairement indisponible. Pour une démonstration complète, contactez l'équipe UrbaConnect.",
          disclaimer: "Réponse informative — ne remplace pas l'instruction officielle de la collectivité."
        }
      ]);
    } finally {
      setLoading(false);
    }
  }

  function renderText(t) {
    // Split paragraphs, parse simple **bold** and bullet lines
    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) {
    // simple **bold**
    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="Démonstration interactive UrbaConnect">
      <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>UrbaConnect · Saint-Martin-du-Lac</span>
        </div>
        <div className="chat-toolbar-right">
          <span className="live-dot" aria-hidden="true"></span>
          <span>En direct</span>
        </div>
      </div>

      <div className="chat-context" aria-hidden="false">
        <svg className="chat-context-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 21s-7-7.5-7-12a7 7 0 0 1 14 0c0 4.5-7 12-7 12z"/>
          <circle cx="12" cy="9" r="2.5"/>
        </svg>
        <span><strong>3 rue de la Mairie</strong> — parcelle <strong>AB 0142</strong> · zone <strong>UB</strong> · PLU 2022</span>
      </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" ? "Habitant" : "Assistant"}</div>
            <div className="chat-bubble">
              {renderText(m.text)}
            </div>
            {m.chips && (
              <div className="chat-zone-chips">
                {m.chips.map((c, j) => (
                  <span key={j} className="zone-chip">
                    <span className="zone-chip-color" style={{ background: c.color }} aria-hidden="true"></span>
                    {c.label}
                  </span>
                ))}
              </div>
            )}
            {m.disclaimer && (
              <div className="chat-disclaimer">
                <span className="chat-disclaimer-bang" aria-hidden="true">!</span>
                <span>{m.disclaimer}</span>
              </div>
            )}
          </div>
        ))}
        {loading && (
          <div className="chat-msg">
            <div className="chat-msg-role">Assistant</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 <= 3 && (
        <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 d'urbanisme…"
          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;