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

const BLOCK_PATH = "/blocks/contact";

const FOOTER_COLUMNS = [
  {
    title: "О клинике",
    links: ["Лицензия", "Миссия", "Врачи", "Вакансии", "История", "Образовательная деятельность", "При инфо"],
  },
  {
    title: "Заболевания",
    links: ["Ринит", "Отит", "Гайморит", "Тонзиллит", "Полипы носа", "Искривление перегородки"],
  },
  {
    title: "Вопрос-ответ",
    links: [
      "Что нужно знать до операции на ухо",
      "Что нужно знать до операции на нос",
      "Отзывы до и после лечения у детей",
      "Что нужно знать при лечении у детей",
    ],
  },
  {
    title: "Операции",
    links: ["Септопластика", "Турбинопластика", "Тонзиллэктомия", "Аденотомия", "Тимпанопластика", "Мирингопластика"],
  },
];

const LLM_FOOTER_TEXT = `
БЛОК: Подвал сайта (Footer)
Источник: perm.oclinica.ru/lor — нижняя часть страницы
Версия: v1.1

СТРУКТУРА ПОДВАЛА:

1. ОСНОВНАЯ ЧАСТЬ — 4 колонки ссылок:
   Колонка 1 «О клинике»: Лицензия, Миссия, Врачи, Вакансии, История, Образовательная деятельность
   Колонка 2 «Заболевания»: Ринит, Отит, Гайморит, Тонзиллит, Полипы носа, Искривление перегородки
   Колонка 3 «Вопрос-ответ»: 4 вопроса об операциях и лечении
   Колонка 4 «Операции»: Септопластика, Турбинопластика, Тонзиллэктомия, Аденотомия и др.

2. НИЖНЯЯ ПОЛОСА:
   Левая: Логотип «КЛИНИКА УХО ГОРЛО НОС ИМ. ПРОФ. Е.Н.ОЛЕНЕВОЙ»
   Центр:
   — «Мы находимся по адресу: Пермь, ул. Г. Звезда...»
   — Иконки соцсетей: VK, OK, YouTube, Telegram и другие
   Правая: Часы работы:
   — Пн-пт: 9:00–21:00
   — Сб: 9:00–18:00
   — Вс: выходной
   — Вторая клиника часы отдельно

ЦВЕТА:
  Фон подвала: #fff или светло-серый (#f8f9fa)
  Заголовки колонок: #111827, font-weight 600
  Ссылки: #53514e (--brand-073m), hover: #0089c3
  Разделитель: border-top 1px solid #e5e7eb
  Часы работы: #374151

ПРАВИЛА:
✓ 4 колонки ссылок в основной части
✓ Логотип в нижней полосе слева
✓ Адрес + соцсети в центре нижней полосы
✓ Часы работы справа
✕ Не менять структуру 4 колонок
`.trim();

const CHANGELOG: ChangelogEntry[] = [
  {
    version: "v1.1",
    date: "24.03.2026",
    changes: [
      "Колонка «О клинике»: обновлены все ссылки по реальному сайту (13 ссылок)",
      "Колонка «Заболевания»: обновлены ссылки (5 категорий)",
      "Колонка «Вопрос-ответ»: обновлены ссылки (6 пунктов)",
      "Колонка «Операции»: обновлены ссылки (11 операций, было 6)",
      "Два адреса: Клары Цеткин, 9 + Газеты Звезда, 31А",
      "Два графика работы по филиалам",
      "Соцсети: добавлен Дзен",
    ],
  },
];

export default function ContactPageClient() {
  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)" }}>
          Подвал (Footer)
        </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 — 4 колонки ссылок, логотип, адрес, часы работы, соцсети.
        </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}>
            <FooterBlock />
          </div>
        )}
      </section>

      {/* Колонки */}
      <section className="space-y-3">
        <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
          Четыре колонки ссылок
        </h2>
        <div className="grid grid-cols-4 gap-3">
          {FOOTER_COLUMNS.map((col) => (
            <div
              key={col.title}
              className="rounded-xl p-3 space-y-1"
              style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
            >
              <p className="font-semibold text-xs" style={{ color: "var(--bb-text)" }}>
                {col.title}
              </p>
              <p className="text-[10px]" style={{ color: "var(--bb-text-muted)" }}>
                {col.links.length} ссылок
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* LLM блок */}
      <LlmBlock path="/blocks/contact" version="v1.1" specText={LLM_FOOTER_TEXT}>
        <LlmSection title="Структура подвала" />
        <LlmTable
          headers={["Зона", "Содержимое", "Фон"]}
          rows={[
            ["4 колонки ссылок", "О клинике / Заболевания / Вопрос-ответ / Операции", "#f8f9fa"],
            ["Нижняя полоса — лево", "Логотип клиники (иконка + текст)", "#fff"],
            ["Нижняя полоса — центр", "Адрес + иконки соцсетей (VK, OK, YT, TG)", "#fff"],
            ["Нижняя полоса — право", "Часы работы Пн–пт / Сб / Вс", "#fff"],
          ]}
        />
        <LlmSection title="Часы работы" />
        <LlmTable
          headers={["День", "Часы"]}
          rows={[
            ["Пн–пт", "9:00–21:00"],
            ["Сб", "9:00–18:00"],
            ["Вс", "выходной"],
          ]}
        />
        <LlmSection title="Цвета" />
        <LlmTable
          headers={["Элемент", "Цвет", "Токен"]}
          rows={[
            ["Заголовки колонок", "#111827, font-weight 600", "—"],
            ["Ссылки (default)", "#53514e", "--brand-073m"],
            ["Ссылки (hover)", "#0089c3", "--brand-053m"],
            ["Фон основной части", "#f8f9fa", "—"],
            ["Фон нижней полосы", "#ffffff", "—"],
            ["Разделитель", "1px solid #e5e7eb", "—"],
          ]}
        />
        <LlmSection title="Правила" />
        <LlmRules
          rules={[
            { ok: true, text: "4 колонки: О клинике / Заболевания / Вопрос-ответ / Операции" },
            { ok: true, text: "Логотип в нижней полосе слева" },
            { ok: true, text: "Адрес и соцсети в центре" },
            { ok: true, text: "Часы работы справа" },
            { ok: false, text: "Не менять структуру и порядок 4 колонок" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
