brand_book/apps/web/components/ui/BlockMetaBar.tsx

"use client";

import { useState, useEffect } from "react";

interface BlockMeta {
  path: string;
  name: string;
  version: string;
  isInPreview: boolean;
}

interface BlockMetaBarProps {
  path: string;
  defaultVersion: string;
  defaultIsInPreview: boolean;
}

export function BlockMetaBar({ path, defaultVersion, defaultIsInPreview }: BlockMetaBarProps) {
  const [meta, setMeta] = useState<BlockMeta | null>(null);
  const [editing, setEditing] = useState(false);
  const [versionInput, setVersionInput] = useState(defaultVersion);
  const [saving, setSaving] = useState(false);
  const [togglingPreview, setTogglingPreview] = useState(false);
  const [apiDown, setApiDown] = useState(false);

  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  useEffect(() => {
    if (!apiUrl) { setApiDown(true); return; }
    fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`)
      .then((r) => r.json())
      .then((data: BlockMeta) => {
        setMeta(data);
        setVersionInput(data.version);
      })
      .catch(() => setApiDown(true));
  }, [apiUrl, path]);

  async function patch(data: { version?: string; isInPreview?: boolean }) {
    if (!apiUrl) return null;
    const r = await fetch(`${apiUrl}/blocks/by-path?path=${encodeURIComponent(path)}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    return r.json() as Promise<BlockMeta>;
  }

  async function saveVersion() {
    if (!meta) return;
    setSaving(true);
    try {
      const updated = await patch({ version: versionInput });
      if (updated) { setMeta(updated); setEditing(false); }
    } finally {
      setSaving(false);
    }
  }

  async function togglePreview() {
    if (!meta) return;
    setTogglingPreview(true);
    try {
      const updated = await patch({ isInPreview: !meta.isInPreview });
      if (updated) setMeta(updated);
    } finally {
      setTogglingPreview(false);
    }
  }

  const version = meta?.version ?? defaultVersion;
  const isInPreview = meta?.isInPreview ?? defaultIsInPreview;

  return (
    <div
      className="flex items-center flex-wrap gap-3 px-4 py-2 rounded-lg text-xs mb-6"
      style={{ background: "var(--bb-sidebar-bg)", border: "1px solid var(--bb-border)" }}
    >
      {/* Version badge */}
      <span className="font-semibold" style={{ color: "var(--bb-text-muted)" }}>
        Версия:
      </span>
      {editing ? (
        <span className="flex items-center gap-1.5">
          <input
            className="px-2 py-0.5 rounded border text-xs font-mono w-20"
            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text)" }}
            value={versionInput}
            onChange={(e) => setVersionInput(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') saveVersion(); if (e.key === 'Escape') setEditing(false); }}
            autoFocus
          />
          <button
            onClick={saveVersion}
            disabled={saving}
            className="px-2 py-0.5 rounded text-xs font-medium"
            style={{ background: "var(--brand-053m)", color: "#fff" }}
          >
            {saving ? '...' : 'Сохранить'}
          </button>
          <button
            onClick={() => { setEditing(false); setVersionInput(version); }}
            className="px-2 py-0.5 rounded text-xs"
            style={{ color: "var(--bb-text-muted)" }}
          >
            Отмена
          </button>
        </span>
      ) : (
        <button
          onClick={() => !apiDown && setEditing(true)}
          title={apiDown ? 'API недоступен' : 'Изменить версию'}
          className="font-mono px-2 py-0.5 rounded"
          style={{
            background: "var(--bb-sidebar-active-bg, #dff0fa)",
            color: "var(--brand-053m)",
            cursor: apiDown ? 'default' : 'pointer',
          }}
        >
          {version}
        </button>
      )}

      <span style={{ color: "var(--bb-border)" }}>·</span>

      {/* Preview toggle */}
      {apiDown ? (
        <span
          className="flex items-center gap-1"
          style={{ color: isInPreview ? "#16a34a" : "var(--bb-text-muted)" }}
        >
          <span
            className="inline-block w-1.5 h-1.5 rounded-full"
            style={{ background: isInPreview ? "#22c55e" : "#d1d5db" }}
          />
          {isInPreview ? "В превью" : "Не в превью"}
        </span>
      ) : (
        <button
          onClick={togglePreview}
          disabled={togglingPreview || !meta}
          title={isInPreview ? "Убрать из превью страницы" : "Включить в превью страницы"}
          className="flex items-center gap-1.5 px-2.5 py-1 rounded font-medium transition-colors"
          style={isInPreview ? {
            background: "#dcfce7",
            color: "#16a34a",
            border: "1px solid #86efac",
          } : {
            background: "var(--bb-sidebar-bg)",
            color: "var(--bb-text-muted)",
            border: "1px solid var(--bb-border)",
          }}
        >
          <span
            className="inline-block w-1.5 h-1.5 rounded-full"
            style={{ background: isInPreview ? "#22c55e" : "#d1d5db" }}
          />
          {togglingPreview
            ? '...'
            : isInPreview
              ? "В превью"
              : "Добавить в превью"}
        </button>
      )}

      {apiDown && (
        <>
          <span style={{ color: "var(--bb-border)" }}>·</span>
          <span style={{ color: "#f59e0b" }}>API офлайн</span>
        </>
      )}
    </div>
  );
}