"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 { ReviewsBlock } from "@/components/blocks/ReviewsBlock";

const BLOCK_PATH = "/blocks/reviews";

const MOCK_REVIEWS = [
  {
    text: "Спасибо за приём, мне всё понравилось, спасибо за приём, мне всё понравилось. Врач очень внимательный и профессиональный.",
    author: "Пациент клиники",
    doctor: "Тимофеева Наталья Александровна",
  },
  {
    text: "Очень довольна лечением! Прошла курс процедур, нос дышит отлично. Рекомендую клинику всем.",
    author: "Наталья К.",
    doctor: "Макарова Людмила Тимофеевна",
  },
];

const LLM_REVIEWS_TEXT = `
БЛОК: Отзывы о нас
Источник: perm.oclinica.ru/lor — блок отзывов
Версия: v1.1

СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Отзывы о нас»
   Подзаголовок: «За 12 лет работы наши врачи оториноларингологи избавили от болезней ухо, горло, носа
   более 50000 пациентов. Но дня сейчас мы высоко ценим каждый положительный отзыв и искренние слова благодарности»

2. КАРУСЕЛЬ ОТЗЫВОВ:
   — Большая открывающая кавычка (« «) в цвете #b8e6ed, font-size 80–100px
   — Текст отзыва: курсив, 15–16px, #374151, background #eef4d1
   — Ссылка «Читать отзыв полностью» в цвете #0089c3
   — Стрелки навигации < > по бокам (round buttons)
   — Карусель показывает 1 отзыв за раз

ЦВЕТА:
  Фон карточки отзыва: #eef4d1 (светло-жёлто-зелёный)
  Кавычка: #b8e6ed (светло-бирюзовый)
  Текст отзыва: #374151
  Ссылка «Читать полностью»: #0089c3

ПРАВИЛА:
✓ Фон карточки отзыва: #eef4d1 (тот же что у ReviewCard)
✓ Большая декоративная кавычка
✓ Ссылка «Читать отзыв полностью» обязательна
✓ Навигация карусели (стрелки)
✕ Не показывать более 1 отзыва за раз в карусели
✕ Не убирать навигационные стрелки
`.trim();

const CHANGELOG: ChangelogEntry[] = [
  {
    version: "v1.1",
    date: "24.03.2026",
    changes: [
      "H2: размер с ~20px на 36px, цвет с #111827 на #000000, line-height 38px",
    ],
  },
];

export default function ReviewsPageClient() {
  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.1"
          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-4">
        <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}>
            <ReviewsBlock />
          </div>
        )}
      </section>

      {/* Несколько примеров */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Примеры отзывов (mock)
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {MOCK_REVIEWS.map((r, i) => (
            <div
              key={i}
              className="rounded-xl p-5 space-y-3"
              style={{ background: "#eef4d1", border: "1px solid #d4e6a0" }}
            >
              <div
                className="text-5xl leading-none font-serif"
                style={{ color: "#b8e6ed" }}
              >
                «
              </div>
              <p
                className="text-sm italic leading-relaxed"
                style={{ color: "#374151" }}
              >
                {r.text}
              </p>
              <div className="pt-1">
                <a href="#" className="text-sm" style={{ color: "#0089c3" }}>
                  Читать отзыв полностью
                </a>
              </div>
              <div className="border-t pt-2" style={{ borderColor: "#c8d8a0" }}>
                <p className="text-xs font-medium" style={{ color: "#374151" }}>
                  {r.author}
                </p>
                <p className="text-[11px]" style={{ color: "#6b7280" }}>
                  о враче: {r.doctor}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Анатомия */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Анатомия карточки отзыва
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { label: "Фон карточки", value: "#eef4d1", note: "светло-жёлто-зелёный" },
            { label: "Кавычка декоративная", value: "#b8e6ed", note: "80–100px, font-serif" },
            { label: "Текст отзыва", value: "#374151", note: "14px, italic" },
            { label: "Ссылка", value: "#0089c3", note: "--brand-053m" },
          ].map((t) => (
            <div
              key={t.label}
              className="p-3 rounded-xl space-y-1"
              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
            >
              <div
                className="w-8 h-8 rounded border"
                style={{ background: t.value, borderColor: "var(--bb-border)" }}
              />
              <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>
                {t.label}
              </p>
              <p className="text-[10px] font-mono" style={{ color: "var(--bb-text-muted)" }}>
                {t.value}
              </p>
              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
                {t.note}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* LLM блок */}
      <LlmBlock path="/blocks/reviews" version="v1.1" specText={LLM_REVIEWS_TEXT}>
        <LlmSection title="Структура блока" />
        <LlmTable
          headers={["Элемент", "Содержимое", "Стиль"]}
          rows={[
            ["H2", "«Отзывы о нас»", "36px, font-bold, #000000, line-height 38px"],
            ["Подзаголовок", "Описание достижений клиники за 12 лет", "14px, #374151"],
            ["Кавычка", "Декоративная «", "80–100px, #b8e6ed, font-serif"],
            ["Текст отзыва", "Полный текст отзыва пациента", "14px, italic, #374151"],
            ["Ссылка", "«Читать отзыв полностью»", "#0089c3"],
            ["Стрелки карусели", "‹ ›", "Round buttons, фон var(--bb-sidebar-bg)"],
          ]}
        />
        <LlmSection title="Цвета" />
        <LlmTable
          headers={["Элемент", "Цвет", "Токен"]}
          rows={[
            ["Фон карточки отзыва", "#eef4d1", "—"],
            ["Декоративная кавычка", "#b8e6ed", "—"],
            ["Текст отзыва", "#374151", "—"],
            ["Ссылка", "#0089c3", "--brand-053m"],
          ]}
        />
        <LlmSection title="Правила" />
        <LlmRules
          rules={[
            { ok: true, text: "Фон карточки отзыва: #eef4d1" },
            { ok: true, text: "Декоративная кавычка цвет #b8e6ed" },
            { ok: true, text: "Ссылка «Читать отзыв полностью» обязательна" },
            { ok: true, text: "Навигация карусели: стрелки ‹ ›" },
            { ok: false, text: "Не показывать несколько отзывов одновременно" },
            { ok: false, text: "Не убирать навигационные стрелки" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
