"use client";

import { MarkupText, MarkupPreview } from "@/components/ui/MarkupText/MarkupText";
import { MARKUP_EXAMPLES } from "@/lib/text-markup";

/**
 * Демо компонент для показа возможностей системы разметки
 */
export function MarkupDemo() {
  return (
    <div className="space-y-6 p-6">
      <div className="space-y-2">
        <h1 className="text-2xl font-bold">🎨 Система разметки WitLab</h1>
        <p className="text-muted-foreground">
          Используйте **двойные звездочки** для выделения текста жирным шрифтом
        </p>
      </div>

      {/* 📖 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ */}
      <div className="space-y-4">
        <h2 className="text-lg font-semibold">📖 Примеры использования:</h2>
        
        {MARKUP_EXAMPLES.map((example, index) => (
          <div key={index} className="space-y-2 p-4 bg-muted/20 rounded-lg border">
            <div className="text-sm font-medium text-foreground">
              {example.description}
            </div>
            
            {/* Исходный код */}
            <div className="text-xs text-muted-foreground bg-slate-100 p-2 rounded font-mono">
              {example.input}
            </div>
            
            {/* Результат */}
            <div className="text-sm">
              <strong>Результат:</strong>{" "}
              <MarkupText>{example.input}</MarkupText>
            </div>
          </div>
        ))}
      </div>

      {/* 🎯 ИНТЕРАКТИВНОЕ ДЕМО */}
      <div className="space-y-4">
        <h2 className="text-lg font-semibold">🎯 Интерактивное превью:</h2>
        
        <MarkupPreview text="Ваш **идеальный партнер** найден! Скидка **50%** только сегодня." />
        
        <MarkupPreview text="Добро пожаловать в **WitLab**! Система анализа совместимости нового поколения." />
        
        <MarkupPreview text="**Анализ завершен** - переходим к результатам вашего **портрета партнера**." />
      </div>

      {/* 💡 ИНСТРУКЦИИ */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-semibold text-blue-800">💡 Как использовать в админке:</h3>
        <ul className="text-xs text-blue-700 space-y-1">
          <li>1. Откройте любой экран в админке</li>
          <li>2. В текстовых полях используйте **двойные звездочки** для выделения</li>
          <li>3. Система автоматически покажет превью разметки</li>
          <li>4. В воронке текст будет отображаться с жирным выделением</li>
        </ul>
      </div>

      {/* 🚀 ПОДДЕРЖИВАЕМЫЕ ЭЛЕМЕНТЫ */}
      <div className="bg-green-50 border border-green-200 rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-semibold text-green-800">🚀 Где работает разметка:</h3>
        <ul className="text-xs text-green-700 space-y-1">
          <li>✅ Заголовки и подзаголовки всех экранов</li>
          <li>✅ Описания в Info и Soulmate экранах</li>
          <li>✅ Информационные сообщения в Date экранах</li>
          <li>✅ Лейблы и placeholder в Form экранах</li>
          <li>✅ Все текстовые поля Coupon экранов</li>
          <li>✅ Любой компонент Typography с enableMarkup</li>
        </ul>
      </div>
    </div>
  );
}