/* Torre Auro — AI chat widget */

const SYSTEM_PROMPT = `Eres "Aura", asesora comercial virtual de Torre Auro, una torre corporativa de 7 niveles en Costa de Oro, Boca del Río, Veracruz. Hablas en español, en tono institucional y cálido, breve (1-3 frases por respuesta). El tono es premium, no de urgencia.

Posicionamiento: "Donde el entorno es parte de la empresa." Torre Auro es un ecosistema corporativo organizado en cuatro afinidades:

1. RETAIL PREMIUM (Planta Baja) — Gastronomía y retail selecto. Un único local de 281 m² con frente dual sobre Ruiz Cortines + Av. Tiburón. $89,790/mes. Exclusividad de giro por categoría.
2. SALUD PREMIUM (Niveles 1–2) — Medicina, bienestar y atención especializada. Clúster médico con comunidad de referidos. Desde $29,750/mes.
3. DESPACHOS & SERVICIOS (Niveles 3–4) — Firmas legales, consultoría, finanzas, contadores. Entorno profesional silencioso. Desde $30,250/mes.
4. CORPORATIVO EJECUTIVO (Niveles 5–6) — Empresas regionales, holdings, presencia institucional. Nivel 6 en lanzamiento con opción de planta completa (~577 m²). Desde $31,250/mes.

Infraestructura: 4 niveles de estacionamiento. Entrega en obra gris (acondicionamiento 2–4 meses). Acceso controlado en lobby. Contacto: 229 302 7197 · contacto@torreauro.com.

Estilo:
- Sé concreta. Cuando alguien describe su giro, recomienda el ecosistema apropiado con la razón en una frase.
- Si preguntan precio, da el rango específico.
- Para cerrar, ofrece agendar visita o solicitar planos al 229 302 7197.
- No inventes detalles que no estén arriba. Si no sabes, ofrece conectarles con un asesor humano.
- No uses urgencia agresiva. El tono es de selección, no de prisa.
- Responde en máximo 60 palabras.`;

const CONTEXT_GREETING = {
  general: 'Bienvenido a Torre Auro. ¿Qué tipo de espacio estás explorando?',
  'planta-baja': 'Retail Premium — un único local en planta baja con frente dual. ¿Tu concepto es gastronomía, retail o servicio?',
  'nivel-1': 'Salud Premium — clúster de alta especialidad médica. ¿Cuál es tu especialidad?',
  'nivel-2': 'Salud Premium — servicios complementarios al clúster del nivel 1. ¿Qué giro estás considerando?',
  'nivel-3': 'Despachos & Servicios — entorno profesional silencioso. ¿Tu giro es legal, contable o consultoría?',
  'nivel-4': 'Despachos & Servicios — cien por ciento corporativo. ¿Cuántas personas trabajan en tu equipo?',
  'nivel-5': 'Corporativo Ejecutivo — empresas regionales con presencia institucional. ¿Cuál es tu giro?',
  'nivel-6': 'Corporativo Ejecutivo — planta completa en lanzamiento. ¿Buscas headquarters regional?',
};

const SUGGESTIONS_BY_CONTEXT = {
  general: ['¿Qué ecosistema me conviene?', 'Disponibilidad actual', 'Agendar visita'],
  'planta-baja': ['¿Hay exclusividad de giro?', 'Tiempo de acondicionamiento', 'Estacionamiento'],
  'nivel-1': ['¿Qué especialidades hay?', 'Estacionamiento pacientes', 'Tamaño del espacio'],
  'nivel-2': ['Sinergia entre niveles', 'Precio del ecosistema', 'Espacios disponibles'],
  'nivel-3': ['Ambiente del despacho', 'Privacidad', 'Tamaño de equipo'],
  'nivel-4': ['Privacidad del acceso', 'Sala de juntas', 'Configuración'],
  'nivel-5': ['Acceso institucional', 'Vista del nivel', 'Presencia regional'],
  'nivel-6': ['Planta completa', 'Condiciones de lanzamiento', 'Señalización exterior'],
};

function ChatWidget() {
  const [open, setOpen] = useState(false);
  const [context, setContext] = useState('general');
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    const onOpen = (e) => {
      const ctx = e.detail?.context || 'general';
      const baseCtx = ctx.replace('-planos', '');
      setContext(baseCtx);
      setOpen(true);
      setMessages(prev => {
        if (prev.length === 0 || prev[0]._ctx !== baseCtx) {
          const greet = ctx.endsWith('-planos')
            ? 'Perfecto — puedo enviarte los planos de este nivel al correo. ¿A qué correo los envío?'
            : CONTEXT_GREETING[baseCtx] || CONTEXT_GREETING.general;
          return [{ role: 'agent', _ctx: baseCtx, text: greet }];
        }
        return prev;
      });
    };
    window.addEventListener('ta:open-chat', onOpen);
    return () => window.removeEventListener('ta:open-chat', onOpen);
  }, []);

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

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

    try {
      const history = next.map(m => ({
        role: m.role === 'agent' ? 'assistant' : 'user',
        content: m.text,
      }));
      const reply = await window.claude.complete({
        messages: [
          { role: 'user', content: SYSTEM_PROMPT + '\n\nContexto: ' + (context === 'general' ? 'navegación general' : 'usuario viendo ' + context) },
          ...history,
        ],
      });
      setMessages(m => [...m, { role: 'agent', text: reply || 'Discúlpame, no logré procesar. ¿Puedes reformular?' }]);
    } catch (err) {
      setMessages(m => [...m, { role: 'agent', text: 'Tuve un problema técnico. Puedes contactarnos al 229 302 7197 o contacto@torreauro.com.' }]);
    }
    setBusy(false);
  }

  function onSubmit(e) {
    e.preventDefault();
    send(input);
  }

  const suggestions = SUGGESTIONS_BY_CONTEXT[context] || SUGGESTIONS_BY_CONTEXT.general;
  const showSuggestions = messages.length <= 1 && !busy;
  const ctxFloor = FLOOR_BY_ID[context];

  return (
    <div className="chat-root">
      {!open && (
        <button className="chat-fab" onClick={() => openChat(context)} aria-label="Abrir chat con asesor">
          <Icon n="ti-message-circle" />
        </button>
      )}
      <div className={`chat-panel ${open ? 'open' : ''}`} role="dialog" aria-label="Asesor Torre Auro">
        <div className="chat-head">
          <div className="chat-head-info">
            <div className="chat-head-dot" />
            <div>
              <div className="chat-head-title">Aura · <b>Asesora Torre Auro</b></div>
              <div className="chat-head-sub">Respuesta inmediata</div>
            </div>
          </div>
          <button className="chat-close" onClick={() => setOpen(false)} aria-label="Cerrar chat">
            <Icon n="ti-x" />
          </button>
        </div>
        <div className="chat-body" ref={bodyRef}>
          {context !== 'general' && ctxFloor && (
            <div className="chat-context">
              {ctxFloor.sh} · {ZONES[ctxFloor.zone]?.tag}
            </div>
          )}
          {messages.map((m, i) => (
            <div key={i} className={`bubble ${m.role}`}>{m.text}</div>
          ))}
          {busy && (
            <div className="chat-typing"><span/><span/><span/></div>
          )}
          {showSuggestions && (
            <div className="chat-suggestions">
              {suggestions.map(s => (
                <button key={s} onClick={() => send(s)}>{s}</button>
              ))}
            </div>
          )}
        </div>
        <form className="chat-input-row" onSubmit={onSubmit}>
          <input
            className="chat-input"
            placeholder="Escribe tu pregunta…"
            value={input}
            onChange={e => setInput(e.target.value)}
            disabled={busy}
          />
          <button type="submit" className="chat-send" disabled={busy || !input.trim()} aria-label="Enviar">
            <Icon n="ti-send" />
          </button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { ChatWidget });