// ============================================================
// AI Chat Widget — всплывающее окошко над "Добавить виджет"
// ============================================================

const { useState, useEffect, useRef, useCallback } = React;

const API_URL = window.SMM_API_URL || 'https://eurolos-dashboard-api.olesyazvezdneva.workers.dev';
const HISTORY_KEY = 'smm-ai-chat-history';
const MAX_HISTORY = 20;

const SUGGESTIONS = [
  'Что лучше всего работает за последний месяц?',
  'Где мы недорабатываем?',
  'Какие посты повторить?',
  'Что публиковать дальше?',
];

// ============================================================
// Простой markdown-рендер — без сторонних библиотек
// Поддерживает: **жирный**, *курсив*, абзацы, маркированные списки, ссылки
// ============================================================
function renderMarkdown(text) {
  if (!text) return null;
  // Нормализуем переносы
  const normalized = text.replace(/\r\n/g, '\n').replace(/\n{3,}/g, '\n\n');

  // Парсим на блоки по пустым строкам
  const blocks = normalized.split(/\n\n+/);

  return blocks.map((block, blockIdx) => {
    const trimmed = block.trim();
    if (!trimmed) return null;

    // Список (строки начинаются с -, *, • или цифры с точкой)
    const lines = trimmed.split('\n');
    const isList = lines.every((l) => /^\s*([-*•]|\d+[.)])\s/.test(l));

    if (isList) {
      return (
        <ul key={blockIdx} className="ai-md-list">
          {lines.map((line, i) => {
            const item = line.replace(/^\s*([-*•]|\d+[.)])\s+/, '');
            return <li key={i}>{renderInline(item)}</li>;
          })}
        </ul>
      );
    }

    // Обычный абзац — переносы внутри сохраняем через <br/>
    const segments = lines.map((line, i) => (
      <React.Fragment key={i}>
        {i > 0 && <br />}
        {renderInline(line)}
      </React.Fragment>
    ));

    return <p key={blockIdx} className="ai-md-p">{segments}</p>;
  });
}

// Inline: **bold**, *italic*
function renderInline(text) {
  const parts = [];
  let lastIndex = 0;
  // Регекс ловит **bold** или *italic* (минимально жадный)
  const regex = /\*\*(.+?)\*\*|\*(.+?)\*/g;
  let m;
  let key = 0;
  while ((m = regex.exec(text)) !== null) {
    if (m.index > lastIndex) {
      parts.push(text.slice(lastIndex, m.index));
    }
    if (m[1] !== undefined) {
      parts.push(<strong key={`s${key++}`}>{m[1]}</strong>);
    } else if (m[2] !== undefined) {
      parts.push(<em key={`s${key++}`}>{m[2]}</em>);
    }
    lastIndex = m.index + m[0].length;
  }
  if (lastIndex < text.length) {
    parts.push(text.slice(lastIndex));
  }
  return parts.length ? parts : text;
}

function AIChat() {
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // История из localStorage (только UI; на бэк идёт пачка свежих сообщений)
  const [messages, setMessages] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]');
      if (Array.isArray(saved)) return saved;
    } catch {}
    return [];
  });

  const scrollRef = useRef(null);
  const inputRef = useRef(null);

  // Автоскролл вниз при новых сообщениях
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, loading]);

  // Фокус на input при открытии
  useEffect(() => {
    if (open && inputRef.current) {
      setTimeout(() => inputRef.current?.focus(), 100);
    }
  }, [open]);

  // Сохраняем историю
  useEffect(() => {
    try {
      const trimmed = messages.slice(-MAX_HISTORY);
      localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
    } catch {}
  }, [messages]);

  // Собираем актуальный контекст дашборда
  const buildContext = useCallback(() => {
    const data = window.SMM_DATA || {};
    const platform = (typeof window !== 'undefined' && localStorage.getItem('smm-platform')) || 'all';
    const period = window.SMM_PERIOD || '30d';

    const ctx = {
      period,
      platform,
      kpi: data.KPI || null,
      posts: data.POSTS || null,
      gender: platform !== 'all' && data.GENDER ? data.GENDER[platform] : null,
      age: platform !== 'all' && data.AGE ? data.AGE[platform] : null,
      geo: platform !== 'all' && data.GEO ? data.GEO[platform] : null,
      notifications: window.SMM_NOTIFICATIONS || null,
    };
    return ctx;
  }, []);

  const sendMessage = async (text) => {
    const userMsg = { role: 'user', content: text, ts: Date.now() };
    const nextMessages = [...messages, userMsg];
    setMessages(nextMessages);
    setInput('');
    setLoading(true);
    setError(null);

    try {
      // Отправляем последние 10 сообщений (без timestamp)
      const lastMessages = nextMessages.slice(-10).map(m => ({ role: m.role, content: m.content }));
      const context = buildContext();

      const res = await fetch(API_URL + '/api/ai/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: lastMessages, context }),
      });
      const data = await res.json().catch(() => null);
      if (!data) {
        console.error('[ai-chat] non-JSON response, status:', res.status);
        setError(`Сервер вернул ${res.status} без JSON`);
        return;
      }
      if (!data.ok) {
        const detail = data.detail ? `: ${data.detail.slice(0, 200)}` : '';
        console.error('[ai-chat] error:', data);
        setError(`${data.error || 'Ошибка'}${detail}`);
      } else {
        const reply = data.reply || '(пустой ответ)';
        setMessages([...nextMessages, { role: 'assistant', content: reply, ts: Date.now() }]);
      }
    } catch (e) {
      console.error('[ai-chat] network error:', e);
      setError(`Сеть: ${e.message || 'не удалось связаться с сервером'}`);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = (e) => {
    if (e) e.preventDefault();
    const text = input.trim();
    if (!text || loading) return;
    sendMessage(text);
  };

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

  return (
    <>
      <button
        className={`ai-chat-fab ${open ? 'open' : ''}`}
        onClick={() => setOpen(v => !v)}
        title={open ? 'Свернуть' : 'Спросить AI'}
        aria-label="AI ассистент"
      >
        {open ? (
          <i className="fas fa-chevron-down"></i>
        ) : (
          <>
            <i className="fas fa-sparkles"></i>
            <span>AI</span>
          </>
        )}
      </button>

      {open && (
        <div className="ai-chat-panel">
          <div className="ai-chat-head">
            <div className="ai-chat-title">
              <div className="ai-chat-dot"></div>
              <div>
                <div className="ai-chat-name">AI Ассистент</div>
                <div className="ai-chat-sub">Анализирует ваши данные</div>
              </div>
            </div>
            <div className="ai-chat-actions">
              <button className="ai-icon-btn" onClick={() => setOpen(false)} title="Свернуть">
                <i className="fas fa-chevron-down" style={{ fontSize: 13 }}></i>
              </button>
            </div>
          </div>

          <div className="ai-chat-scroll" ref={scrollRef}>
            {messages.length === 0 && (
              <div className="ai-chat-welcome">
                <div className="ai-welcome-icon">
                  <i className="fas fa-sparkles"></i>
                </div>
                <div className="ai-welcome-title">Чем могу помочь?</div>
                <div className="ai-welcome-sub">
                  Я вижу метрики ваших соцсетей в реальном времени и могу анализировать их.
                </div>
                <div className="ai-suggestions">
                  {SUGGESTIONS.map((s, i) => (
                    <button
                      key={i}
                      className="ai-suggestion"
                      onClick={() => sendMessage(s)}
                      disabled={loading}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {messages.map((m, i) => (
              <div key={i} className={`ai-msg ${m.role}`}>
                {m.role === 'assistant' && (
                  <div className="ai-msg-avatar">
                    <i className="fas fa-sparkles" style={{ fontSize: 10 }}></i>
                  </div>
                )}
                <div className="ai-msg-bubble">
                  {m.role === 'assistant' ? renderMarkdown(m.content) : m.content}
                </div>
              </div>
            ))}

            {loading && (
              <div className="ai-msg assistant">
                <div className="ai-msg-avatar">
                  <i className="fas fa-sparkles" style={{ fontSize: 10 }}></i>
                </div>
                <div className="ai-msg-bubble ai-msg-loading">
                  <span></span><span></span><span></span>
                </div>
              </div>
            )}

            {error && (
              <div className="ai-msg-error">
                <i className="fas fa-exclamation-circle"></i> {error}
              </div>
            )}
          </div>

          <form className="ai-chat-input" onSubmit={handleSubmit}>
            <textarea
              ref={inputRef}
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Спросите о ваших метриках..."
              rows={1}
              disabled={loading}
            />
            <button type="submit" disabled={!input.trim() || loading} className="ai-send-btn">
              <i className="fas fa-arrow-up"></i>
            </button>
          </form>
        </div>
      )}
    </>
  );
}

window.AIChat = AIChat;