// components/DynamicCalculator.tsx
// Универсальный компонент для генерации калькуляторов из схемы

'use client';

import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
import Image from 'next/image';
import { getCalculator } from '@/lib/calculators';
import { submitCalculator } from '@/lib/api';
import FormField from './FormField';
import CalculatorNav from './CalculatorNav';
import CostBlock from './CostBlock';
import type { Calculator } from '@/types/calculator';

interface DynamicCalculatorProps {
  calculatorType: string;
}

// Форматирование меток результатов
function formatResultLabel(key: string): string {
  const labels: Record<string, string> = {
    base: 'Себестоимость основы',
    aroma: 'Себестоимость отдушки',
    pigment: 'Себестоимость пигмента',
    mold: 'Себестоимость формы',
    packaging: 'Стоимость упаковки',
    operational: 'Операционные расходы (5%)',
    wax: 'Себестоимость воска',
    wick: 'Себестоимость фитиля',
  };
  return labels[key] || key;
}

export default function DynamicCalculator({ calculatorType }: DynamicCalculatorProps) {
  const calculator = getCalculator(calculatorType);

  if (!calculator) {
    return (
      <div className="max-w-xl mx-auto p-6 bg-gray-800 text-gray-200 rounded-lg">
        <h1 className="text-2xl font-bold text-red-400">
          Калькулятор &quot;{calculatorType}&quot; не найден
        </h1>
      </div>
    );
  }

  const [formData, setFormData] = useState<Record<string, string>>({});
  const [photoFile, setPhotoFile] = useState<File | null>(null);
  const [chatId, setChatId] = useState<string | null>(null);

  // Инициализация формы с пустыми значениями
  useEffect(() => {
    const initialData: Record<string, string> = {};
    calculator.fieldSchema.forEach((field) => {
      initialData[field.name] = '';
    });
    setFormData(initialData);
  }, [calculator]);

  // Получаем chat_id из URL (для статического экспорта используем window.location напрямую)
  useEffect(() => {
    if (typeof window === 'undefined') return;
    
    const updateChatId = () => {
      // Получаем chat_id из query параметров URL
      const params = new URLSearchParams(window.location.search);
      let id = params.get('chat_id');
      
      // Если не найден в search params, проверяем hash
      if (!id && window.location.hash) {
        const hashParams = new URLSearchParams(window.location.hash.replace('#', ''));
        id = hashParams.get('chat_id');
      }
      
      // Если всё ещё не найден, проверяем весь URL строку
      if (!id) {
        const fullUrl = window.location.href;
        const chatIdMatch = fullUrl.match(/[?&#]chat_id=([^&#]+)/);
        if (chatIdMatch) {
          id = decodeURIComponent(chatIdMatch[1]);
        }
      }
      
      if (id) {
        setChatId(id);
        // Сохраняем в sessionStorage для сохранения при переходах
        if (typeof Storage !== 'undefined') {
          sessionStorage.setItem('chat_id', id);
        }
      } else {
        // Пробуем восстановить из sessionStorage
        if (typeof Storage !== 'undefined') {
          const savedChatId = sessionStorage.getItem('chat_id');
          if (savedChatId) {
            setChatId(savedChatId);
          }
        }
      }
    };
    
    updateChatId();
    
    // Слушаем изменения URL (popstate для навигации назад/вперёд)
    window.addEventListener('popstate', updateChatId);
    
    return () => {
      window.removeEventListener('popstate', updateChatId);
    };
  }, [calculatorType]);

  // Преобразование строки в число
  const toNum = (str: string): number => {
    const n = parseFloat(str.replace(',', '.'));
    return isNaN(n) ? 0 : n;
  };

  // Обновление значения поля
  const updateField = (fieldName: string, value: string) => {
    setFormData((prev) => ({ ...prev, [fieldName]: value }));
  };

  // Подготовка данных для расчёта
  const prepareCalculationData = (): Record<string, any> => {
    const data: Record<string, any> = {};
    
    for (const field of calculator.fieldSchema) {
      if (field.type === 'number') {
        data[field.name] = toNum(formData[field.name] || '0');
      } else {
        data[field.name] = formData[field.name] || '';
      }
    }

    // Специфичная обработка для мыла (упаковка)
    if (calculator.id === 'soap') {
      data.packaging = {
        box: toNum(formData.box || '0'),
        filler: toNum(formData.filler || '0'),
        ribbon: toNum(formData.ribbon || '0'),
        label: toNum(formData.labelValue || '0'),
      };
    }

    return data;
  };

  // Выполнение расчёта
  const calculationData = prepareCalculationData();
  const result = calculator.calculate(calculationData);

  // Вычисление финальной цены
  const markup = toNum(formData.markup || '0');
  const finalPrice = result.total * (1 + markup / 100);
  const weight = toNum(formData.weight || '0');
  const pricePer100g = weight > 0 ? (finalPrice / weight) * 100 : 0;

  // Группировка полей по группам
  const groupedFields = calculator.fieldSchema.reduce((acc, field) => {
    const group = field.group || 'general';
    if (!acc[group]) {
      acc[group] = [];
    }
    acc[group].push(field);
    return acc;
  }, {} as Record<string, typeof calculator.fieldSchema>);

  // Обработка изменения фото
  const handlePhotoChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setPhotoFile(e.target.files[0]);
    } else {
      setPhotoFile(null);
    }
  };

  // Обработка отправки формы
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    
    // Получаем chat_id из разных источников
    let currentChatId = chatId;
    if (!currentChatId && typeof window !== 'undefined') {
      const params = new URLSearchParams(window.location.search);
      currentChatId = params.get('chat_id');
      if (!currentChatId && typeof Storage !== 'undefined') {
        currentChatId = sessionStorage.getItem('chat_id');
      }
      if (currentChatId) {
        setChatId(currentChatId);
      }
    }
    
    if (!currentChatId) {
      alert('❗ Не найден chat_id. Откройте калькулятор через Telegram-бота.');
      return;
    }

    // Валидация обязательных полей
    const requiredFields = calculator.getRequiredFields();
    for (const fieldName of requiredFields) {
      if (!formData[fieldName] || formData[fieldName].trim() === '') {
        const field = calculator.fieldSchema.find((f) => f.name === fieldName);
        alert(`❗ Поле "${field?.label || fieldName}" обязательно для заполнения`);
        return;
      }
    }

    // Подготовка данных для отправки
    const submitData: Record<string, string | number> = {};
    for (const field of calculator.fieldSchema) {
      if (field.type === 'number') {
        const value = toNum(formData[field.name] || '0');
        submitData[field.name] = value;
      } else {
        submitData[field.name] = formData[field.name] || '';
      }
    }

    // Специфичная обработка для мыла (упаковка отправляется как отдельные поля)
    // Для других калькуляторов поля отправляются как есть
    if (calculator.id === 'soap') {
      submitData.box = toNum(formData.box || '0');
      submitData.filler = toNum(formData.filler || '0');
      submitData.ribbon = toNum(formData.ribbon || '0');
      submitData.labelValue = toNum(formData.labelValue || '0');
    }

    // Добавляем результаты расчёта
    submitData.totalCost = result.total;
    submitData.finalPrice = finalPrice;
    submitData.pricePer100g = pricePer100g;

    // Отправка на backend
    const response = await submitCalculator(
      calculatorType,
      currentChatId!,
      submitData,
      photoFile
    );

    if (response.success) {
      alert('✅ Расчёт успешно отправлен в Telegram!');
      // Очистка формы
      const initialData: Record<string, string> = {};
      calculator.fieldSchema.forEach((field) => {
        initialData[field.name] = '';
      });
      setFormData(initialData);
      setPhotoFile(null);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      alert(`❌ Ошибка: ${response.error || 'Неизвестная ошибка'}`);
    }
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="
        max-w-xl mx-auto p-6 space-y-6
        bg-gray-800 text-gray-200
        rounded-lg shadow-lg
      "
    >
      {/* Логотип */}
      <div className="flex justify-center">
        <Image
          src="/logo.svg"
          alt="Logo"
          width={150}
          height={50}
          className="mx-auto w-64 md:w-96 lg:w-112 h-auto"
        />
      </div>

      {/* Навигация между калькуляторами */}
      <CalculatorNav />

      {/* Предупреждение о chat_id */}
      {chatId === null && (
        <div className="bg-yellow-800 p-2 text-yellow-200 font-semibold rounded">
          ❗ Не найден chat_id. Откройте калькулятор через Telegram-бота.
        </div>
      )}

      {/* Заголовок калькулятора */}
      <h1 className="text-2xl font-bold text-center">
        Калькулятор: {calculator.name}
      </h1>

      {/* Специфичная структура для мыла с промежуточными стоимостями */}
      {calculator.id === 'soap' && (
        <>
          {/* Название мыла */}
          <FormField
            field={calculator.fieldSchema.find((f) => f.name === 'soapName')!}
            value={formData.soapName || ''}
            onChange={(value) => updateField('soapName', value)}
          />

          {/* Фото */}
          <label className="flex flex-col gap-1">
            <span className="text-gray-300">Фото мыла (необязательно)</span>
            <input
              type="file"
              accept="image/*"
              onChange={handlePhotoChange}
              className="
                bg-gray-700
                text-gray-200
                rounded-md
                border border-gray-600
                p-2
                focus:outline-none focus:border-sky-500
              "
            />
          </label>
          {photoFile && (
            <img
              src={URL.createObjectURL(photoFile)}
              alt="Предпросмотр мыла"
              className="w-32 h-32 object-cover rounded-lg border border-sky-400"
            />
          )}

          {/* Блок «Основа» */}
          <div className="grid grid-cols-2 gap-4">
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'weight')!}
              value={formData.weight || ''}
              onChange={(value) => updateField('weight', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'basePrice')!}
              value={formData.basePrice || ''}
              onChange={(value) => updateField('basePrice', value)}
            />
          </div>
          <CostBlock title="Себестоимость основы" value={result.base} />

          {/* Блок «Отдушка» */}
          <div className="grid grid-cols-2 gap-4">
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'aromaPrice')!}
              value={formData.aromaPrice || ''}
              onChange={(value) => updateField('aromaPrice', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'aromaWeight')!}
              value={formData.aromaWeight || ''}
              onChange={(value) => updateField('aromaWeight', value)}
            />
          </div>
          <CostBlock title="Себестоимость отдушки (1 %)" value={result.aroma} />

          {/* Блок «Пигмент» */}
          <div className="grid grid-cols-2 gap-4">
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'pigmentPrice')!}
              value={formData.pigmentPrice || ''}
              onChange={(value) => updateField('pigmentPrice', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'pigmentWeight')!}
              value={formData.pigmentWeight || ''}
              onChange={(value) => updateField('pigmentWeight', value)}
            />
          </div>
          <CostBlock title="Себестоимость пигмента (0.5 %)" value={result.pigment} />

          {/* Блок «Форма» */}
          <FormField
            field={calculator.fieldSchema.find((f) => f.name === 'moldPrice')!}
            value={formData.moldPrice || ''}
            onChange={(value) => updateField('moldPrice', value)}
          />
          <CostBlock title="Себестоимость формы" value={result.mold} />

          {/* Блок «Упаковка» */}
          <div className="grid grid-cols-2 gap-4">
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'box')!}
              value={formData.box || ''}
              onChange={(value) => updateField('box', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'filler')!}
              value={formData.filler || ''}
              onChange={(value) => updateField('filler', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'ribbon')!}
              value={formData.ribbon || ''}
              onChange={(value) => updateField('ribbon', value)}
            />
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'labelValue')!}
              value={formData.labelValue || ''}
              onChange={(value) => updateField('labelValue', value)}
            />
          </div>
          <CostBlock title="Стоимость упаковки" value={result.packaging} />
          <CostBlock title="Операционные расходы (5 %)" value={result.operational} />
          <CostBlock title="Итого себестоимость" value={result.total} highlight />

          {/* Блок «Наценка и цена 100 г» */}
          <div className="grid grid-cols-2 gap-4">
            <FormField
              field={calculator.fieldSchema.find((f) => f.name === 'markup')!}
              value={formData.markup || ''}
              onChange={(value) => updateField('markup', value)}
            />
          </div>
          <CostBlock title="Итоговая цена с наценкой" value={finalPrice} />
          <CostBlock title="Цена за 100 г" value={pricePer100g} />
        </>
      )}

      {/* Универсальная структура для других калькуляторов */}
      {calculator.id !== 'soap' && (
        <>
          {/* Основные поля (без группы) */}
          {groupedFields.general && (
            <div className="space-y-4">
              {groupedFields.general.map((field) => (
                <FormField
                  key={field.id}
                  field={field}
                  value={formData[field.name] || ''}
                  onChange={(value) => updateField(field.name, value)}
                />
              ))}
            </div>
          )}

          {/* Поля с фото */}
          <label className="flex flex-col gap-1">
            <span className="text-gray-300">Фото (необязательно)</span>
            <input
              type="file"
              accept="image/*"
              onChange={handlePhotoChange}
              className="
                bg-gray-700
                text-gray-200
                rounded-md
                border border-gray-600
                p-2
                focus:outline-none focus:border-sky-500
              "
            />
          </label>
          {photoFile && (
            <img
              src={URL.createObjectURL(photoFile)}
              alt="Предпросмотр"
              className="w-32 h-32 object-cover rounded-lg border border-sky-400"
            />
          )}

          {/* Группированные поля */}
          {Object.entries(groupedFields)
            .filter(([group]) => group !== 'general')
            .map(([group, fields]) => (
              <div key={group} className="space-y-4">
                <h2 className="text-xl font-semibold text-gray-300 capitalize">
                  {group === 'packaging' ? 'Упаковка' : group}
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  {fields.map((field) => (
                    <FormField
                      key={field.id}
                      field={field}
                      value={formData[field.name] || ''}
                      onChange={(value) => updateField(field.name, value)}
                    />
                  ))}
                </div>
              </div>
            ))}

          {/* Блоки с результатами расчёта */}
          <div className="space-y-2">
            {Object.entries(result)
              .filter(([key]) => key !== 'total')
              .map(([key, value]) => (
                <CostBlock
                  key={key}
                  title={formatResultLabel(key)}
                  value={value}
                />
              ))}
            <CostBlock title="Итого себестоимость" value={result.total} highlight />
            <CostBlock title="Итоговая цена с наценкой" value={finalPrice} />
            {weight > 0 && (
              <CostBlock title="Цена за 100 г" value={pricePer100g} />
            )}
          </div>
        </>
      )}

      {/* Кнопка отправки */}
      <button
        type="submit"
        className="
          w-full
          py-2
          rounded-md
          bg-sky-500 hover:bg-sky-600
          text-gray-100 font-semibold
          focus:outline-none focus:ring focus:ring-offset-2 focus:ring-sky-500 focus:ring-opacity-60
        "
      >
        Отправить расчёт в Telegram
      </button>
    </form>
  );
}