"use client";

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

const BLOCK_PATH = "/blocks/doctors";

const LLM_DOCTORS_TEXT = `
БЛОК: Наши врачи
Источник: perm.oclinica.ru/lor — блок под CEO-текстом
Версия: v1.2

СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Приём ведут опытные ЛОР врачи»
   Подзаголовок: описание принципа работы врачей клиники
   Размер: 36px, font-bold, #000000, line-height: 38px

2. БЛОК СТАТИСТИКИ (3 показателя в ряд):
   — «Ежедневно 27 ЛОР врачей работают в клинике»
   — «В том числе 6 кандидатов медицинских наук»
   — «Свыше 12 000 успешно проведённых операций»
   Стиль: весь текст #60959c, bold, ~18px. Фона НЕТ. Снизу border-bottom 3px solid #60959c

3. СЕТКА КАРТОЧЕК ВРАЧЕЙ (6 штук, 6 в ряд):
   Каждая карточка:
   — Фото врача 110×150px, object-fit: cover, object-position: center top, border-radius 4px
   — Имя (12px, font-weight 500, цвет #60959c)
   — Специализация (11px, #374151)
   Карточки без рамки, gap минимальный

ЦВЕТА:
  Заголовок H2: #000000, 36px, line-height 38px
  Статистика текст: #60959c (серо-бирюзовый)
  Статистика черта: border-bottom 3px solid #60959c
  Имя врача: #60959c
  Специализация: #374151

ПРАВИЛА:
✓ Заголовок H2 + описание обязательны
✓ 3 stat-блока в ряд, без фоновых блоков
✓ Сетка 6 колонок (6 карточек в ряд)
✕ Не отображать более 6 врачей в основном блоке
✕ Не убирать статистику
`.trim();

const CHANGELOG: ChangelogEntry[] = [
  {
    version: "v1.2",
    date: "24.03.2026",
    changes: [
      "H2: размер с ~30px на 36px, цвет с #111827 на #000000",
      "H2 line-height: 38px",
    ],
  },
  {
    version: "v1.1",
    date: "23.03.2026",
    changes: [
      "6 реальных фото врачей с сайта",
      "Статистика без фона, только border-bottom #60959c",
    ],
  },
];

export default function DoctorsPageClient() {
  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={true}
          defaultChangelog={CHANGELOG}
          onSnapshotSelect={setSnapshot}
        />
        <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
          Блок на странице perm.oclinica.ru/lor — заголовок, 3 стат-блока, сетка из 6 карточек врачей.
        </p>
      </div>

      {/* Живой пример */}
      <section className="space-y-4">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Живой пример
        </h2>
        {snapshot ? (
          <div
            className="rounded-xl p-8"
            style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
          >
            <style dangerouslySetInnerHTML={{ __html: snapshot.css }} />
            <div dangerouslySetInnerHTML={{ __html: snapshot.html }} />
          </div>
        ) : (
          <div
            data-block-capture={BLOCK_PATH}
            className="rounded-xl p-8"
            style={{ background: "#fff", border: "1px solid var(--bb-border)" }}
          >
            <DoctorsBlock />
          </div>
        )}
      </section>

      {/* Стат-блоки — разбор */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Блок статистики
        </h2>
        <div className="grid grid-cols-3 gap-6">
          {STATS.map((s) => (
            <div
              key={s.num}
              className="pb-3 space-y-1"
              style={{ borderBottom: "3px solid #60959c" }}
            >
              <p className="text-base font-bold leading-snug" style={{ color: "#60959c" }}>
                {s.prefix} {s.num} {s.label}
              </p>
              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
                цвет текста: #60959c · черта: 3px solid #60959c
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* LLM блок */}
      <LlmBlock path="/blocks/doctors" version="v1.2" specText={LLM_DOCTORS_TEXT}>
        <LlmSection title="Структура блока" />
        <LlmTable
          headers={["Элемент", "Содержимое", "Стиль"]}
          rows={[
            ["H2", "«Приём ведут опытные ЛОР врачи»", "36px, font-bold, #000000, line-height 38px"],
            ["Подзаголовок", "Описание принципа работы", "14px, #374151, line-height 1.7"],
            ["Статистика", "3 блока в ряд, без фона", "#60959c bold + border-bottom 3px solid #60959c"],
            ["Сетка врачей", "6 карточек в 1 ряд", "фото 110×150px + имя #60959c + специализация #374151"],
          ]}
        />
        <LlmSection title="Три показателя" />
        <LlmTable
          headers={["Число", "Описание"]}
          rows={STATS.map((s) => [`${s.prefix} ${s.num}`, s.label])}
        />
        <LlmSection title="6 врачей слайдера (perm.oclinica.ru/lor)" />
        <LlmTable
          headers={["Имя", "Специализация"]}
          rows={DOCTORS.map((d) => [d.name, d.spec])}
        />
        <LlmSection title="Карточка врача" />
        <LlmTable
          headers={["Поле", "Размер / Стиль"]}
          rows={[
            ["Фото", "110×150px, object-fit: cover, object-position: center top, border-radius 4px"],
            ["Имя", "12px, font-weight 500, #60959c"],
            ["Специализация", "11px, #374151"],
          ]}
        />
        <LlmSection title="Правила" />
        <LlmRules
          rules={[
            { ok: true, text: "H2 + описание обязательны" },
            { ok: true, text: "3 stat-блока в ряд, без фоновых рамок" },
            { ok: true, text: "Сетка 6 карточек в 1 ряд (6 колонок)" },
            { ok: false, text: "Не показывать более 6 врачей в основном блоке" },
            { ok: false, text: "Не убирать статистику" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
