'use client'

import React, { useState } from 'react'

import { GoodsSuppliesV2Container } from './GoodsSuppliesV2Container'

// Тестовая страница для проверки V2 системы во всех ролях
export function V2TestPage() {
  const [currentRole, setCurrentRole] = useState<'SELLER' | 'WHOLESALE' | 'FULFILLMENT' | 'LOGIST'>('SELLER')

  const roles = [
    { key: 'SELLER', name: 'Селлер', description: 'Создает заявки на товарные поставки' },
    { key: 'WHOLESALE', name: 'Поставщик', description: 'Одобряет/отклоняет заявки на поставки' },
    { key: 'FULFILLMENT', name: 'Фулфилмент', description: 'Принимает и обрабатывает товары' },
    { key: 'LOGIST', name: 'Логистика', description: 'Координирует доставку товаров' },
  ] as const

  return (
    <div className="min-h-screen bg-gray-900 text-white p-6">
      {/* Заголовок тестовой страницы */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">
          🧪 Тестирование V2 системы товарных поставок
        </h1>
        <p className="text-white/60">
          Проверка модульной архитектуры и GraphQL интеграции для всех ролей пользователей
        </p>
      </div>

      {/* Переключатель ролей */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold mb-4">Выберите роль для тестирования:</h2>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {roles.map((role) => (
            <button
              key={role.key}
              onClick={() => setCurrentRole(role.key)}
              className={`p-4 rounded-lg border text-left transition-all ${
                currentRole === role.key
                  ? 'bg-blue-500/20 border-blue-500/50 text-blue-300'
                  : 'bg-gray-800/50 border-gray-600 text-white/80 hover:bg-gray-700/50'
              }`}
            >
              <div className="font-semibold text-lg">{role.name}</div>
              <div className="text-sm text-white/60 mt-1">{role.description}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Информационная панель текущей роли */}
      <div className="mb-6 p-4 bg-gray-800/50 rounded-lg border border-gray-600">
        <div className="flex items-center gap-3">
          <div className="w-3 h-3 rounded-full bg-blue-400"></div>
          <div>
            <span className="font-semibold">Текущая роль: {roles.find(r => r.key === currentRole)?.name}</span>
            <span className="ml-4 text-white/60">
              {roles.find(r => r.key === currentRole)?.description}
            </span>
          </div>
        </div>
      </div>

      {/* Ожидаемое поведение по роли */}
      <div className="mb-6 p-4 bg-gray-800/30 rounded-lg border border-gray-500/30">
        <h3 className="font-semibold mb-2">🎯 Ожидаемое поведение для роли {currentRole}:</h3>
        <div className="text-sm text-white/80">
          {currentRole === 'SELLER' && (
            <ul className="space-y-1">
              <li>• Видит свои товарные поставки (myGoodsSupplyOrders)</li>
              <li>• Видит закупочные цены товаров</li>
              <li>• Видит полную информацию о рецептурах</li>
              <li>• Может создавать новые поставки</li>
            </ul>
          )}
          {currentRole === 'WHOLESALE' && (
            <ul className="space-y-1">
              <li>• Видит заявки на поставки (myGoodsSupplyRequests)</li>
              <li>• Видит цены поставки товаров</li>
              <li>• НЕ видит рецептуры селлера</li>
              <li>• Может редактировать объем и упаковки</li>
              <li>• Может одобрять/отклонять заявки</li>
            </ul>
          )}
          {currentRole === 'FULFILLMENT' && (
            <ul className="space-y-1">
              <li>• Видит входящие поставки (incomingGoodsSupplies)</li>
              <li>• НЕ видит закупочные цены селлера</li>
              <li>• Видит рецептуры для обработки</li>
              <li>• Видит услуги фулфилмента</li>
              <li>• Может принимать товары</li>
            </ul>
          )}
          {currentRole === 'LOGIST' && (
            <ul className="space-y-1">
              <li>• Видит входящие поставки для доставки</li>
              <li>• НЕ видит коммерческую информацию</li>
              <li>• НЕ видит рецептуры</li>
              <li>• Видит логистическую информацию</li>
              <li>• Может отмечать отгрузки</li>
            </ul>
          )}
        </div>
      </div>

      {/* V2 контейнер с выбранной ролью */}
      <div className="border border-gray-600 rounded-lg p-6 bg-gray-800/20">
        <GoodsSuppliesV2Container
          userRole={currentRole}
          className="w-full"
        />
      </div>

      {/* Техническая информация */}
      <div className="mt-8 p-4 bg-gray-900/50 rounded-lg border border-gray-700">
        <h3 className="font-semibold mb-2">🔧 Техническая информация:</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-white/70">
          <div>
            <div className="font-semibold text-white/90 mb-1">Архитектура:</div>
            <ul className="space-y-1">
              <li>• Модульная структура: 13 модулей</li>
              <li>• Автоматическая детекция V1 ↔ V2</li>
              <li>• Smart GraphQL hooks</li>
              <li>• Ролевая фильтрация данных</li>
            </ul>
          </div>
          <div>
            <div className="font-semibold text-white/90 mb-1">GraphQL queries:</div>
            <ul className="space-y-1">
              <li>• GET_MY_GOODS_SUPPLY_ORDERS_V2</li>
              <li>• GET_INCOMING_GOODS_SUPPLIES_V2</li>
              <li>• GET_MY_GOODS_SUPPLY_REQUESTS_V2</li>
              <li>• + 5 mutations для управления</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default V2TestPage