import type { Metadata } from "next";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
import { DoctorsBlock, STATS, DOCTORS } from "@/components/blocks/DoctorsBlock";
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";

export const metadata: Metadata = {
  title: "Блок «Наши врачи». Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой",
};

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();

export default function DoctorsBlockPage() {
  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="/blocks/doctors" defaultVersion="v1.2" defaultIsInPreview={true} />
        <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>
        <div
          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>

      {/* Changelog */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          История версий
        </h2>
        <div className="space-y-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
          <div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
            <p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.2 — 24.03.2026</p>
            <ul className="list-disc list-inside space-y-0.5 text-xs">
              <li>H2: размер с ~30px на <strong>36px</strong>, цвет с #111827 на <strong>#000000</strong></li>
              <li>H2 line-height: <strong>38px</strong></li>
            </ul>
          </div>
          <div className="p-3 rounded-lg" style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}>
            <p className="font-semibold text-xs mb-1" style={{ color: "var(--bb-text)" }}>v1.1 — 23.03.2026</p>
            <ul className="list-disc list-inside space-y-0.5 text-xs">
              <li>6 реальных фото врачей с сайта</li>
              <li>Статистика без фона, только border-bottom #60959c</li>
            </ul>
          </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>
  );
}
