/* global React */
(function () {
  const { useState, useEffect, useRef, useCallback, memo } = React;
  const T   = window.SC_T;
  const Api = window.SC_Api;

  const LIMITS = {
    yandex_title:  56,
    yandex_title2: 56,
    yandex_desc:   81,
    google_title1: 30,
    google_desc1:  90,
  };

  const EMPTY_SET = new Set();

  const COLS = [
    { field: 'yandex_title',  label: 'Заголовок 1', group: 'yandex' },
    { field: 'yandex_title2', label: 'Заголовок 2', group: 'yandex' },
    { field: 'yandex_desc',   label: 'Текст',        group: 'yandex' },
    { field: 'google_title1', label: 'Заголовок',    group: 'google' },
    { field: 'google_desc1',  label: 'Описание',     group: 'google' },
  ];

  // ── Ячейка редактирования ─────────────────────────────────────────────────

  const AdCell = memo(function AdCell({ field, value, saving, onChange }) {
    const limit = LIMITS[field];
    const over  = (value || '').length > limit;
    const isLong = limit >= 81;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '8px 10px', minWidth: 0 }}>
        <div style={{ position: 'relative' }}>
          {isLong ? (
            <textarea
              value={value || ''}
              onChange={(e) => onChange(field, e.target.value)}
              rows={2}
              style={{
                width: '100%', fontFamily: 'inherit', fontSize: 12,
                border: `1px solid ${over ? T.err : T.border}`, borderRadius: 5,
                padding: '5px 7px', background: T.bg, color: T.ink,
                outline: 'none', resize: 'vertical', lineHeight: 1.4,
                transition: 'border-color .15s',
              }}
            />
          ) : (
            <input
              type="text"
              value={value || ''}
              onChange={(e) => onChange(field, e.target.value)}
              style={{
                width: '100%', fontFamily: 'inherit', fontSize: 12,
                border: `1px solid ${over ? T.err : T.border}`, borderRadius: 5,
                padding: '5px 7px', background: T.bg, color: T.ink,
                outline: 'none', transition: 'border-color .15s',
              }}
            />
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6, minHeight: 14 }}>
          {over ? (
            <span style={{ fontSize: 10, color: T.err, fontWeight: 600 }}>слишком много символов</span>
          ) : saving ? (
            <span style={{ fontSize: 10, color: T.inkSubtle }}>сохраняется…</span>
          ) : null}
          <span style={{
            fontSize: 10, flexShrink: 0,
            fontVariantNumeric: 'tabular-nums',
            color: over ? T.err : (value || '').length >= limit * 0.85 ? T.warn : T.inkSubtle,
          }}>
            {(value || '').length}/{limit}
          </span>
        </div>
      </div>
    );
  });

  // ── Строка фразы ─────────────────────────────────────────────────────────

  const PhraseRow = memo(function PhraseRow({
    index, phrase, ad, status, savingFields, globalUrl, useCustomUrl, onFieldChange, onCustomUrlToggle,
  }) {
    const [hover, setHover] = useState(false);

    const statusColor = status === 'done' ? T.ok : status === 'generating' ? T.accent : T.inkSubtle;
    const rowBg = hover ? '#EDEFF2' : '#F8F9FB';

    const handleChange = useCallback(
      (field, value) => onFieldChange(phrase, field, value),
      [phrase, onFieldChange],
    );

    const handleUrlToggle = useCallback((e) => {
      onCustomUrlToggle(phrase, e.target.checked);
    }, [phrase, onCustomUrlToggle]);

    const effectiveUrl = useCustomUrl ? (ad?.url || '') : globalUrl;

    return (
      <tr
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ borderBottom: `1px solid ${T.border}`, transition: 'background .1s' }}
      >
        {/* # */}
        <td style={{
          padding: '0 6px', textAlign: 'center', verticalAlign: 'middle',
          fontSize: 11, fontVariantNumeric: 'tabular-nums', color: T.inkSubtle,
          position: 'sticky', left: 0, zIndex: 2,
          background: hover ? '#EAECF0' : T.borderSoft,
          borderRight: `1px solid ${T.border}`, transition: 'background .1s',
          userSelect: 'none',
        }}>
          {index}
        </td>

        {/* Фраза + URL */}
        <td style={{
          padding: '8px 12px', fontSize: 12.5, fontWeight: 500, color: T.ink,
          verticalAlign: 'middle', position: 'sticky', left: 44, zIndex: 1,
          background: hover ? '#F3F4F6' : T.surface, minWidth: 180, maxWidth: 240,
          borderRight: `1px solid ${T.border}`, transition: 'background .1s',
        }}>
          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{phrase}</div>
          <div style={{ fontSize: 10, color: statusColor, marginTop: 2 }}>
            {status === 'done' ? '✓ готово' : status === 'generating' ? '⟳ генерируется…' : '— ожидает'}
          </div>
          {/* URL */}
          <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer', userSelect: 'none' }}>
              <input
                type="checkbox"
                checked={useCustomUrl}
                onChange={handleUrlToggle}
                style={{ cursor: 'pointer', accentColor: T.accent }}
              />
              <span style={{ fontSize: 10, color: T.inkMuted }}>Своя ссылка</span>
            </label>
            {useCustomUrl ? (
              <input
                type="url"
                value={ad?.url || ''}
                onChange={(e) => handleChange('url', e.target.value)}
                placeholder="https://…"
                style={{
                  width: '100%', fontFamily: 'inherit', fontSize: 11,
                  border: `1px solid ${T.border}`, borderRadius: 4,
                  padding: '3px 6px', background: T.bg, color: T.ink, outline: 'none',
                }}
              />
            ) : globalUrl ? (
              <div style={{
                fontSize: 10, color: T.inkSubtle, overflow: 'hidden',
                textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }} title={globalUrl}>{globalUrl}</div>
            ) : (
              <div style={{ fontSize: 10, color: T.inkSubtle, fontStyle: 'italic' }}>ссылка не задана</div>
            )}
          </div>
        </td>

        {COLS.map(({ field }) => (
          <td key={field} style={{
            verticalAlign: 'top', borderRight: `1px solid ${T.border}`,
            minWidth: field.includes('desc') ? 200 : 150,
            background: rowBg, transition: 'background .1s',
          }}>
            <AdCell
              field={field}
              value={ad?.[field] || ''}
              saving={savingFields.has(field)}
              onChange={handleChange}
            />
          </td>
        ))}
      </tr>
    );
  });

  // ── Главный компонент ─────────────────────────────────────────────────────

  function AdGenScreen({ jobId, phrases, onBack }) {
    const [prompt, setPrompt]         = useState('');
    const [globalUrl, setGlobalUrl]   = useState('');
    const [ads, setAds]               = useState({});
    const [statuses, setStatuses]     = useState({});
    const [generating, setGenerating] = useState(false);
    const [progress, setProgress]     = useState({ done: 0, total: 0 });
    const [savingFields, setSavingFields] = useState({});
    const [startFrom, setStartFrom]   = useState(1);
    const [customUrls, setCustomUrls] = useState(new Set());

    const adsRef        = useRef({});
    const saveTimers    = useRef({});
    const urlSaveTimer  = useRef(null);
    const abortRef      = useRef(null);

    useEffect(() => {
      if (!jobId) return;
      Promise.all([
        Api.getJson(`/api/job/${jobId}/ads`),
        Api.getJson(`/api/job/${jobId}`),
      ]).then(([adsData, jobData]) => {
        const map = {}, st = {}, customSet = new Set();
        adsData.forEach((a) => {
          map[a.phrase] = a;
          st[a.phrase] = 'done';
          if (a.url) customSet.add(a.phrase);
        });
        setAds(map); adsRef.current = map; setStatuses(st); setCustomUrls(customSet);
        if (jobData.global_url) setGlobalUrl(jobData.global_url);
      }).catch(() => {});
    }, [jobId]);

    const stopGeneration = useCallback(() => {
      if (abortRef.current) abortRef.current.abort();
    }, []);

    const handleGlobalUrlChange = useCallback((val) => {
      setGlobalUrl(val);
      if (urlSaveTimer.current) clearTimeout(urlSaveTimer.current);
      urlSaveTimer.current = setTimeout(() => {
        Api.patchJson(`/api/job/${jobId}/global-url`, { global_url: val }).catch(() => {});
      }, 1500);
    }, [jobId]);

    const startGeneration = useCallback(async () => {
      const from = Math.max(1, Math.min(phrases.length, startFrom || 1));
      const toGenerate = phrases.slice(from - 1);
      if (!prompt.trim() || generating || !toGenerate.length) return;

      setGenerating(true);
      setProgress({ done: 0, total: toGenerate.length });

      setStatuses((prev) => {
        const next = { ...prev };
        toGenerate.forEach((p) => { next[p] = 'generating'; });
        return next;
      });

      const controller = new AbortController();
      abortRef.current = controller;

      const token = localStorage.getItem('sc_token') || '';
      try {
        const resp = await fetch(`/api/job/${jobId}/ads/generate`, {
          method: 'POST',
          headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
          body: JSON.stringify({ phrases: toGenerate, prompt }),
          signal: controller.signal,
        });
        if (!resp.ok) { setGenerating(false); return; }

        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          buffer = lines.pop();
          for (const line of lines) {
            if (!line.startsWith('data: ')) continue;
            const data = JSON.parse(line.slice(6));
            if (data.done) continue;
            const { phrase, ...adData } = data;
            setAds((prev) => {
              const next = { ...prev, [phrase]: { ...(prev[phrase] || {}), ...adData } };
              adsRef.current = next;
              return next;
            });
            setStatuses((prev) => ({ ...prev, [phrase]: 'done' }));
            setProgress((prev) => ({ ...prev, done: prev.done + 1 }));
          }
        }
      } catch (e) {
        if (e.name !== 'AbortError') console.error('Ad generation error:', e);
        setStatuses((prev) => {
          const next = { ...prev };
          Object.keys(next).forEach((p) => { if (next[p] === 'generating') next[p] = 'pending'; });
          return next;
        });
      } finally {
        abortRef.current = null;
        setGenerating(false);
      }
    }, [jobId, phrases, prompt, generating, startFrom]);

    const handleFieldChange = useCallback((phrase, field, value) => {
      setAds((prev) => {
        const next = { ...prev, [phrase]: { ...(prev[phrase] || {}), [field]: value } };
        adsRef.current = next;
        return next;
      });

      const key = `${phrase}\x00${field}`;
      if (saveTimers.current[key]) clearTimeout(saveTimers.current[key]);

      const limit = LIMITS[field];
      if (limit && (value || '').length > limit) return;

      saveTimers.current[key] = setTimeout(async () => {
        setSavingFields((prev) => {
          const set = new Set(prev[phrase] || []);
          set.add(field);
          return { ...prev, [phrase]: set };
        });
        const current = adsRef.current[phrase] || {};
        try { await Api.patchJson(`/api/job/${jobId}/ads`, { phrase, ...current }); } catch {}
        setSavingFields((prev) => {
          const set = new Set(prev[phrase] || []);
          set.delete(field);
          return { ...prev, [phrase]: set };
        });
        delete saveTimers.current[key];
      }, 2000);
    }, [jobId]);

    const handleCustomUrlToggle = useCallback((phrase, checked) => {
      setCustomUrls((prev) => {
        const next = new Set(prev);
        if (checked) next.add(phrase); else next.delete(phrase);
        return next;
      });
      if (!checked) handleFieldChange(phrase, 'url', '');
    }, [handleFieldChange]);

    const total    = phrases.length;
    const fromIdx  = Math.max(1, Math.min(total, startFrom || 1));
    const genCount = total - fromIdx + 1;
    const done     = progress.done;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>

        {/* Top bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 20px', borderBottom: `1px solid ${T.border}`,
          background: T.surface, flexShrink: 0,
        }}>
          <button onClick={onBack} style={{
            border: `1px solid ${T.border}`, background: T.bg, borderRadius: 8,
            padding: '6px 14px', fontSize: 13, color: T.inkMuted,
            cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6,
          }}>← Назад</button>
          <span style={{ fontSize: 14, fontWeight: 600, color: T.ink, flex: 1 }}>Генератор рекламы</span>
          {generating && (
            <span style={{ fontSize: 12, color: T.inkMuted }}>{done} / {progress.total} фраз</span>
          )}
        </div>

        {/* Prompt + Global URL */}
        <div style={{
          padding: '14px 20px', borderBottom: `1px solid ${T.border}`,
          background: T.surface, flexShrink: 0,
        }}>
          {/* Промпт */}
          <div style={{ fontSize: 12, fontWeight: 600, color: T.inkMuted, marginBottom: 6 }}>
            Промпт — опишите продукт или услугу для ИИ:
          </div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
            <textarea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              placeholder="Например: интернет-магазин диванов. Бесплатная доставка по Москве."
              rows={2}
              style={{
                flex: 1, fontFamily: 'inherit', fontSize: 13,
                border: `1px solid ${T.border}`, borderRadius: 8,
                padding: '8px 12px', background: T.bg, color: T.ink,
                outline: 'none', resize: 'vertical', lineHeight: 1.5,
              }}
            />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
              <button
                onClick={generating ? stopGeneration : startGeneration}
                disabled={!generating && (!prompt.trim() || !total)}
                style={{
                  border: 'none', borderRadius: 8, padding: '0 20px', height: 40,
                  background: generating
                    ? '#DC2626'
                    : (!prompt.trim() || !total) ? T.borderSoft : T.accent,
                  color: (!generating && (!prompt.trim() || !total)) ? T.inkSubtle : '#fff',
                  fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
                  cursor: (!generating && (!prompt.trim() || !total)) ? 'not-allowed' : 'pointer',
                  whiteSpace: 'nowrap', transition: 'background .15s',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}
              >
                {generating ? (
                  '⏹ Остановить'
                ) : (
                  <>
                    Сгенерировать
                    <span style={{
                      background: 'rgba(255,255,255,.2)', borderRadius: 5,
                      padding: '1px 7px', fontSize: 11, fontWeight: 700,
                    }}>{genCount}</span>
                  </>
                )}
              </button>
              {!generating && total > 0 && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, justifyContent: 'flex-end' }}>
                  <span style={{ fontSize: 11, color: T.inkSubtle, whiteSpace: 'nowrap' }}>с фразы</span>
                  <input
                    type="number" min={1} max={total} value={startFrom}
                    onChange={(e) => setStartFrom(Math.max(1, Math.min(total, parseInt(e.target.value) || 1)))}
                    style={{
                      width: 52, fontFamily: 'inherit', fontSize: 12,
                      border: `1px solid ${T.border}`, borderRadius: 6,
                      padding: '3px 6px', background: T.bg, color: T.ink,
                      outline: 'none', textAlign: 'center',
                    }}
                  />
                  <span style={{ fontSize: 11, color: T.inkSubtle }}>/ {total}</span>
                </div>
              )}
            </div>
          </div>

          {/* Глобальный URL */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: T.inkMuted, whiteSpace: 'nowrap' }}>
              Ссылка для всех фраз:
            </span>
            <input
              type="url"
              value={globalUrl}
              onChange={(e) => handleGlobalUrlChange(e.target.value)}
              placeholder="https://example.com/?utm_source=yandex&utm_medium=cpc"
              style={{
                flex: 1, fontFamily: 'inherit', fontSize: 12,
                border: `1px solid ${T.border}`, borderRadius: 7,
                padding: '6px 10px', background: T.bg, color: T.ink, outline: 'none',
              }}
            />
          </div>

          {generating && total > 0 && (
            <div style={{ marginTop: 10 }}>
              <div style={{ height: 4, background: T.borderSoft, borderRadius: 99, overflow: 'hidden' }}>
                <div style={{
                  height: '100%', background: T.accent, borderRadius: 99,
                  width: `${progress.total ? (done / progress.total) * 100 : 0}%`,
                  transition: 'width .3s ease',
                }} />
              </div>
            </div>
          )}
        </div>

        {/* Table */}
        <div style={{ flex: 1, overflow: 'auto' }}>
          {phrases.length === 0 ? (
            <div style={{ textAlign: 'center', padding: 40, color: T.inkSubtle, fontSize: 13 }}>
              Нет фраз для генерации. Вернитесь к результатам.
            </div>
          ) : (
            <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
              <colgroup>
                <col style={{ width: 44 }} />
                <col style={{ width: 220 }} />
                <col style={{ width: 175 }} />
                <col style={{ width: 175 }} />
                <col style={{ width: 220 }} />
                <col style={{ width: 155 }} />
                <col style={{ width: 240 }} />
              </colgroup>
              <thead>
                <tr>
                  <th style={{
                    position: 'sticky', top: 0, left: 0, zIndex: 5,
                    background: '#EAECEF', borderBottom: `2px solid ${T.border}`,
                    borderRight: `1px solid ${T.border}`,
                    padding: '10px 6px', textAlign: 'center',
                    fontSize: 11, fontWeight: 600, color: T.inkMuted, letterSpacing: '0.04em',
                  }}>#</th>
                  <th style={{
                    position: 'sticky', top: 0, left: 44, zIndex: 4,
                    background: '#FAFBFC', borderBottom: `2px solid ${T.border}`,
                    borderRight: `1px solid ${T.borderSoft}`,
                    padding: '10px 12px', textAlign: 'left',
                    fontSize: 11, fontWeight: 600, color: T.inkMuted,
                    letterSpacing: '0.06em', textTransform: 'uppercase',
                  }}>Фраза / Ссылка</th>
                  {COLS.map(({ field, label, group }) => (
                    <th key={field} style={{
                      position: 'sticky', top: 0, zIndex: 3,
                      background: '#FAFBFC', borderBottom: `2px solid ${T.border}`,
                      borderRight: `1px solid ${T.borderSoft}`,
                      padding: '8px 10px', textAlign: 'left',
                      fontSize: 11, fontWeight: 600,
                    }}>
                      <div style={{
                        fontSize: 10, fontWeight: 700, marginBottom: 2,
                        color: group === 'yandex' ? T.accent : '#4285F4',
                        textTransform: 'uppercase', letterSpacing: '0.06em',
                      }}>
                        {group === 'yandex' ? 'Яндекс' : 'Google'}
                      </div>
                      <div style={{ color: T.inkMuted }}>{label}</div>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {phrases.map((phrase, i) => (
                  <PhraseRow
                    key={phrase}
                    index={i + 1}
                    phrase={phrase}
                    ad={ads[phrase] || {}}
                    status={statuses[phrase] || 'pending'}
                    savingFields={savingFields[phrase] || EMPTY_SET}
                    globalUrl={globalUrl}
                    useCustomUrl={customUrls.has(phrase)}
                    onFieldChange={handleFieldChange}
                    onCustomUrlToggle={handleCustomUrlToggle}
                  />
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    );
  }

  window.AdGenScreen = AdGenScreen;
})();