/* =========================================================
   Chatbot — Fran AI assistant
   Floating button + chat window. Talks to the Claude API via
   the Cloudflare Worker at CHAT_API_URL below.
   On detailed/contact intents, redirects to WhatsApp.
   ========================================================= */

const { useEffect: useEf, useRef: useRf, useState: useSt } = React;

const WHATSAPP = "+34666401757";
const WA_URL = (msg) => `https://wa.me/${WHATSAPP.replace(/[^0-9]/g, "")}?text=${encodeURIComponent(msg)}`;

// Cloudflare Worker that proxies Claude. We POST a JSON payload with the
// system prompt and the trimmed message history; the worker returns the
// assistant reply as text or JSON. We accept both shapes so the chatbot
// keeps working if the worker contract changes slightly.
const CHAT_API_URL = "https://claude-chatbot-api.frannypunto.workers.dev";

async function callChatAPI({ system, messages }) {
  const res = await fetch(CHAT_API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ system, messages }),
  });
  if (!res.ok) {
    throw new Error(`Chat API ${res.status}`);
  }
  // Try JSON first; fall back to plain text. Look in the common reply fields.
  const ct = res.headers.get("content-type") || "";
  if (ct.includes("application/json")) {
    const data = await res.json();
    const fromContent = Array.isArray(data?.content)
      ? data.content.map((c) => (typeof c === "string" ? c : c?.text || "")).join("").trim()
      : "";
    return (
      data?.reply ||
      data?.text ||
      data?.message ||
      data?.completion ||
      data?.output ||
      fromContent ||
      ""
    );
  }
  return (await res.text()).trim();
}

const CHAT_T = {
  en: {
    open: "Chat with Fran's AI",
    title: "Fran's AI assistant",
    sub: "Quick answers in seconds",
    online: "Online",
    placeholder: "Ask anything about my work, pricing, process…",
    send: "Send",
    welcome: "Hi 👋 I'm Fran's AI assistant. Ask me about services, pricing, process or anything else. For a detailed quote or booking a call, I'll send you to Fran directly on WhatsApp.",
    waCta: "Talk to Fran on WhatsApp",
    waNote: "For detailed quotes, project briefs or scheduling a call, it's faster to chat with Fran directly:",
    suggestions: ["What services do you offer?", "How much does a website cost?", "Do you work with clients in Switzerland?", "Talk to Fran directly"],
    thinking: "Thinking…",
    error: "Something went wrong. Want to message Fran on WhatsApp?",
    waSeed: "Hi Fran! I'm visiting your site and would like to chat about a project.",
  },
  de: {
    open: "Chatte mit Frans KI",
    title: "Frans KI-Assistent",
    sub: "Schnelle Antworten in Sekunden",
    online: "Online",
    placeholder: "Frag alles zu Projekten, Preisen, Ablauf…",
    send: "Senden",
    welcome: "Hi 👋 Ich bin Frans KI-Assistent. Frag mich zu Leistungen, Preisen oder dem Ablauf. Für eine ausführliche Offerte oder einen Anruf verbinde ich dich direkt mit Fran auf WhatsApp.",
    waCta: "Mit Fran auf WhatsApp schreiben",
    waNote: "Für detaillierte Offerten oder einen Termin chattest du am besten direkt mit Fran:",
    suggestions: ["Welche Leistungen bietest du an?", "Was kostet eine Website?", "Arbeitest du mit Kunden in der Schweiz?", "Direkt mit Fran sprechen"],
    thinking: "Denkt nach…",
    error: "Etwas ist schiefgelaufen. Mit Fran auf WhatsApp schreiben?",
    waSeed: "Hallo Fran! Ich besuche deine Website und möchte über ein Projekt sprechen.",
  },
  es: {
    open: "Chatea con la IA de Fran",
    title: "Asistente IA de Fran",
    sub: "Respuestas rápidas en segundos",
    online: "Online",
    placeholder: "Pregunta lo que quieras: servicios, precios, proceso…",
    send: "Enviar",
    welcome: "¡Hola! 👋 Soy el asistente IA de Fran. Pregúntame sobre servicios, precios o el proceso. Para presupuesto detallado o agendar una llamada, te paso directo a Fran por WhatsApp.",
    waCta: "Hablar con Fran por WhatsApp",
    waNote: "Para presupuestos detallados o agendar una llamada, lo más rápido es chatear con Fran directamente:",
    suggestions: ["¿Qué servicios ofreces?", "¿Cuánto cuesta una web?", "¿Trabajas en Suiza?", "Hablar con Fran directamente"],
    thinking: "Pensando…",
    error: "Algo ha fallado. ¿Te paso a Fran por WhatsApp?",
    waSeed: "¡Hola Fran! Estoy en tu web y me gustaría hablar de un proyecto.",
  },
};

const SYSTEM_PROMPT = (lang) => `You are the AI assistant for Fran Ruiz (Francisco Ruiz), an independent digital solutions designer based in Bern, Switzerland. You answer visitor questions on his portfolio website.

ABOUT FRAN:
- Digital solutions professional, 8+ years experience, 50+ projects delivered
- Based in Bern, Switzerland — works remote across Switzerland, Germany, Spain, Europe
- Speaks English, German, Spanish
- Focus: small businesses (restaurants, clinics, vacation rentals, agencies)

SERVICES:
- Custom web design (conversion-focused, not templates)
- Booking & reservations systems (incl. Airbnb integrations, channel managers)
- QR menus for restaurants (multilingual, allergens, instant updates)
- SEO and local visibility
- Marketing automation (Mailchimp, forms → Excel, CRM, Google integrations)
- AI workflow automation (custom AI assistants for businesses)

PRICING (CHF):
- Starter "Landing": CHF 1,400 — 1 page, mobile responsive, contact form, basic SEO, 1 month support
- Business: CHF 2,800 — up to 6 pages, booking module, multilingual EN/DE/ES, SEO, Mailchimp, 3 months support
- Studio: from CHF 5,000 — custom design system, backend/APIs, AI automation, CRM, 6 months priority support
- Payments: 50% upfront, 50% on delivery. Bank transfer or Stripe. CHF/EUR/USD.

TIMELINES:
- Landing page: 1–2 weeks
- Business website: 4–6 weeks
- Automation/AI projects: 8+ weeks

CONTACT:
- Email: contacto@franruiz.es
- Phone CH: +41 076 73 125 17
- Phone ES: +34 666 40 17 57
- WhatsApp: +34 666 40 17 57
- LinkedIn: francisco-ruiz-ruiz-digital-solutions

RULES:
- Reply in ${lang === "de" ? "German" : lang === "es" ? "Spanish" : "English"}.
- Keep answers SHORT: max 3 short sentences. No markdown, no bullet lists, no headers.
- Tone: warm but professional, conversational.
- If the visitor asks for a detailed quote, custom pricing for their specific project, wants to book a call, wants to talk to Fran directly, or asks something you can't answer confidently — end your reply with the exact token [WHATSAPP] on its own. The UI will render a WhatsApp button.
- Never invent project details, prices outside the ranges above, or commitments. If unsure → [WHATSAPP].
- Never share personal data not listed above.`;

const ChatBot = ({ lang }) => {
  const ct = CHAT_T[lang] || CHAT_T.en;
  const [open, setOpen] = useSt(false);
  const [msgs, setMsgs] = useSt([{ role: "assistant", content: ct.welcome }]);
  const [input, setInput] = useSt("");
  const [busy, setBusy] = useSt(false);
  const bodyRef = useRf(null);
  const inputRef = useRf(null);

  // Reset welcome message on language change
  useEf(() => {
    setMsgs([{ role: "assistant", content: ct.welcome }]);
  }, [lang]);

  // Autoscroll on new message
  useEf(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, busy]);

  // Focus input when opening
  useEf(() => {
    if (open && inputRef.current) setTimeout(() => inputRef.current.focus(), 200);
  }, [open]);

  const send = async (text) => {
    const q = (text ?? input).trim();
    if (!q || busy) return;
    setInput("");

    // If user clicks "talk to Fran" suggestion → straight to WhatsApp
    const lc = q.toLowerCase();
    if (lc.includes("whatsapp") || lc === ct.suggestions[3].toLowerCase()) {
      setMsgs((m) => [...m, { role: "user", content: q }, { role: "assistant", content: ct.waNote, whatsapp: true }]);
      return;
    }

    setMsgs((m) => [...m, { role: "user", content: q }]);
    setBusy(true);

    try {
      // Build messages array (use only recent history to keep prompt small).
      // Send a clean { role, content } shape — the worker forwards this on
      // to Claude. The system prompt goes in its own `system` field.
      const history = [...msgs, { role: "user", content: q }]
        .slice(-8)
        .map((m) => ({ role: m.role, content: m.content }));

      const reply = await callChatAPI({
        system: SYSTEM_PROMPT(lang),
        messages: history,
      });

      const hasWa = /\[WHATSAPP\]/i.test(reply);
      const clean = reply.replace(/\[WHATSAPP\]/gi, "").trim();
      setMsgs((m) => [...m, { role: "assistant", content: clean || ct.waNote, whatsapp: hasWa }]);
    } catch (e) {
      setMsgs((m) => [...m, { role: "assistant", content: ct.error, whatsapp: true }]);
    } finally {
      setBusy(false);
    }
  };

  return (
    <>
      <button
        className={`chat-fab ${open ? "open" : ""}`}
        onClick={() => setOpen(!open)}
        aria-label={ct.open}
      >
        {open ? (
          <span className="fab-icon">✕</span>
        ) : (
          <>
            <span className="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 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"></path>
              </svg>
            </span>
            <span className="fab-pulse" />
          </>
        )}
      </button>

      <div className={`chat-window ${open ? "open" : ""}`}>
        <div className="chat-header">
          <div className="chat-avatar">
            <span>FR</span>
            <span className="led" />
          </div>
          <div className="chat-h-text">
            <div className="chat-title">{ct.title}</div>
            <div className="chat-sub">{ct.sub}</div>
          </div>
          <button className="chat-close" onClick={() => setOpen(false)} aria-label="Close">✕</button>
        </div>

        <div className="chat-body" ref={bodyRef}>
          {msgs.map((m, i) => (
            <div key={i} className={`chat-msg ${m.role}`}>
              <div className="bubble">{m.content}</div>
              {m.whatsapp && (
                <a className="wa-btn" href={WA_URL(ct.waSeed)} target="_blank" rel="noreferrer">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20.52 3.48A11.93 11.93 0 0 0 12.04 0C5.46 0 .12 5.34.12 11.92c0 2.1.55 4.15 1.6 5.96L0 24l6.27-1.64a11.9 11.9 0 0 0 5.77 1.47h.01c6.58 0 11.92-5.34 11.92-11.92 0-3.18-1.24-6.18-3.45-8.43zM12.04 21.79h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.72.97 1-3.62-.23-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.46 4.45-9.91 9.92-9.91 2.65 0 5.13 1.03 7 2.9a9.85 9.85 0 0 1 2.9 7c0 5.47-4.44 9.92-9.91 9.92zm5.44-7.42c-.3-.15-1.76-.87-2.04-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.17c-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48a9.04 9.04 0 0 1-1.67-2.07c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.06 2.87 1.21 3.07.15.2 2.09 3.2 5.07 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.08 1.76-.72 2-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35z"/>
                  </svg>
                  {ct.waCta}
                </a>
              )}
            </div>
          ))}
          {busy && (
            <div className="chat-msg assistant">
              <div className="bubble typing">
                <span /><span /><span />
              </div>
            </div>
          )}
        </div>

        {msgs.length <= 1 && !busy && (
          <div className="chat-suggestions">
            {ct.suggestions.map((s) => (
              <button key={s} onClick={() => send(s)}>{s}</button>
            ))}
          </div>
        )}

        <form
          className="chat-input"
          onSubmit={(e) => { e.preventDefault(); send(); }}
        >
          <input
            ref={inputRef}
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder={ct.placeholder}
            disabled={busy}
          />
          <button type="submit" disabled={busy || !input.trim()} aria-label={ct.send}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <line x1="22" y1="2" x2="11" y2="13"></line>
              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
          </button>
        </form>
      </div>
    </>
  );
};

Object.assign(window, { ChatBot });
