// components/CalculatorNav.tsx
// Навигация между калькуляторами

'use client';

import { useState, useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export default function CalculatorNav() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  
  // Получаем chat_id из разных источников (для статического экспорта)
  const chatIdFromParams = searchParams.get('chat_id');
  const [chatId, setChatId] = useState<string | null>(chatIdFromParams);
  
  useEffect(() => {
    // Проверяем URL напрямую (для статического экспорта)
    if (typeof window !== 'undefined') {
      const params = new URLSearchParams(window.location.search);
      const id = params.get('chat_id');
      if (id && id !== chatId) {
        setChatId(id);
      } else if (!id) {
        // Пробуем восстановить из sessionStorage
        const savedChatId = sessionStorage.getItem('chat_id');
        if (savedChatId && savedChatId !== chatId) {
          setChatId(savedChatId);
        }
      }
    }
  }, [pathname, chatId]);
  
  // Сохраняем chat_id при переходах
  const queryString = chatId ? `?chat_id=${chatId}` : '';
  
  const calculators = [
    { id: 'soap', name: 'Мыло' },
    { id: 'candle', name: 'Свеча' },
  ];

  const handleCalculatorChange = (calcId: string) => {
    window.location.href = `/${calcId}${queryString}`;
  };

  return (
    <div className="mb-6 bg-gray-700 rounded-lg p-4 border-2 border-gray-600">
      <h2 className="text-lg font-semibold text-gray-200 mb-3 text-center">
        🔄 Переключить калькулятор:
      </h2>
      <div className="grid grid-cols-2 gap-3">
        {calculators.map((calc) => {
          const isActive = pathname === `/${calc.id}`;
          
          return (
            <button
              key={calc.id}
              onClick={() => handleCalculatorChange(calc.id)}
              type="button"
              className={`
                px-4 py-3 rounded-md text-center font-semibold transition-all
                ${isActive
                  ? 'bg-sky-500 text-gray-100 shadow-lg scale-105'
                  : 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400 hover:scale-102'
                }
              `}
            >
              {isActive && '✓ '}
              {calc.name}
            </button>
          );
        })}
      </div>
      <p className="text-xs text-gray-400 mt-2 text-center">
        Нажмите на кнопку выше, чтобы переключиться между калькуляторами
      </p>
    </div>
  );
}