// Live chat demo wired to window.claude.complete
const { useState: useStateL, useRef: useRefL, useEffect: useEffectL } = React;

const PROP_CONTEXT = `
Sos "Lote", un asistente IA de una plataforma inmobiliaria paraguaya. Respondés SOLO sobre el siguiente terreno, en español rioplatense paraguayo, en tono claro y conciso (máximo 3 oraciones). Si te preguntan algo fuera de este contexto, lo decís honestamente y ofrecés derivar al asesor humano.

FICHA DEL TERRENO:
- Lote 42, Barrio Surubi'í, Luque (Paraguay)
- 480 m² (16m de frente × 30m de fondo)
- Barrio cerrado con seguridad 24hs, calles asfaltadas
- Todos los servicios: agua ESSAP, energía ANDE, fibra óptica
- Precio: USD 58.400 (121 USD/m²) — 10% debajo de la media de zona
- Zonificación R2: unifamiliar hasta 3 plantas, retiro frontal 3m
- Título limpio (Nº 14.829), sin gravámenes, zonificación residencial
- Ubicación: 280m de ruta Transchaco, 1.4km del Shopping Luque, 18min del centro de Asunción
- La zona subió 22% en valor durante los últimos 18 meses
- Comparables: media de Surubi'í US$ 134/m² (6 meses), 32 lotes similares
- Sobre el asesor: Diego Méndez (Costa & Costa), responde en menos de 4hs hábiles

IMPORTANTE:
- Si te preguntan por temas legales específicos (escritura, impuestos exactos), respondé con info general y agregá: "Esto es orientativo — te recomiendo confirmarlo con el escribano antes de firmar."
- No inventes datos que no estén en la ficha.
- Si la pregunta no tiene sentido sobre este lote, ofrecé derivar a Diego.
`;

function LiveDemo() {
  const [msgs, setMsgs] = useStateL([
    {
      role: 'ai',
      text: 'Hola! Soy Lote, el asistente de este terreno en Surubi\'í, Luque. Preguntame lo que quieras sobre precio, zona, servicios, título o qué se puede construir.'
    }
  ]);
  const [input, setInput] = useStateL('');
  const [loading, setLoading] = useStateL(false);
  const scrollRef = useRefL(null);

  useEffectL(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs, loading]);

  const suggestions = [
    '¿Es buen precio?',
    '¿Qué servicios tiene?',
    '¿Está cerca de escuelas?',
    '¿Puedo construir dos plantas?'
  ];

  const send = async (text) => {
    const prompt = text ?? input;
    if (!prompt.trim() || loading) return;
    const next = [...msgs, { role: 'user', text: prompt }];
    setMsgs(next);
    setInput('');
    setLoading(true);

    try {
      const history = next
        .slice(-6)
        .map(m => `${m.role === 'user' ? 'COMPRADOR' : 'LOTE'}: ${m.text}`)
        .join('\n');
      const fullPrompt = `${PROP_CONTEXT}\n\nConversación:\n${history}\n\nLOTE:`;
      const reply = await window.claude.complete(fullPrompt);
      setMsgs(m => [...m, { role: 'ai', text: reply.trim() }]);
    } catch (e) {
      setMsgs(m => [...m, { role: 'ai', text: 'Perdón, tuve un problema para conectarme. Probá de nuevo en un momento, o escribile directo a Diego desde el botón de arriba.' }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 20,
      alignItems: 'stretch'
    }} className="live-demo-grid">
      {/* Property summary */}
      <div style={{
        background: 'var(--surface)', border: '1px solid var(--line)',
        borderRadius: 18, padding: 24, display: 'flex', flexDirection: 'column'
      }}>
        <div style={{
          aspectRatio: '4/3',
          background: 'repeating-linear-gradient(45deg, var(--bg-2) 0 8px, var(--line-2) 8px 9px), linear-gradient(180deg, var(--bg-2), var(--bg))',
          borderRadius: 10, border: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          padding: 12, marginBottom: 18, color: 'var(--ink-3)',
          fontFamily: 'var(--f-mono)', fontSize: 11
        }}>
          <span style={{ background: 'var(--surface)', padding: '4px 8px', borderRadius: 999, border: '1px solid var(--line)' }}>
            ■ plano del lote
          </span>
          <span>−25.2637, −57.5759</span>
        </div>

        <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
          Terreno de ejemplo
        </div>
        <h3 style={{ fontFamily: 'var(--f-display)', fontSize: 28, letterSpacing: '-0.015em', margin: '6px 0 4px', fontWeight: 400 }}>
          Lote 42 · Surubi'í
        </h3>
        <div style={{ color: 'var(--ink-3)', fontSize: 14 }}>Luque · 480 m² · Barrio cerrado</div>

        <div style={{
          marginTop: 16, padding: '14px 0', borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between'
        }}>
          <div>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 32, letterSpacing: '-0.02em' }}>
              US$ 58.400
            </div>
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
              121 USD/m² · 10% bajo mercado
            </div>
          </div>
          <div style={{
            fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.04em',
            padding: '5px 10px', borderRadius: 999,
            background: 'color-mix(in oklab, var(--accent) 18%, transparent)',
            color: 'var(--accent)'
          }}>✓ título limpio</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16, fontSize: 13 }}>
          <div style={{ color: 'var(--ink-3)' }}>Frente <span style={{ color: 'var(--ink)', fontWeight: 500 }}>16m</span></div>
          <div style={{ color: 'var(--ink-3)' }}>Fondo <span style={{ color: 'var(--ink)', fontWeight: 500 }}>30m</span></div>
          <div style={{ color: 'var(--ink-3)' }}>Zonif. <span style={{ color: 'var(--ink)', fontWeight: 500 }}>R2</span></div>
          <div style={{ color: 'var(--ink-3)' }}>Servic. <span style={{ color: 'var(--ink)', fontWeight: 500 }}>Todos</span></div>
        </div>

        <div style={{ marginTop: 'auto', paddingTop: 20 }}>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>
            Asesor
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'var(--accent)', color: 'var(--accent-ink)',
              display: 'grid', placeItems: 'center',
              fontFamily: 'var(--f-display)', fontSize: 14
            }}>DM</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Diego Méndez</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Costa &amp; Costa · responde &lt; 4hs</div>
            </div>
          </div>
        </div>
      </div>

      {/* Chat */}
      <div style={{
        background: 'var(--surface)', border: '1px solid var(--line)',
        borderRadius: 18, display: 'flex', flexDirection: 'column', overflow: 'hidden',
        minHeight: 520
      }}>
        <div style={{
          padding: '14px 18px', borderBottom: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="dot-anim" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }}></span>
            <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>
              Chat · Lote 42
            </span>
          </div>
          <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
            EN VIVO · CLAUDE HAIKU
          </div>
        </div>

        <div ref={scrollRef} style={{
          flex: 1, overflowY: 'auto', padding: 16,
          display: 'flex', flexDirection: 'column', gap: 10
        }}>
          {msgs.map((m, idx) => (
            <div key={idx} className={`bubble ${m.role}`}>
              {m.role === 'ai' && (
                <div className="meta"><span className="dot"></span>Lote · IA</div>
              )}
              <div style={{ whiteSpace: 'pre-wrap' }}>{m.text}</div>
            </div>
          ))}
          {loading && (
            <div className="bubble ai">
              <div className="meta"><span className="dot"></span>Lote · IA</div>
              <div className="typing"><span></span><span></span><span></span></div>
            </div>
          )}
        </div>

        {msgs.length <= 1 && !loading && (
          <div style={{ padding: '0 16px 8px', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {suggestions.map(s => (
              <button
                key={s}
                onClick={() => send(s)}
                style={{
                  padding: '6px 10px', borderRadius: 999,
                  border: '1px solid var(--line)', background: 'var(--bg)',
                  color: 'var(--ink-2)', fontSize: 12
                }}
              >{s}</button>
            ))}
          </div>
        )}

        <div className="chat-input" style={{ margin: 14, marginTop: 6 }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder="Preguntá sobre precio, zona, título, servicios…"
          />
          <button className="send" onClick={() => send()} disabled={loading} aria-label="Enviar">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M2 8l12-6-4 14-2-6-6-2z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        <div style={{
          padding: '10px 16px', borderTop: '1px solid var(--line-2)',
          fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--ink-3)',
          letterSpacing: '0.04em', textAlign: 'center'
        }}>
          Información orientativa — confirmá siempre con el escribano antes de firmar
        </div>
      </div>
    </div>
  );
}

window.LiveDemo = LiveDemo;