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

const BLOCK_PATH = "/blocks/news";

const MOCK_NEWS = [
  {
    date: "20.12.2025",
    title: "Наша работа клиники и новогодние праздники",
    href: "#",
  },
  {
    date: "11.08.2025",
    title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
    href: "#",
  },
  {
    date: "12.06.2025",
    title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
    href: "#",
  },
  {
    date: "11.06.2025",
    title: "График работы клиники в ближайшие праздники",
    href: "#",
  },
];

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

СТРУКТУРА БЛОКА:
1. ЗАГОЛОВОК H2: «Новости»
   Выравнивание: по центру или слева

2. СЕТКА КАРТОЧЕК НОВОСТЕЙ (4 штуки в ряд):
   Каждая карточка:
   — Дата: малый текст сверху (формат DD.MM.YYYY), цвет #6b7280
   — Заголовок новости: синяя ссылка (#0089c3), 14px, font-weight 500, hover underline
   — Без превью-изображения
   — Без описания (только дата + заголовок-ссылка)
   Hover на карточке: bg #eef4d1, box-shadow 0 0 16px 0 #9e9e9a (bb-news-card)

3. КНОПКА «Все новости»:
   Стиль: outline (#BF9975) или teal (#60959c), выровнена по центру под сеткой
   На сайте: ссылка «Все новости»

ЦВЕТА:
  Дата: #6b7280
  Заголовок-ссылка: #0089c3 (--brand-053m)
  Hover фон карточки: #eef4d1
  Hover тень: 0 0 16px 0 #9e9e9a

ПРАВИЛА:
✓ 4 карточки в ряд
✓ Дата сверху карточки
✓ Заголовок = ссылка #0089c3
✓ Hover: bg #eef4d1 (класс bb-news-card)
✓ Кнопка «Все новости» под сеткой
✕ Не добавлять изображения в карточки новостей главной страницы
✕ Не добавлять описание/анонс в карточку
`.trim();

const CHANGELOG: ChangelogEntry[] = [
  {
    version: "v1.1",
    date: "24.03.2026",
    changes: [
      "H2: размер на 36px, цвет на #000000, line-height 38px",
      "Фон секции: с белого на #f2fee6 (светло-зелёный, как на реальном сайте)",
    ],
  },
];

export default function NewsPageClient() {
  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 — 4 карточки в ряд (дата + заголовок-ссылка),
          кнопка «Все новости».
        </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}>
            <NewsBlock />
          </div>
        )}
      </section>

      {/* Анатомия карточки */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Анатомия карточки новости
        </h2>
        <div
          className="rounded-xl p-6 max-w-xs"
          style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
        >
          <div className="space-y-3">
            <div
              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
              style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
            >
              ① Дата: DD.MM.YYYY · цвет #6b7280
            </div>
            <div
              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
              style={{ background: "#f0f9ff", color: "var(--bb-text-muted)" }}
            >
              ② Заголовок-ссылка · #0089c3 · font-weight 500
            </div>
            <div
              className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono"
              style={{ background: "#fefce8", color: "var(--bb-text-muted)" }}
            >
              Hover: bg #eef4d1 · shadow 0 0 16px #9e9e9a
            </div>
          </div>
        </div>
        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
          Нет изображений, нет описания — только дата и заголовок.
          CSS-класс <code className="font-mono">.bb-news-card</code> обрабатывает hover.
        </p>
      </section>

      {/* LLM блок */}
      <LlmBlock path="/blocks/news" version="v1.1" specText={LLM_NEWS_TEXT}>
        <LlmSection title="Структура карточки новости" />
        <LlmTable
          headers={["Поле", "Стиль", "Значение"]}
          rows={[
            ["Дата", "text-xs, #6b7280", "Формат DD.MM.YYYY"],
            ["Заголовок", "text-sm, font-weight 500, #0089c3", "Ссылка на новость"],
            ["Hover фон", ".bb-news-card:hover", "#eef4d1"],
            ["Hover тень", ".bb-news-card:hover", "0 0 16px 0 #9e9e9a"],
          ]}
        />
        <LlmSection title="Mock-данные (4 реальные новости с сайта)" />
        <LlmTable
          headers={["Дата", "Заголовок"]}
          rows={MOCK_NEWS.map((n) => [n.date, n.title])}
        />
        <LlmSection title="Правила" />
        <LlmRules
          rules={[
            { ok: true, text: "4 карточки в ряд (grid-cols-4)" },
            { ok: true, text: "Дата сверху, заголовок-ссылка ниже" },
            { ok: true, text: "Hover: класс bb-news-card (bg #eef4d1)" },
            { ok: true, text: "Кнопка «Все новости» под сеткой (bb-btn-outline)" },
            { ok: false, text: "Не добавлять изображения в карточки" },
            { ok: false, text: "Не добавлять текст-анонс в карточку" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
