MapMil/centers/analytics/frontend/src/views/ParserBuilderView.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import {
  createProfileJob,
  fetchTargetFields,
  generateParserProfile,
  previewParserProfile,
  type HeuristicProfile,
  type TargetField,
} from "../api/parserBuilder";

const INTERVAL_OPTIONS = [
  { value: 900, label: "15 мин" },
  { value: 1800, label: "30 мин" },
  { value: 3600, label: "1 ч" },
  { value: 10800, label: "3 ч" },
  { value: 21600, label: "6 ч" },
  { value: 86400, label: "24 ч" },
];

const router = useRouter();

const samplePost = ref("");
const targetFields = ref<TargetField[]>([]);
const profile = ref<HeuristicProfile | null>(null);
const profileJson = ref("");
const previewFields = ref<Record<string, string> | null>(null);
const channel = ref("");
const limit = ref(100);
const intervalSeconds = ref(3600);

const loadingFields = ref(true);
const generating = ref(false);
const previewing = ref(false);
const saving = ref(false);
const error = ref("");
const success = ref("");

async function loadTargetFields() {
  loadingFields.value = true;
  try {
    const data = await fetchTargetFields();
    targetFields.value = data.fields;
    error.value = "";
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Не удалось загрузить целевые поля";
  } finally {
    loadingFields.value = false;
  }
}

function syncProfileFromJson(): HeuristicProfile | null {
  if (!profileJson.value.trim()) return null;
  try {
    const parsed = JSON.parse(profileJson.value) as HeuristicProfile;
    profile.value = parsed;
    error.value = "";
    return parsed;
  } catch {
    error.value = "Некорректный JSON профиля";
    return null;
  }
}

async function handleGenerate() {
  if (!samplePost.value.trim()) {
    error.value = "Вставьте образец поста";
    return;
  }
  generating.value = true;
  error.value = "";
  success.value = "";
  previewFields.value = null;
  try {
    const data = await generateParserProfile(samplePost.value);
    profile.value = data.profile;
    profileJson.value = JSON.stringify(data.profile, null, 2);
    success.value = "Профиль сгенерирован. Preview и runtime идут только по правилам — без LLM.";
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Ошибка генерации";
  } finally {
    generating.value = false;
  }
}

async function handlePreview() {
  const current = syncProfileFromJson();
  if (!current) {
    if (!error.value) error.value = "Сначала сгенерируйте профиль";
    return;
  }
  if (!samplePost.value.trim()) {
    error.value = "Нужен образец поста для preview";
    return;
  }
  previewing.value = true;
  error.value = "";
  try {
    const data = await previewParserProfile(samplePost.value, current);
    previewFields.value = data.fields;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Ошибка preview";
  } finally {
    previewing.value = false;
  }
}

async function handleCreate() {
  const current = syncProfileFromJson();
  if (!current) {
    if (!error.value) error.value = "Нужен профиль";
    return;
  }
  if (!channel.value.trim()) {
    error.value = "Укажите канал Telegram";
    return;
  }
  saving.value = true;
  error.value = "";
  success.value = "";
  try {
    const job = await createProfileJob({
      channel: channel.value.trim(),
      profile: current,
      sample_post: samplePost.value.trim() || undefined,
      limit: limit.value,
      interval_seconds: intervalSeconds.value,
      is_active: true,
    });
    success.value = `Парсер #${job.id} создан (extract_mode=profile).`;
    await router.push({ name: "parsers" });
  } catch (err) {
    error.value = err instanceof Error ? err.message : "Не удалось создать парсер";
  } finally {
    saving.value = false;
  }
}

onMounted(loadTargetFields);
</script>

<template>
  <div class="page">
    <h2 class="page-heading">Конструктор парсера</h2>
    <p class="intro">
      Вставьте образец структурированного поста → DeepSeek один раз построит статичный профиль правил.
      Дальше preview и парсинг канала идут только по профилю, без LLM на каждый пост.
    </p>

    <section class="card">
      <h3>Образец поста</h3>
      <textarea
        v-model="samplePost"
        class="sample-area"
        rows="12"
        placeholder="15.03.2024 Населённый пункт&#10;&#10;Описание события…&#10;&#10;48.123456, 37.654321&#10;#тема"
      />
      <div class="form-actions">
        <button
          type="button"
          class="btn btn-primary"
          :disabled="generating || !samplePost.trim()"
          @click="handleGenerate"
        >
          {{ generating ? "Генерация..." : "Сгенерировать парсер" }}
        </button>
        <button
          type="button"
          class="btn"
          :disabled="previewing || !profileJson.trim()"
          @click="handlePreview"
        >
          {{ previewing ? "Preview..." : "Preview" }}
        </button>
      </div>
    </section>

    <div class="grid-2">
      <section class="card">
        <h3>Целевая таблица <span class="muted">(Event / ingest)</span></h3>
        <p v-if="loadingFields" class="muted">Загрузка…</p>
        <div v-else class="table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                <th>Поле</th>
                <th>Тип</th>
                <th>Описание</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="field in targetFields" :key="field.name">
                <td><code>{{ field.name }}</code></td>
                <td>{{ field.type }}</td>
                <td>{{ field.description }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section class="card">
        <h3>Профиль (JSON)</h3>
        <p v-if="!profileJson" class="muted">Появится после генерации. Можно слегка поправить правила.</p>
        <textarea
          v-model="profileJson"
          class="profile-area"
          rows="16"
          :disabled="!profileJson && !profile"
          spellcheck="false"
        />
      </section>
    </div>

    <section v-if="previewFields" class="card">
      <h3>Preview строки</h3>
      <div class="table-wrap">
        <table class="admin-table">
          <thead>
            <tr>
              <th v-for="key in Object.keys(previewFields)" :key="key">{{ key }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td v-for="(val, key) in previewFields" :key="key" class="preview-cell">
                {{ val || "—" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    <section class="card">
      <h3>Создать Telegram-парсер</h3>
      <form class="admin-form" @submit.prevent="handleCreate">
        <div class="form-row">
          <label>
            Канал
            <input v-model="channel" type="text" placeholder="example_channel" required />
          </label>
          <label>
            Лимит batch
            <input v-model.number="limit" type="number" min="1" max="1000" />
          </label>
          <label>
            Интервал
            <select v-model.number="intervalSeconds">
              <option v-for="opt in INTERVAL_OPTIONS" :key="opt.value" :value="opt.value">
                {{ opt.label }}
              </option>
            </select>
          </label>
        </div>
        <div class="form-actions">
          <button
            type="submit"
            class="btn btn-primary"
            :disabled="saving || !profileJson.trim() || !channel.trim()"
          >
            {{ saving ? "Создание..." : "Создать парсер" }}
          </button>
        </div>
      </form>
    </section>

    <p v-if="error" class="form-error">{{ error }}</p>
    <p v-if="success" class="form-success">{{ success }}</p>
  </div>
</template>

<style scoped>
.intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  max-width: 72ch;
}

.sample-area,
.profile-area {
  width: 100%;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  line-height: 1.45;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 960px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.preview-cell {
  max-width: 180px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
}

.form-success {
  color: #2e7d32;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
</style>