// ════════════════════════════════════════════════════════════════════════════
// LeadCustom — AI Assistant chatbot widget
// ════════════════════════════════════════════════════════════════════════════
// Widget flottant en bas à droite. Powered by window.claude.complete.
// Connaît tout LeadCustom : offres, prix, garanties, fonctionnalités, process.
// ════════════════════════════════════════════════════════════════════════════

const ASSISTANT_SYSTEM = `Tu es Lia, l'assistante virtuelle officielle de LeadCustom.
LeadCustom est un CRM autonome propulsé par l'IA pour les artisans, agences immobilières et PME de service en France.

═══ TON RÔLE ═══
Tu es une assistante intelligente et serviable. Tu réponds à TOUTE question que le visiteur te pose — qu'elle concerne LeadCustom ou non (une question générale, un conseil business, une question technique, une définition, etc.). Sois chaleureuse, professionnelle et concise (max 4-5 phrases).

Ton objectif double :
1. AIDER réellement la personne avec sa question, quelle qu'elle soit. Ne refuse jamais de répondre sous prétexte que "ce n'est pas lié à LeadCustom". Donne une vraie réponse utile.
2. Quand c'est pertinent, faire le lien naturel avec LeadCustom et/ou inviter à NOUS CONTACTER (jamais de manière forcée ou répétitive).

Vouvoie par défaut, tutoie seulement si le visiteur tutoie. Une seule invitation au contact par réponse maximum — reste naturelle, pas insistante.

═══ NOS COORDONNÉES (à donner quand utile) ═══
• 📧 Email : contact@leadcustom.fr
• ☎ Téléphone : +33 7 52 98 92 45 (France) · +1 (904) 243-7876 (USA)
• 📅 Appel découverte gratuit de 20 min : page "Réserver un appel" (menu)
Si une question dépasse ce que tu sais, ou demande un échange humain (devis sur mesure, cas complexe, négociation, partenariat, recrutement, support technique précis), oriente chaleureusement vers ces coordonnées.

═══ CE QUE FAIT LEADCUSTOM ═══
• Chatbot WhatsApp & Messenger 24/7 qui qualifie les leads et prend les RDV
• Standard téléphonique IA en 14 langues (décroche en 2 sonneries, transcrit, programme)
• Devis & factures vocaux (décrire le chantier en vocal → devis envoyé en 5 min)
• Relances automatiques jusqu'à signature
• Avis Google automatisés
• Posts Instagram & Facebook IA
• Planning intelligent multi-équipes
• Tableau de bord ROI en temps réel

═══ LES 3 OFFRES PREMIUM ═══

1) **LeadFlow Artisan** (artisans, plombiers, électriciens, BTP)
   Setup : 890€ une fois · Abonnement : 199€/mois sans engagement
   Promesse : +30 à 50% de demandes transformées en chantiers, 0 appel manqué
   Options : Avis Google auto (+49€/mois), Agent IA WhatsApp avancé (+89€/mois)

2) **DealFlow Immo** (agences immobilières, mandataires) — LE PLUS CHOISI
   Setup : 1 490€ une fois · Abonnement : 390€/mois sans engagement
   Promesse : x2 prises de contact qualifiées, visites bookées seules, vendeurs réactivés
   Options : Relances vendeurs auto (+99€), Qualification IA premium (+149€), Prise RDV auto (+79€)

3) **AutoGrowth System** (PME, agences, commerces, services B2B)
   Setup : 1 190€ une fois · Abonnement : 290€/mois sans engagement
   Promesse : +25% CA en 90 jours, 15h/semaine économisées
   Options : Google Ads piloté IA (+199€), Contenu réseaux IA (+89€), Relances multi-canal (+119€)

═══ SERVICE SUR MESURE (hors packs · devis personnalisé) ═══
En plus des 3 packs, LeadCustom propose un service de création web sur devis :
• Sites web & applications sur mesure (vitrine, e-commerce, app métier, plateforme).
• Hébergement & maintenance (hébergement cloud sécurisé, sauvegardes, sécurité, surveillance 24/7).
• Référencement SEO (audit, mots-clés locaux, contenu, suivi de positions).
Ce service N'EST PAS inclus dans les packs. Chaque projet = DEVIS PERSONNALISÉ, réponse sous 48h, sans engagement.
Ne JAMAIS annoncer de prix pour ce service (il dépend du projet). Invite à demander un devis gratuit via la page "Réserver" ou en décrivant le projet ici.

═══ GARANTIES ═══
• **Garantie 14 jours** : pas de nouveaux leads ou demandes en plus → 100% remboursé
• **Assistance gratuite** avant que l'abonnement démarre (un expert configure tout avec le client)
• Sans engagement : annulable en un clic, données exportables 30 jours
• Hébergement cloud sécurisé, conformité RGPD (UE) & CCPA (Californie), données chiffrées

═══ PROCESS POST-PAIEMENT ═══
1. Paiement sécurisé Stripe → reçu + récap par email immédiat
2. Un expert contacte le client sous 24h pour la configuration (gratuit)
3. Tests + personnalisation → quand tout marche, l'abonnement démarre
4. Garantie 14 jours active

═══ INSCRIPTION & COMPTE ═══
• Création de compte avec email/mot de passe ou Google
• Mot de passe oublié → email de reset envoyé après vérification
• Espace client pour gérer abonnement, factures, configurations

═══ RDV & CONTACT ═══
• Appel découverte gratuit de 20 min via Cal.com (lien dans le menu "Réserver un appel")
• Email : contact@leadcustom.fr · Téléphone : +33 7 52 98 92 45 / +1 (904) 243-7876
• Le client peut aussi écrire directement depuis ce chat

═══ RÈGLES ABSOLUES ═══
- Réponds à TOUTE question, même hors LeadCustom : donne d'abord une vraie réponse utile, puis (si pertinent) fais le lien ou oriente vers nos coordonnées.
- Ne JAMAIS inventer un prix, une fonctionnalité ou un délai LeadCustom non listés ci-dessus. Pour le sur-mesure → devis personnalisé, pas de prix annoncé.
- Si tu ne connais pas une info précise sur LeadCustom : dis-le honnêtement et oriente vers contact@leadcustom.fr ou un appel.
- Réponses courtes (4-5 phrases max), claires, dans la langue du visiteur (français ou anglais selon ce qu'il écrit).
- Pas d'emojis sauf 1 max si pertinent.
- Reste bienveillante et serviable en toute circonstance ; ne refuse jamais sèchement.`;

const QUICK_PROMPTS = [
  "Quelle offre est faite pour moi ?",
  "Comment ça marche après paiement ?",
  "Comment vous contacter ?",
  "Que contient le setup ?",
];

function ChatAssistant() {
  const [open, setOpen] = React.useState(false);
  const [messages, setMessages] = React.useState([
    { role: 'assistant', content: "Bonjour 👋 Je suis Lia, l'assistante LeadCustom. Posez-moi n'importe quelle question — sur nos offres, votre activité, ou autre chose. Je suis là pour vous aider et vous orienter." }
  ]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [hasNewBadge, setHasNewBadge] = React.useState(true);
  const scrollRef = React.useRef(null);
  const inputRef = React.useRef(null);

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

  React.useEffect(() => {
    if (open) {
      setHasNewBadge(false);
      setTimeout(() => inputRef.current?.focus(), 200);
    }
  }, [open]);

  const send = async (text) => {
    const trimmed = (text ?? input).trim();
    if (!trimmed || loading) return;

    const next = [...messages, { role: 'user', content: trimmed }];
    setMessages(next);
    setInput('');
    setLoading(true);

    try {
      const history = next
        .filter(m => m.role !== 'system')
        .map(m => ({ role: m.role, content: m.content }));

      const lang = (window.LC_LANG === 'en') ? 'en' : 'fr';
      const langDirective = lang === 'en'
        ? "\n\n══════ LANGUAGE LOCK ══════\nThe knowledge base above is written in French, but the VISITOR'S WEBSITE IS IN ENGLISH. You MUST write 100% of your reply in ENGLISH only. Never output a single French word. Translate every offer name detail into natural native English. Prices: keep the figures, you may say euros. This rule overrides everything above.\n═══════════════════════════"
        : "\n\n══════ LANGUE ══════\nLe site est en FRANÇAIS. Réponds intégralement en français impeccable.\n════════════════════";

      const systemPrompt = ASSISTANT_SYSTEM + langDirective;
      let reply = '';

      // 1) En production (Vercel) : appelle la fonction serverless /api/chat (Groq)
      let usedServerless = false;
      try {
        const r = await fetch('/api/chat', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ system: systemPrompt, messages: history, lang }),
        });
        if (r.ok) {
          const data = await r.json();
          if (data && data.reply) { reply = data.reply; usedServerless = true; }
        }
      } catch (e) { /* pas de serverless dispo (ex. aperçu local) → fallback */ }

      // 2) Fallback : environnement d'aperçu avec window.claude.complete
      if (!usedServerless && window.claude && window.claude.complete) {
        reply = await window.claude.complete({
          messages: [
            { role: 'user', content: systemPrompt + "\n\n[Première question du client suit ; réponds directement comme Lia, dans la langue indiquée ci-dessus.]" },
            { role: 'assistant', content: lang === 'en' ? "Understood, I'm Lia. I'll reply clearly in English." : "D'accord, je suis Lia. Je vais répondre clairement, en restant fidèle aux informations données." },
            ...history,
          ],
        });
      }

      setMessages(m => [...m, { role: 'assistant', content: reply || (lang === 'en' ? "Sorry, I couldn't respond. Could you rephrase?" : "Désolée, je n'ai pas pu répondre. Pouvez-vous reformuler ?") }]);
    } catch (err) {
      const lang = (window.LC_LANG === 'en') ? 'en' : 'fr';
      setMessages(m => [...m, {
        role: 'assistant',
        content: lang === 'en'
          ? "I'm having a technical issue. In the meantime, you can book a 20-min call from the menu, or email contact@leadcustom.fr — a human will get back to you quickly."
          : "Je rencontre un souci technique. En attendant, vous pouvez réserver un appel de 20 min depuis le menu, ou écrire à contact@leadcustom.fr — un humain vous répondra rapidement.",
      }]);
    } finally {
      setLoading(false);
    }
  };

  const onKey = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      send();
    }
  };

  return (
    <>
      {/* Trigger */}
      <button
        className={`assistant-fab ${open ? 'assistant-fab--hidden' : ''}`}
        onClick={() => setOpen(true)}
        aria-label="Ouvrir l'assistante virtuelle"
      >
        <span className="assistant-fab-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
        </span>
        <span className="assistant-fab-label">
          <span className="assistant-fab-name">Une question ?</span>
          <span className="assistant-fab-sub">Lia répond en 2 sec</span>
        </span>
        {hasNewBadge && <span className="assistant-fab-badge">1</span>}
      </button>

      {/* Panel */}
      <div className={`assistant-panel ${open ? 'assistant-panel--open' : ''}`} role="dialog" aria-label="Assistante virtuelle">
        <header className="assistant-head">
          <div className="assistant-head-left">
            <div className="assistant-avatar">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 8V4H8"/>
                <rect width="16" height="12" x="4" y="8" rx="2"/>
                <path d="M2 14h2"/>
                <path d="M20 14h2"/>
                <path d="M15 13v2"/>
                <path d="M9 13v2"/>
              </svg>
            </div>
            <div>
              <div className="assistant-name">Lia <span className="assistant-status"><span className="assistant-dot"></span> en ligne</span></div>
              <div className="assistant-role">Assistante LeadCustom</div>
            </div>
          </div>
          <button className="assistant-close" onClick={() => setOpen(false)} aria-label="Fermer">×</button>
        </header>

        <div className="assistant-messages" ref={scrollRef}>
          {messages.map((m, i) => (
            <div key={i} className={`assistant-msg assistant-msg--${m.role}`}>
              {m.role === 'assistant' && (
                <div className="assistant-msg-avatar">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 8V4H8"/>
                    <rect width="16" height="12" x="4" y="8" rx="2"/>
                    <path d="M15 13v2"/>
                    <path d="M9 13v2"/>
                  </svg>
                </div>
              )}
              <div className="assistant-msg-bubble">
                {m.content.split('\n').map((line, j) => (
                  <span key={j}>{line}{j < m.content.split('\n').length - 1 && <br/>}</span>
                ))}
              </div>
            </div>
          ))}
          {loading && (
            <div className="assistant-msg assistant-msg--assistant">
              <div className="assistant-msg-avatar">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 8V4H8"/>
                  <rect width="16" height="12" x="4" y="8" rx="2"/>
                </svg>
              </div>
              <div className="assistant-msg-bubble assistant-msg-bubble--typing">
                <span></span><span></span><span></span>
              </div>
            </div>
          )}
        </div>

        {messages.length <= 1 && !loading && (
          <div className="assistant-quick">
            {QUICK_PROMPTS.map((q, i) => (
              <button key={i} className="assistant-chip" onClick={() => send(q)}>{q}</button>
            ))}
          </div>
        )}

        <form className="assistant-input-row" onSubmit={(e) => { e.preventDefault(); send(); }}>
          <textarea
            ref={inputRef}
            className="assistant-input"
            placeholder="Écrivez votre question…"
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={onKey}
            rows={1}
            disabled={loading}
          />
          <button type="submit" className="assistant-send" disabled={loading || !input.trim()} aria-label="Envoyer">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
            </svg>
          </button>
        </form>

        <div className="assistant-footer">
          Propulsée par IA · Réponse instantanée · <a href="reservation.html">Parler à un agent</a>
        </div>
      </div>
    </>
  );
}

window.ChatAssistant = ChatAssistant;