// AcademiaDental — Tutor IA chat (uses window.claude.complete)
const { useState: useStateT, useRef: useRefT, useEffect: useEffectT } = React;

function TutorScreen({ session, setRoute, tutorContext }) {
  const scrollRef = useRefT(null);
  const [busy, setBusy] = useStateT(false);
  const [draft, setDraft] = useStateT('');

  // Build initial greeting from context
  const initial = useRefT();
  if (!initial.current) {
    const ctx = tutorContext || {};
    const hello = ctx.failed && ctx.failed.length
      ? `Hola ${session.name.split(' ')[0]}. Veo que tuviste dudas en preguntas sobre ${ctx.topic || 'este tema'}. ¿Quieres que revisemos los conceptos clave?`
      : `Hola ${session.name.split(' ')[0]}. Soy tu tutor IA experto en odontología. Pregúntame lo que necesites.`;
    initial.current = [
      { role: 'ia', text: hello },
      ...(ctx.failed && ctx.failed.length
        ? [{ role: 'ia', text: 'Pregunta marcada para repaso: "' + ctx.failed[0] + '"' }]
        : [])
    ];
  }

  const [messages, setMessages] = useStateT(initial.current);
  const [suggestions, setSuggestions] = useStateT([
    '¿Cómo se diferencia Estadio I y II en EFP 2017?',
    'Antibiótico de elección en absceso odontogénico',
    'Dosis máxima de lidocaína con epinefrina'
  ]);

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

  async function send(text) {
    const content = (text || draft).trim();
    if (!content || busy) return;
    setDraft('');
    setMessages((m) => [...m, { role: 'user', text: content }]);
    setBusy(true);

    // Build conversation for Claude
    const system = `Eres un tutor experto en odontología clínica para estudiantes y profesionales en Chile. Responde en español, breve y directo, usando viñetas cuando ayude. Cita guías relevantes (EFP, MINSAL, GES) si corresponde. Si la pregunta NO es odontológica, redirige amablemente al tema de estudios. Máx ~120 palabras.`;
    const history = [...messages, { role: 'user', text: content }].slice(-10).map((m) => ({
      role: m.role === 'user' ? 'user' : 'assistant',
      content: m.text
    }));
    try {
      let text = '';
      // Preferir window.claude.complete (entorno dev) si existe
      if (typeof window.claude !== 'undefined' && window.claude.complete) {
        const reply = await window.claude.complete({ system, messages: history });
        text = typeof reply === 'string' ? reply : (reply && reply.text) || '';
      } else {
        // Producción: llamar al endpoint /api/tutor
        // Necesita el token de Supabase del usuario logueado
        let token = '';
        try {
          if (window.AD_CONFIG && window.AD_CONFIG.useSupabase && window.supabase) {
            const client = window.supabase.createClient(window.AD_CONFIG.supabase.url, window.AD_CONFIG.supabase.anonKey);
            const { data } = await client.auth.getSession();
            token = (data.session && data.session.access_token) || '';
          }
        } catch (_) {}

        const resp = await fetch('/api/tutor', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            ...(token ? { 'Authorization': 'Bearer ' + token } : {})
          },
          body: JSON.stringify({ system, messages: history })
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.error || 'Error');
        text = data.text || 'No pude responder ahora.';
      }
      setMessages((m) => [...m, { role: 'ia', text }]);
    } catch (e) {
      setMessages((m) => [...m, { role: 'ia', text: 'Tuve un problema para responder: ' + (e.message || 'reformula la pregunta') }]);
    }
    setBusy(false);
  }

  return (
    <>
      <div className="top-bar">
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <div style={{width:34,height:34,borderRadius:'50%',background:'var(--teal-pale)',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <Icon.User style={{width:16,height:16,color:'var(--teal)'}}/>
          </div>
          <div>
            <div style={{fontSize:13,fontWeight:500}}>Dr. IA Dental</div>
            <div className="small" style={{color:'var(--teal-light)'}}>experto odontológico · siempre disponible</div>
          </div>
        </div>
        <button className="avatar" onClick={() => setRoute('account')}>{(session.name||'U').split(' ').map(p=>p[0]).slice(0,2).join('')}</button>
      </div>

      <div className="chat-area" ref={scrollRef}>
        {messages.map((m, i) => (
          <React.Fragment key={i}>
            {m.role === 'ia' ? <div className="ia-label">Dr. IA Dental</div> : null}
            <div className={m.role === 'ia' ? 'ia-bubble' : 'user-bubble'}
                 dangerouslySetInnerHTML={{__html: formatMd(m.text)}}/>
          </React.Fragment>
        ))}
        {busy ? <div className="ia-bubble" style={{display:'flex',gap:6,alignItems:'center'}}>
          <span className="spinner dark"/> <span className="small muted">Pensando…</span>
        </div> : null}
        {!busy && messages.length <= 2 ? (
          <div className="suggest-row" style={{marginTop:6}}>
            {suggestions.map((s, i) => (
              <button key={i} className="suggest-chip" onClick={() => send(s)}>{s}</button>
            ))}
          </div>
        ) : null}
      </div>

      <div className="chat-input-row">
        <input className="chat-input" placeholder="Pregunta al tutor IA..."
               value={draft}
               onChange={(e) => setDraft(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') send(); }}/>
        <button className="send-btn" disabled={busy || !draft.trim()} onClick={() => send()}>
          {busy ? <span className="spinner"/> : <Icon.Send style={{width:14,height:14,color:'#fff'}}/>}
        </button>
      </div>
    </>
  );
}

// Minimal markdown: **bold** + line breaks
function formatMd(s) {
  const esc = (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  return esc
    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
    .replace(/\*(.+?)\*/g,'<em>$1</em>')
    .replace(/\n/g,'<br/>');
}

Object.assign(window, { TutorScreen });