import type { Metadata } from "next";
import { Button } from "@/components/ui/Button";
import { CodeCopy } from "@/components/ui/CodeCopy";
import { LlmBlock, LlmSection, LlmTable, LlmRules } from "@/components/llm/LlmBlock";
import { BlockMetaBar } from "@/components/ui/BlockMetaBar";

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

function Section({
  id,
  title,
  subtitle,
  children,
}: {
  id?: string;
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="mb-12">
      <div className="mb-6">
        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
          {title}
        </h2>
        {subtitle && (
          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
            {subtitle}
          </p>
        )}
      </div>
      {children}
    </section>
  );
}

const VARIANTS = [
  {
    variant: "primary" as const,
    name: "Primary",
    label: "Запишитесь к нам",
    cssClass: ".bb-btn-primary",
    bg: "#FFA39C",
    border: "#FF847B",
    textColor: "#fff",
    radius: "7px",
    shadow: "да",
    where: "Кнопка отправки форм записи",
    example: "«Запишите меня!»",
    note: "Коралловый — самый заметный акцент на странице. Всегда один в форме.",
  },
  {
    variant: "outline" as const,
    name: "Outline",
    label: "Записаться на приём",
    cssClass: ".bb-btn-outline",
    bg: "#fff",
    border: "#BF9975",
    textColor: "#BF9975",
    radius: "7px",
    shadow: "нет",
    where: "Хедер, навигация, ссылки-кнопки",
    example: "«Записаться на прием», «Все новости»",
    note: "Бежевая рамка — ненавязчивый вторичный CTA. Не конкурирует с основной формой.",
  },
  {
    variant: "teal" as const,
    name: "Teal",
    label: "Позвонить",
    cssClass: ".bb-btn-teal",
    bg: "#60959c",
    border: "прозрачный",
    textColor: "#fff",
    radius: "7px",
    shadow: "нет",
    where: "Контактные действия — звонок",
    example: "«Позвонить»",
    note: "Серо-бирюзовый — цвет из реального CSS сайта. Близок к Oracal 066M.",
  },
  {
    variant: "pill" as const,
    name: "Pill",
    label: "Заказать звонок",
    cssClass: ".bb-btn-pill",
    bg: "#e9e4d4",
    border: "#d5cfbd",
    textColor: "#333",
    radius: "25px",
    shadow: "нет",
    where: "Модальные триггеры, мягкий CTA",
    example: "«Заказать звонок»",
    note: "Кремовый фон + pill-форма — мягкий стиль. Используется для открытия модальных окон.",
  },
];

const LLM_BUTTONS_TEXT = `КНОПКИ — LLM-спецификация (с реального сайта oclinica.ru)
Версия: v2.0 · /components/buttons
Источник CSS: perm.oclinica.ru/.../style.css

ВАРИАНТЫ (реальный сайт)
Вариант | CSS класс       | Фон       | Текст    | Граница   | Radius | Shadow | Применение
primary | .bb-btn-primary | #FFA39C   | #fff     | #FF847B   | 7px    | да     | Форм-сабмит «Запишите меня!»
outline | .bb-btn-outline | #fff      | #BF9975  | #BF9975   | 7px    | нет    | Хедер «Записаться на прием», ссылки-кнопки
teal    | .bb-btn-teal    | #60959c   | #fff     | нет       | 7px    | нет    | Звонок «Позвонить»
pill    | .bb-btn-pill    | #e9e4d4   | #333     | #d5cfbd   | 25px   | нет    | Callback «Заказать звонок»

CSS С САЙТА (точные значения)
/* форм-кнопка «Запишите меня!» */
button { background:#FFA39C; color:white; font-weight:bold; border:solid 1px #FF847B;
         height:42px; font-size:18px; box-shadow:0px 0px 5px rgba(0,0,0,0.5),0px 4px 5px rgba(0,0,0,0.3); }

/* appointment — «Записаться на прием» */
.appointment { background:#FFF; border:#BF9975 solid 1px; color:#BF9975;
               font-size:14px; line-height:38px; padding:3px 12px; border-radius:7px; }

/* show-phone — «Позвонить» */
.show-phone { background:rgb(96,149,156); color:#fff; border-radius:7px;
              font-size:14px; line-height:38px; padding:3px 12px; }

/* callback — «Заказать звонок» */
a.callback_url { background:#e9e4d4; border:#d5cfbd solid 1px; color:#000;
                 border-radius:25px; font-size:16px; padding:6px 18px; }

РАЗМЕРЫ (брендбук-компонент)
Размер | CSS класс  | padding    | font-size | Применение
sm     | .bb-btn-sm | 4px 11px   | 13px      | Компактные контексты
md     | .bb-btn-md | 8px 16px   | 14px      | Стандарт (appointment, teal, pill)
lg     | .bb-btn-lg | 10px 24px  | 18px + bold | Форм-сабмит (соответствует реальному сайту)

ПРАВИЛА ПРИМЕНЕНИЯ
✓ primary (коралловый) — только для главного CTA в форме записи
✓ outline (бежевый) — хедер, навигация, ссылки-кнопки на странице
✓ teal (бирюзовый) — контактные действия (звонок, направление)
✓ pill (кремовый) — открытие модальных окон, мягкий callback
✓ Не более одного primary на форму
✕ Не менять цвета вне фирменной палитры сайта
✕ Primary — не для навигационных ссылок
✕ Не накладывать тень на outline/teal/pill`.trim();

export default function ButtonsPage() {
  const codeHtml = `<!-- Primary — форм-кнопка «Запишите меня!» -->
<button class="bb-btn bb-btn-lg bb-btn-primary">Запишите меня!</button>

<!-- Outline — appointment «Записаться на прием» -->
<a class="bb-btn bb-btn-md bb-btn-outline" href="#form">Записаться на прием</a>

<!-- Teal — «Позвонить» -->
<a class="bb-btn bb-btn-md bb-btn-teal" href="tel:+73422250662">Позвонить</a>

<!-- Pill — «Заказать звонок» -->
<a class="bb-btn bb-btn-md bb-btn-pill" href="#callback">Заказать звонок</a>`;

  const codeReact = `import { Button } from "@/components/ui/Button";

// Форм-кнопка (главный CTA)
<Button variant="primary" size="lg">Запишите меня!</Button>

// Запись из хедера / навигации
<Button variant="outline" size="md">Записаться на прием</Button>

// Звонок
<Button variant="teal" size="md">Позвонить</Button>

// Заказать звонок (открывает модал)
<Button variant="pill" size="md">Заказать звонок</Button>

// С loading-состоянием
<Button variant="primary" size="lg" loading>Отправляем...</Button>`;

  const codeSiteExact = `/* Точный CSS с сайта oclinica.ru (style.css) */

/* Форм-кнопка — кнопка отправки форм записи */
#block-entityform-block-feedback button,
#block-entityform-block-lor-form button {
  background: #FFA39C;
  color: white;
  font-weight: bold;
  border: solid 1px #FF847B;
  width: 300px;
  height: 42px;
  font-size: 18px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5), 0px 4px 5px rgba(0,0,0,0.3);
}

/* Кнопка «Записаться на прием» в хедере */
#block-block-15 .appointment {
  background: #FFF;
  border: #BF9975 solid 1px;
  color: #BF9975;
  font-size: 14px;
  line-height: 38px;
  padding: 3px 12px;
  border-radius: 7px;
}

/* Кнопка «Позвонить» */
.show-phone {
  background: rgb(96, 149, 156); /* #60959c */
  color: #fff;
  border-radius: 7px;
  font-size: 14px;
  line-height: 38px;
  padding: 3px 12px;
}

/* Кнопка «Заказать звонок» */
a.callback_url {
  background: #e9e4d4;
  border: #d5cfbd solid 1px;
  color: #000;
  border-radius: 25px;
  font-size: 16px;
  padding: 6px 18px;
}`;

  return (
    <div className="max-w-4xl mx-auto px-8 py-10">
      {/* Заголовок */}
      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-2"
          style={{ color: "var(--brand-053m)" }}
        >
          Компоненты → 3.1
        </p>
        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
          Кнопки
        </h1>
        <BlockMetaBar path="/components/buttons" defaultVersion="v2.0" defaultIsInPreview={false} />
        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
          Кнопки скопированы с реального сайта{" "}
          <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
            oclinica.ru
          </span>
          . Цвета, размеры и тени взяты напрямую из CSS темы{" "}
          <span className="font-mono text-sm" style={{ color: "var(--bb-text)" }}>
            clinic_bootstrap_mobile/css/style.css
          </span>
          .
        </p>
        <div
          className="mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
          style={{ borderColor: "#e0f5f4", background: "#f8fffe", color: "var(--bb-text-muted)" }}
        >
          <span style={{ color: "var(--brand-053m)", fontWeight: 600 }}>Источник</span>
          <span>
            CSS сайта проанализирован 2026-03-22 — 4 типа кнопок с реальными значениями.
          </span>
        </div>
      </div>

      {/* 1. Варианты */}
      <Section
        id="variants"
        title="Варианты"
        subtitle="Четыре типа кнопок с реального сайта клиники."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
          {VARIANTS.map(({ variant, name, label, where, example, note, bg, border, textColor, radius, shadow }) => (
            <div
              key={variant}
              className="rounded-xl border p-5 flex flex-col gap-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              {/* Превью */}
              <div
                className="flex items-center justify-center py-6 rounded-lg"
                style={{ background: "var(--bb-sidebar-bg)" }}
              >
                <Button variant={variant} size="md">
                  {label}
                </Button>
              </div>

              {/* Инфо */}
              <div>
                <p className="font-semibold text-sm mb-1" style={{ color: "var(--bb-text)" }}>
                  {name}
                </p>
                <p className="text-xs mb-2 leading-relaxed" style={{ color: "var(--bb-text-muted)" }}>
                  {note}
                </p>
                <div className="flex flex-wrap gap-1.5 mb-2">
                  {[
                    { k: "bg", v: bg },
                    { k: "text", v: textColor },
                    { k: "border", v: border },
                    { k: "radius", v: radius },
                    ...(shadow === "да" ? [{ k: "shadow", v: "да" }] : []),
                  ].map(({ k, v }) => (
                    <span
                      key={k}
                      className="text-[10px] font-mono px-1.5 py-0.5 rounded"
                      style={{ background: "#f3f4f6", color: "var(--bb-text-muted)" }}
                    >
                      {k}: {v}
                    </span>
                  ))}
                </div>
                <div
                  className="rounded p-2.5 text-xs"
                  style={{ background: "#f8f9fa", color: "var(--bb-text-muted)" }}
                >
                  <span className="font-medium" style={{ color: "var(--bb-text)" }}>
                    Где:
                  </span>{" "}
                  {where}
                  <br />
                  <span className="font-medium" style={{ color: "var(--bb-text)" }}>
                    Пример:
                  </span>{" "}
                  {example}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* 2. Размеры */}
      <Section
        id="sizes"
        title="Размеры"
        subtitle="Три размера для разных контекстов. lg соответствует форм-кнопке на реальном сайте (18px, bold)."
      >
        <div
          className="rounded-xl border overflow-hidden"
          style={{ borderColor: "var(--bb-border)" }}
        >
          {(
            [
              {
                size: "sm" as const,
                label: "Small",
                hint: "4px 11px · 13px",
                use: "Компактные контексты, таблицы",
              },
              {
                size: "md" as const,
                label: "Medium",
                hint: "8px 16px · 14px",
                use: "Appointment, Teal, Pill (соответствует сайту)",
              },
              {
                size: "lg" as const,
                label: "Large",
                hint: "10px 24px · 18px bold",
                use: "Primary форм-кнопка (соответствует сайту)",
              },
            ] as const
          ).map(({ size, label, hint, use }, i) => (
            <div
              key={size}
              className="flex items-center gap-6 px-5 py-4"
              style={{ borderTop: i > 0 ? "1px solid var(--bb-border)" : undefined }}
            >
              <div className="w-40 shrink-0">
                <Button variant="primary" size={size}>
                  Записаться
                </Button>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
                  {label}
                </p>
                <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>
                  padding: {hint.split("·")[0].trim()} · font-size: {hint.split("·")[1].trim()}
                </p>
              </div>
              <p
                className="text-xs hidden lg:block"
                style={{ color: "var(--bb-text-muted)", maxWidth: 220 }}
              >
                {use}
              </p>
            </div>
          ))}
        </div>
      </Section>

      {/* 3. Состояния */}
      <Section
        id="states"
        title="Состояния"
        subtitle="Базовые состояния кнопки. На реальном сайте hover/transition не определены в CSS."
      >
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {(
            [
              {
                label: "Default",
                node: <Button variant="primary" size="lg">Записаться</Button>,
                hint: "Стандартное состояние",
              },
              {
                label: "Hover",
                node: (
                  <Button
                    variant="primary"
                    size="lg"
                    style={{ filter: "brightness(0.93)" }}
                  >
                    Записаться
                  </Button>
                ),
                hint: "filter: brightness(0.93)",
              },
              {
                label: "Loading",
                node: <Button variant="primary" size="lg" loading>Отправка...</Button>,
                hint: "Спиннер + blocked",
              },
              {
                label: "Disabled",
                node: <Button variant="primary" size="lg" disabled>Записаться</Button>,
                hint: "opacity: 0.5",
              },
            ] as const
          ).map(({ label, node, hint }) => (
            <div
              key={label}
              className="rounded-xl border p-4"
              style={{ borderColor: "var(--bb-border)" }}
            >
              <div
                className="flex items-center justify-center py-4 mb-3 rounded-lg"
                style={{ background: "var(--bb-sidebar-bg)" }}
              >
                {node}
              </div>
              <p className="text-sm font-medium mb-0.5" style={{ color: "var(--bb-text)" }}>
                {label}
              </p>
              <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
                {hint}
              </p>
            </div>
          ))}
        </div>
      </Section>

      {/* 4. Контекст применения */}
      <Section
        id="context"
        title="Где применяется"
        subtitle="Таблица: тип кнопки → реальное использование на сайте."
      >
        <div
          className="rounded-xl border overflow-hidden"
          style={{ borderColor: "var(--bb-border)" }}
        >
          <table className="w-full text-sm">
            <thead>
              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
                {["Вариант", "Цвет фона", "Реальный класс/контекст", "Текст кнопки на сайте"].map((h) => (
                  <th
                    key={h}
                    className="text-left px-4 py-3 font-medium text-xs"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {h}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                {
                  v: <Button variant="primary" size="sm">Primary</Button>,
                  bg: "#FFA39C",
                  ctx: "button в entityform-блоках форм записи",
                  text: "«Запишите меня!»",
                },
                {
                  v: <Button variant="outline" size="sm">Outline</Button>,
                  bg: "#fff / рамка #BF9975",
                  ctx: ".appointment в хедере (block-block-15, 30, 32, 24)",
                  text: "«Записаться на прием»",
                },
                {
                  v: <Button variant="teal" size="sm">Teal</Button>,
                  bg: "#60959c",
                  ctx: ".show-phone (block-block-4, 15)",
                  text: "«Позвонить»",
                },
                {
                  v: <Button variant="pill" size="sm">Pill</Button>,
                  bg: "#e9e4d4",
                  ctx: "a.callback_url (modal trigger)",
                  text: "«Заказать звонок»",
                },
              ].map(({ v, bg, ctx, text }, i) => (
                <tr
                  key={i}
                  style={{ borderTop: "1px solid var(--bb-border)" }}
                >
                  <td className="px-4 py-3">{v}</td>
                  <td
                    className="px-4 py-3 font-mono text-xs"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {bg}
                  </td>
                  <td
                    className="px-4 py-3 font-mono text-xs"
                    style={{ color: "var(--bb-text-muted)" }}
                  >
                    {ctx}
                  </td>
                  <td className="px-4 py-3 text-xs" style={{ color: "var(--bb-text)" }}>
                    {text}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Section>

      {/* 5. Примеры кода */}
      <Section
        id="code"
        title="Примеры кода"
        subtitle="HTML-классы из globals.css, JSX-компонент, и точный CSS с сайта."
      >
        <div className="space-y-4">
          <CodeCopy lang="HTML (CSS-классы brandbook)" code={codeHtml} />
          <CodeCopy lang="JSX (React / Next.js)" code={codeReact} />
          <CodeCopy lang="CSS — точно с сайта oclinica.ru" code={codeSiteExact} />
        </div>
      </Section>

      {/* LLM-блок */}
      <LlmBlock path="/components/buttons" version="v2.0" specText={LLM_BUTTONS_TEXT}>
        <LlmSection title="Варианты (реальный сайт oclinica.ru)" />
        <LlmTable
          headers={["Вариант", "CSS класс", "Фон", "Текст", "Border", "Radius", "Применение"]}
          rows={VARIANTS.map((v) => [
            v.variant,
            v.cssClass,
            v.bg,
            v.textColor,
            v.border,
            v.radius,
            v.where,
          ])}
        />
        <LlmSection title="Размеры (брендбук-компонент)" />
        <LlmTable
          headers={["Размер", "padding", "font-size", "Применение"]}
          rows={[
            ["sm", "4px 11px", "13px", "Компактные контексты"],
            ["md", "8px 16px", "14px", "Стандарт (outline, teal, pill с сайта)"],
            ["lg", "10px 24px", "18px bold", "Primary форм-кнопка (соответствует сайту)"],
          ]}
        />
        <LlmSection title="Правила применения" />
        <LlmRules
          rules={[
            { ok: true, text: "primary (коралловый) — только для submit в формах записи" },
            { ok: true, text: "outline (бежевый) — хедер, навигация, второстепенные ссылки" },
            { ok: true, text: "teal (бирюзовый) — телефонные и контактные действия" },
            { ok: true, text: "pill (кремовый) — открытие модальных окон / callback" },
            { ok: true, text: "Не более одного primary на форму" },
            { ok: false, text: "Не менять цвета вне указанной палитры сайта" },
            { ok: false, text: "Primary — не для навигационных ссылок" },
            { ok: false, text: "Не накладывать тень на outline, teal, pill" },
          ]}
        />
      </LlmBlock>
    </div>
  );
}
