// integrations-pages.jsx — заглушки інтеграцій

function IntegrationStubPage({ kind }) {
  const data = {
    calendar: {
      title: "Google Calendar",
      icon: "📅",
      tagline: "синхронізація задач, виїздів, відпусток",
      status: "connected",
      since: "12.03.2025",
      lastSync: "сьогодні 14:30",
      what: [
        "Задачі з часовим вікном (виїзди, наради) → події в календарі",
        "Відпустки і лікарняні → блокують слоти команди",
        "Дедлайни об'єктів → нагадування за 7/3/1 дн",
        "Можна підключити особистий календар кожного співробітника",
      ],
      stats: [
        { label: "Подій синхронізовано", val: "248" },
        { label: "Підключено календарів", val: "5" },
        { label: "Конфліктів цього тижня", val: "0", color: "var(--c-green-deep)" },
      ],
    },
    diia: {
      title: "Дія.Підпис (КЕП)",
      icon: "✍️",
      tagline: "електронне підписання документів",
      status: "connected",
      since: "01.06.2025",
      lastSync: "вчора 18:42",
      what: [
        "Підписання наказів, договорів, актів КЕП-ключем",
        "Підписи фіксуються з ЄДРПОУ та печаткою часу",
        "Запит підпису у замовника через email-посилання",
        "Архів підписаних документів з відмітками часу",
      ],
      stats: [
        { label: "Підписано документів", val: "127" },
        { label: "У черзі на підпис", val: "4", color: "var(--late)" },
        { label: "Очікують підпис замовника", val: "2" },
      ],
    },
    bank: {
      title: "Банк (monobank)",
      icon: "🏦",
      tagline: "виплати, виписки, баланси",
      status: "connected",
      since: "15.01.2024",
      lastSync: "сьогодні 14:32",
      what: [
        "Реальні баланси по рахунках (оновлення кожні 5 хв)",
        "Виписки → автоматичне розпізнавання надходжень від клієнтів",
        "Платежі по реєстру виплат → відправка в банк одним кліком",
        "Звірка фактичних оплат з графіком договорів",
      ],
      stats: [
        { label: "Транзакцій цього місяця", val: "47" },
        { label: "Загальний баланс", val: "1.6 млн ₴", color: "var(--c-green-deep)" },
        { label: "Платежів у черзі", val: "5" },
      ],
    },
    edessb: {
      title: "ЄДЕССБ",
      icon: "🏛",
      tagline: "Єдина державна електронна система у сфері будівництва",
      status: "manual",
      since: "—",
      lastSync: "потребує ручної реєстрації",
      what: [
        "Реєстрація проєктної документації за класами СС1, СС2, СС3",
        "Подача документів через КЕП ГІПа і автора проєкту",
        "Відстеження статусу: подано → перевірка → зареєстровано",
        "Зберігання квитанцій про реєстрацію",
      ],
      stats: [
        { label: "Зареєстровано проєктів", val: "12" },
        { label: "У процесі", val: "3" },
        { label: "Сер. час реєстрації", val: "8 днів" },
      ],
      note: "Офіційного API ЄДЕССБ для ERP-інтеграцій поки немає. Працюємо через веб-кабінет з функцією експорту в систему.",
    },
    telegram: {
      title: "Telegram-бот",
      icon: "💬",
      tagline: "нагадування і сповіщення команді",
      status: "connected",
      since: "10.02.2026",
      lastSync: "сьогодні 14:35",
      what: [
        "Ранкові сповіщення о 8:30: «Сьогодні у тебе 4 задачі»",
        "Алерти про прострочення задач / прострочені рахунки замовнику",
        "Сповіщення про затвердження відпустки",
        "Команді — про зміни статусів задач (через @bot)",
      ],
      stats: [
        { label: "Підключено співробітників", val: "5 з 5" },
        { label: "Сповіщень за тиждень", val: "84" },
        { label: "Відкритість повідомлень", val: "97%", color: "var(--c-green-deep)" },
      ],
    },
    vchasno: {
      title: "Vchasno",
      icon: "📄",
      tagline: "електронний документообіг з контрагентами",
      status: "connected",
      since: "20.10.2024",
      lastSync: "сьогодні 13:18",
      what: [
        "Обмін актами, накладними, рахунками з замовниками",
        "Автоматичне отримання документів від постачальників (Київенерго, Київгаз, monobank)",
        "Підписання через КЕП директора · юридично значимо",
        "Архів усіх документів у хмарі · доступ 7 років",
      ],
      stats: [
        { label: "Документів обмінено", val: "184" },
        { label: "Очікують підпису", val: "3", color: "var(--late)" },
        { label: "Контрагентів у системі", val: "21" },
      ],
    },
    prozorro: {
      title: "Prozorro",
      icon: "🎯",
      tagline: "моніторинг державних тендерів",
      status: "connected",
      since: "05.03.2025",
      lastSync: "сьогодні 14:00",
      what: [
        "Автоматичний моніторинг нових тендерів за категоріями: «проєктні роботи», «архітектура»",
        "Фільтри по регіону, бюджету, замовнику, класу СС",
        "Сповіщення про нові цікаві лоти у Telegram",
        "Подача тендерних пропозицій з ERP (без переходу на сайт)",
        "Аналіз конкурентів — хто скільки запропонував",
      ],
      stats: [
        { label: "Тендерів моніториться", val: "47" },
        { label: "Подано пропозицій (рік)", val: "12" },
        { label: "Виграно", val: "3", color: "var(--c-green-deep)" },
      ],
    },
    tax: {
      title: "ДПС · Електронний кабінет",
      icon: "🏛",
      tagline: "податкова звітність ФОП/ТОВ",
      status: "manual",
      since: "—",
      lastSync: "квартальна подача · 20 числа",
      what: [
        "Подача декларації ФОП 3 групи (5%) щокварталу",
        "Сплата єдиного податку (1,5% від доходу) і ЄСВ",
        "Звіт по ПДВ (якщо платник)",
        "Звіт 1ДФ — про доходи фізосіб (виплати співробітникам, ЦПХ)",
        "Формування платіжних доручень в один клік",
      ],
      stats: [
        { label: "Декларацій подано (рік)", val: "1 з 4" },
        { label: "Наступна звітність", val: "20.07.2026" },
        { label: "Сплачено податків (рік)", val: "272 000 ₴" },
      ],
      note: "Офіційного API в ДПС немає — інтеграція через експорт XML-файлів за форматами Cabinet ДПС.",
    },
    maps: {
      title: "Google Maps",
      icon: "🗺",
      tagline: "об'єкти на мапі · маршрути · геолокація виїздів",
      status: "connected",
      since: "01.04.2025",
      lastSync: "—",
      what: [
        "Усі об'єкти на інтерактивній мапі — портфель команди",
        "Розрахунок маршрутів виїзду на об'єкт (км, час)",
        "Автоматичне обчислення витрат на пальне за маршрутом",
        "Геолокація фотофіксації виїздів — куди саме виїжджали",
        "Координати у договорі та звітах замовнику",
      ],
      stats: [
        { label: "Об'єктів на мапі", val: "4" },
        { label: "Виїздів цього місяця", val: "12" },
        { label: "Сер. відстань", val: "23 км" },
      ],
    },
    ai: {
      title: "AI-асистент (Claude / GPT)",
      icon: "🤖",
      tagline: "генерація текстів, аналіз документів",
      status: "connected",
      since: "15.01.2026",
      lastSync: "—",
      what: [
        "Генерація ТЗ за описом проєкту",
        "Аналіз тендерної документації — швидке вилучення ключових вимог",
        "Підготовка текстів для звітів замовнику",
        "Перевірка ДБН і будівельних норм на запитання",
        "Підказки що пишемо в нотатках до задач",
        "Швидкий пошук по архіву проєктів",
      ],
      stats: [
        { label: "Запитів за місяць", val: "324" },
        { label: "Економія часу", val: "~18 год", color: "var(--c-green-deep)" },
        { label: "Модель", val: "Claude 4.5" },
      ],
      note: "Працює через офіційні API. Дані компанії не зберігаються провайдером — корпоративний режим.",
    },
  }[kind];

  if (!data) return <div className="page">Невідома інтеграція</div>;

  return (
    <div className="page">
      <div className="page-head" style={{display: "flex", alignItems: "center", gap: 20}}>
        <div className="drive-status-icon" style={{width: 64, height: 64, fontSize: 32, borderRadius: 14, border: "1px solid var(--line)"}}><window.Ico e={data.icon} /></div>
        <div>
          <h1 className="page-h1" style={{margin: 0}}>{data.title}</h1>
          <div className="page-sub" style={{marginTop: 6}}>
            <span>{data.tagline}</span>
            <span className="dot"></span>
            {data.status === "connected"
              ? <span style={{color: "var(--c-green-deep)"}}>підключено з {data.since}</span>
              : data.status === "manual"
                ? <span style={{color: "var(--ink-3)"}}>ручний режим</span>
                : <span style={{color: "var(--late)"}}>не підключено</span>
            }
          </div>
        </div>
        <div style={{marginLeft: "auto", display: "flex", gap: 8}}>
          {data.status === "connected"
            ? <><span className="status-tag tone-live">активна</span><button className="btn">Налаштування</button></>
            : <button className="btn btn-primary">Підключити</button>
          }
        </div>
      </div>

      <div className="kpi-row" style={{gridTemplateColumns: `repeat(${data.stats.length}, 1fr)`}}>
        {data.stats.map((s, i) => (
          <div key={i} className="kpi">
            <div className="kpi-label">{s.label}</div>
            <div className="kpi-value" style={{color: s.color || "var(--ink)"}}>{s.val}</div>
          </div>
        ))}
      </div>

      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Що ця інтеграція дає</h2>
        </div>
        <ul className="report-list" style={{gap: 10}}>
          {data.what.map((w, i) => <li key={i} style={{listStyle: "none", display: "flex", gap: 10, fontSize: 14}}>
            <span style={{color: "var(--accent)", flexShrink: 0}}>✓</span>
            <span>{w}</span>
          </li>)}
        </ul>
      </section>

      {data.note && (
        <div className="hint-box" style={{marginTop: 16}}>
          <b>Зауваження:</b> {data.note}
        </div>
      )}

      {data.lastSync && data.status === "connected" && (
        <div style={{marginTop: 24, padding: "12px 16px", background: "var(--bg-sunken)", borderRadius: 8, fontSize: 12.5, color: "var(--ink-3)", display: "flex", justifyContent: "space-between"}}>
          <span>Остання синхронізація: <b style={{color: "var(--ink-2)"}}>{data.lastSync}</b></span>
          <button className="btn btn-ghost" style={{padding: "2px 8px", fontSize: 12}}>Синхронізувати зараз</button>
        </div>
      )}
    </div>
  );
}

window.IntegrationStubPage = IntegrationStubPage;