"use client";

import { useState } from "react";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
import { BlockMetaBar, type SnapshotData } from "@/components/ui/BlockMetaBar";
import { type ChangelogEntry } from "@/components/ui/BlockChangelog";
import { ContactFormsBlock } from "@/components/blocks/ContactFormsBlock";

const BLOCK_PATH = "/blocks/contact-forms";

const LLM_FORMS_TEXT = `
БЛОК: Формы записи и обратной связи
Источник: perm.oclinica.ru/lor — два блока форм на одной странице
Версия: v1.2

ФОРМА 1: «Будьте здоровы!» (форма записи на приём)
  Позиция: после блока отзывов
  Заголовок H2: «Будьте здоровы!» — 36px, bold, #000000, line-height 38px
  Подзаголовок: «Запишитесь на приём к врачу!»
  Фон секции: #d4f6f8 (светло-бирюзовый)
  Поля формы:
    1. Текстовый input: placeholder «Введите ваше имя» (height 50px)
    2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
    3. Select: «Выберите ЛОР врача» (height 50px)
    4. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
  Кнопка: «Запишите меня!» — стиль bb-btn-primary (#FFA39C)
  Ширина формы: ~400px центрирована или в колонку

ФОРМА 2: «Узнайте стоимость операции» (консультация)
  Позиция: после блока новостей
  Заголовок H2: «Узнайте стоимость операции» — 36px, bold, #000000, line-height 38px
  Подзаголовок: «Проконсультируйтесь с ассистентом хирурга»
  Фон секции: #d4f6f8 (тот же что и форма 1)
  Поля формы:
    1. Текстовый input: placeholder «каша» / «Введите ваше имя» (height 50px)
    2. Телефонный input: placeholder «Введите ваш телефон» (height 50px)
    3. Checkbox: «Отправляя данные, я даю согласие на обработку персональных данных»
  Кнопка: «Перезвоните мне» — стиль bb-btn-primary (#FFA39C)

ОБЩИЕ ПРАВИЛА:
  — Оба поля input/select: bb-input / bb-select (height 50px, border 1px solid #ccc)
  — Чекбокс обязателен в обеих формах
  — Кнопка отправки: всегда bb-btn-primary (#FFA39C)
  — Обе формы на бирюзовом фоне (#d4f6f8)

ПРАВИЛА:
✓ Чекбокс согласия обязателен в каждой форме
✓ Кнопки отправки: bb-btn-primary (#FFA39C)
✓ Обе формы на фоне #d4f6f8
✕ Не менять порядок полей
✕ Не убирать чекбокс согласия
`.trim();

const CHANGELOG: ChangelogEntry[] = [
  {
    version: "v1.2",
    date: "24.03.2026",
    changes: [
      "Кнопка: bb-btn-md заменена на bb-btn-lg (18px, bold, как на реальном сайте)",
      "border-radius кнопки: 7px исправлен на 4px (исправлено в globals.css)",
    ],
  },
  {
    version: "v1.1",
    date: "24.03.2026",
    changes: [
      "H2: размер на 36px, цвет на #000000, line-height 38px",
      "Фон формы 1: с #b8e6ed на #d4f6f8",
      "Фон формы 2: с #ffffff на #d4f6f8 (обе формы на одном фоне)",
    ],
  },
];

export default function ContactFormsPageClient() {
  const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);

  return (
    <div className="p-8 max-w-5xl mx-auto space-y-10">
      {/* Заголовок страницы */}
      <div>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-1"
          style={{ color: "var(--brand-053m)" }}
        >
          Блоки
        </p>
        <h1 className="text-2xl font-bold mb-2" style={{ color: "var(--bb-text)" }}>
          Формы записи
        </h1>
        <BlockMetaBar
          path={BLOCK_PATH}
          defaultVersion="v1.2"
          defaultIsInPreview={false}
          defaultChangelog={CHANGELOG}
          onSnapshotSelect={setSnapshot}
        />
        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
          Два блока форм с perm.oclinica.ru/lor — запись на приём и запрос стоимости операции.
        </p>
      </div>

      {/* Живой пример */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Живой пример
        </h2>
        {snapshot ? (
          <>
            <style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
            <div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
          </>
        ) : (
          <div data-block-capture={BLOCK_PATH}>
            <ContactFormsBlock />
          </div>
        )}
      </section>

      {/* Сравнение двух форм */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Сравнение двух форм
        </h2>
        <div className="overflow-x-auto rounded-xl" style={{ border: "1px solid var(--bb-border)" }}>
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Параметр</th>
                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 1 «Будьте здоровы!»</th>
                <th className="text-left px-4 py-3 text-xs font-semibold" style={{ color: "var(--bb-text-muted)", borderBottom: "1px solid var(--bb-border)" }}>Форма 2 «Стоимость операции»</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Заголовок", "«Будьте здоровы!»", "«Узнайте стоимость операции»"],
                ["Подзаголовок", "«Запишитесь на приём к врачу!»", "«Проконсультируйтесь с ассистентом хирурга»"],
                ["Фон секции", "#d4f6f8", "#d4f6f8"],
                ["Поля", "Имя + Телефон + Select врача + Checkbox", "Имя + Телефон + Checkbox"],
                ["Кнопка", "«Запишите меня!»", "«Перезвоните мне»"],
                ["Стиль кнопки", "bb-btn-primary (#FFA39C)", "bb-btn-primary (#FFA39C)"],
              ].map(([param, f1, f2]) => (
                <tr key={param} style={{ borderTop: "1px solid var(--bb-border)" }}>
                  <td className="px-4 py-2 font-medium text-xs" style={{ color: "var(--bb-text)" }}>{param}</td>
                  <td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f1}</td>
                  <td className="px-4 py-2 text-xs" style={{ color: "var(--bb-text-muted)" }}>{f2}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* LLM блок */}
      <LlmBlock path="/blocks/contact-forms" version="v1.2" specText={LLM_FORMS_TEXT}>
        <LlmSection title="Форма 1 — Запись на приём" />
        <LlmTable
          headers={["Поле", "Тип", "Placeholder"]}
          rows={[
            ["Имя", "input[type=text]", "«Введите ваше имя»"],
            ["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
            ["Врач", "select", "«Выберите ЛОР врача»"],
            ["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
            ["Кнопка", "button bb-btn-primary", "«Запишите меня!»"],
          ]}
        />
        <LlmSection title="Форма 2 — Запрос стоимости" />
        <LlmTable
          headers={["Поле", "Тип", "Placeholder"]}
          rows={[
            ["Имя", "input[type=text]", "«Введите ваше имя»"],
            ["Телефон", "input[type=tel]", "«Введите ваш телефон»"],
            ["Согласие", "checkbox", "«Отправляя данные, я даю согласие...»"],
            ["Кнопка", "button bb-btn-primary", "«Перезвоните мне»"],
          ]}
        />
        <LlmSection title="Правила" />
        <LlmRules
          rules={[
            { ok: true, text: "Обе формы: фон #d4f6f8" },
            { ok: true, text: "Чекбокс согласия обязателен в каждой форме" },
            { ok: true, text: "Кнопки: bb-btn-primary (#FFA39C)" },
            { ok: true, text: "Все input/select: height 50px (bb-input, bb-select)" },
            { ok: false, text: "Не убирать чекбокс согласия на обработку данных" },
            { ok: false, text: "Не менять стиль кнопки на outline или teal" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
