w-funnel/src/components/admin/builder/AgeDemo.tsx

"use client";

import { AgeSelector } from "./AgeSelector";
import { AGE_EXAMPLES, calculateAgeFromArray, getAgeGroup, getGenerationFromArray, createAgeValue, createGenerationValue } from "@/lib/age-utils";
import { useState } from "react";

/**
 * Демо компонент для показа возможностей системы возраста
 */
export function AgeDemo() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  const toggleValue = (value: string) => {
    setSelectedValues(prev => 
      prev.includes(value) 
        ? prev.filter(v => v !== value)
        : [...prev, value]
    );
  };

  const addCustomValue = (value: string) => {
    if (!selectedValues.includes(value)) {
      setSelectedValues(prev => [...prev, value]);
    }
  };

  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>
        
        {AGE_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.join(', ')}] ({example.input[1]}.{example.input[0]}.{example.input[2]})
            </div>
            
            {/* Рассчитанные значения */}
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <strong>Возраст:</strong> {example.age} лет
                <br />
                <strong>Группа:</strong> {example.ageGroup || 'Не определена'}
              </div>
              <div>
                <strong>Поколение:</strong> {example.generation || 'Не определено'}
                <br />
                <strong>Значения:</strong> {[
                  createAgeValue(example.age),
                  `age-${example.age}`,
                  createGenerationValue(example.input[2])
                ].join(', ')}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 🎯 ИНТЕРАКТИВНЫЙ СЕЛЕКТОР */}
      <div className="space-y-4">
        <h2 className="text-lg font-semibold">🎯 Интерактивный селектор возраста:</h2>
        
        <AgeSelector
          selectedValues={selectedValues}
          onToggleValue={toggleValue}
          onAddCustomValue={addCustomValue}
        />
      </div>

      {/* 💡 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-3">
        <h3 className="text-sm font-semibold text-blue-800">💡 Как использовать в условиях навигации:</h3>
        
        <div className="space-y-2 text-xs text-blue-700">
          <div className="bg-white p-2 rounded border">
            <strong>Пример 1 - Возрастные группы:</strong>
            <pre className="mt-1 text-xs">
{`{
  "conditions": [{
    "screenId": "birth-date",
    "conditionType": "values", 
    "operator": "includesAny",
    "values": ["22-25", "26-30"] // Молодые профессионалы
  }]
}`}
            </pre>
          </div>

          <div className="bg-white p-2 rounded border">
            <strong>Пример 2 - Поколения:</strong>
            <pre className="mt-1 text-xs">
{`{
  "conditions": [{
    "screenId": "birth-date",
    "conditionType": "values",
    "operator": "equals", 
    "values": ["millennials"] // Только миллениалы
  }]
}`}
            </pre>
          </div>

          <div className="bg-white p-2 rounded border">
            <strong>Пример 3 - Комбинированные условия:</strong>
            <pre className="mt-1 text-xs">
{`{
  "conditions": [
    {
      "screenId": "birth-date",
      "conditionType": "values",
      "operator": "includesAny",
      "values": ["aries", "leo", "sagittarius"] // Огненные знаки
    },
    {
      "screenId": "birth-date", 
      "conditionType": "values",
      "operator": "includesAny",
      "values": ["22-25", "26-30"] // Молодые взрослые
    }
  ]
}`}
            </pre>
          </div>
        </div>
      </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>✅ <strong>Точный возраст:</strong> age-25, age-30, age-45</li>
          <li>✅ <strong>Возрастные группы:</strong> 18-21, 22-25, 26-30, 31-35, 36-40, 41-45, 46-50, 51-60, 60+</li>
          <li>✅ <strong>Поколения:</strong> gen-z, millennials, gen-x, boomers, silent</li>
          <li>✅ <strong>Знаки зодиака:</strong> aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, sagittarius, capricorn, aquarius, pisces</li>
          <li>✅ <strong>Кастомные диапазоны:</strong> 25-35, 40+, любые пользовательские значения</li>
        </ul>
      </div>

      {/* 📋 ТЕХНИЧЕСКИЕ ДЕТАЛИ */}
      <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-2">
        <h3 className="text-sm font-semibold text-gray-800">📋 Как это работает технически:</h3>
        <ul className="text-xs text-gray-700 space-y-1">
          <li><strong>1. Пользователь вводит дату:</strong> [4, 8, 1987] в date экране</li>
          <li><strong>2. Система рассчитывает:</strong> возраст = {calculateAgeFromArray([4, 8, 1987])} лет</li>
          <li><strong>3. Определяет группу:</strong> {getAgeGroup(calculateAgeFromArray([4, 8, 1987]))?.name}</li>
          <li><strong>4. Определяет поколение:</strong> {getGenerationFromArray([4, 8, 1987])?.name}</li>
          <li><strong>5. Добавляет в ответы:</strong> все вычисленные значения автоматически</li>
          <li><strong>6. Система навигации:</strong> использует эти значения для условий</li>
        </ul>
      </div>
    </div>
  );
}