"use client";

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { BuilderProvider } from "@/lib/admin/builder/context";
import { 
  BuilderUndoRedoProvider,
  BuilderTopBar,
  BuilderSidebar,
  BuilderCanvas,
  BuilderPreview
} from "@/components/admin/builder";
import type { BuilderState } from '@/lib/admin/builder/context';
import type { FunnelDefinition, ScreenDefinition } from '@/lib/funnel/types';
import type { BuilderScreen } from '@/lib/admin/builder/types';
import { deserializeFunnelDefinition } from '@/lib/admin/builder/utils';

interface FunnelData {
  _id: string;
  name: string;
  description?: string;
  status: 'draft' | 'published' | 'archived';
  version: number;
  funnelData: FunnelDefinition;
  createdAt: string;
  updatedAt: string;
}

export default function FunnelBuilderPage() {
  const params = useParams();
  const router = useRouter();
  const funnelId = params.id as string;

  const [funnelData, setFunnelData] = useState<FunnelData | null>(null);
  const [initialBuilderState, setInitialBuilderState] = useState<BuilderState | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  // Генерируем уникальный sessionId для истории изменений
  const [sessionId] = useState(() => `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);

  // Загрузка воронки из базы данных
  const loadFunnel = async () => {
    try {
      setLoading(true);
      setError(null);

      const response = await fetch(`/api/funnels/${funnelId}`);
      if (!response.ok) {
        if (response.status === 404) {
          throw new Error('Воронка не найдена');
        }
        throw new Error('Ошибка загрузки воронки');
      }

      const data: FunnelData = await response.json();
      setFunnelData(data);

      // Конвертируем данные воронки в состояние билдера
      const builderState = deserializeFunnelDefinition(data.funnelData);
      setInitialBuilderState({
        ...builderState,
        selectedScreenId: builderState.screens[0]?.id || null,
        isDirty: false
      });

    } catch (err) {
      setError(err instanceof Error ? err.message : 'Неизвестная ошибка');
    } finally {
      setLoading(false);
    }
  };

  // Функция очистки экрана от служебных полей админки
  const cleanScreen = (screen: BuilderScreen): ScreenDefinition => {
    // Создаем копию экрана без служебного поля position
    const result = { ...screen } as BuilderScreen & Record<string, unknown>;
    
    // Убираем служебное поле position (используется только в canvas админки)
    delete result.position;
    
    // Для НЕ-list экранов убираем поле list если оно есть
    if (result.template !== "list" && 'list' in result) {
      delete result.list;
    }
    
    // Для НЕ-form экранов убираем поле fields если оно есть
    if (result.template !== "form" && 'fields' in result) {
      delete result.fields;
    }
    
    // variants оставляем для всех экранов - это валидное поле
    
    return result as ScreenDefinition;
  };

  // Сохранение воронки
  const saveFunnel = async (builderState: BuilderState, publish: boolean = false) => {
    if (!funnelData || saving) return;

    try {
      setSaving(true);

      // Конвертируем состояние билдера обратно в FunnelDefinition
      const updatedFunnelData: FunnelDefinition = {
        meta: builderState.meta,
        defaultTexts: builderState.defaultTexts,
        screens: builderState.screens.map(cleanScreen)
      };

      const response = await fetch(`/api/funnels/${funnelId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: builderState.meta.title || funnelData.name,
          description: builderState.meta.description || funnelData.description,
          funnelData: updatedFunnelData,
          status: publish ? 'published' : funnelData.status,
          actionDescription: publish ? 'Воронка опубликована' : 'Воронка сохранена'
        })
      });

      if (!response.ok) {
        // Пытаемся получить детальную информацию об ошибке от API
        let errorMessage = 'Ошибка сохранения воронки';
        try {
          const errorData = await response.json();
          if (errorData.error) {
            errorMessage = errorData.error;
          }
          // Если есть детали ошибки валидации, добавляем их
          if (errorData.details) {
            errorMessage += `: ${errorData.details}`;
          }
        } catch {
          // Если не удалось распарсить JSON ошибки, используем общее сообщение
          errorMessage = `Ошибка сохранения воронки (${response.status})`;
        }
        throw new Error(errorMessage);
      }

      const updatedFunnel = await response.json();
      setFunnelData(updatedFunnel);

      // Очищаем ошибку при успешном сохранении
      setError(null);

      // Показываем уведомление об успешном сохранении

      return true;

    } catch (err) {
      setError(err instanceof Error ? err.message : 'Ошибка сохранения');
      return false;
    } finally {
      setSaving(false);
    }
  };

  // Создание записи в истории для текущего изменения
  const createHistoryEntry = async (
    builderState: BuilderState, 
    actionType: string, 
    description: string
  ) => {
    try {
      const funnelSnapshot: FunnelDefinition = {
        meta: builderState.meta,
        defaultTexts: {
          nextButton: 'Continue'
        },
        screens: builderState.screens
      };

      await fetch(`/api/funnels/${funnelId}/history`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          sessionId,
          funnelSnapshot,
          actionType,
          description
        })
      });
    } catch (error) {
      console.error('Failed to create history entry:', error);
      // Не прерываем работу, если не удалось создать запись в истории
    }
  };

  // Обработчики для топ бара
  const handleSave = async (builderState: BuilderState): Promise<boolean> => {
    const success = await saveFunnel(builderState, false);
    if (success) {
      // Создаем запись в истории как базовую точку
      await createHistoryEntry(builderState, 'save', 'Изменения сохранены');
    }
    return success || false;
  };

  const handlePublish = async (builderState: BuilderState): Promise<boolean> => {
    const success = await saveFunnel(builderState, true);
    if (success) {
      await createHistoryEntry(builderState, 'publish', 'Воронка опубликована');
    }
    return success || false;
  };

  const handleNew = () => {
    router.push('/admin');
  };

  const handleBackToCatalog = () => {
    router.push('/admin');
  };

  useEffect(() => {
    loadFunnel();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // loadFunnel создается заново при каждом рендере, но нам нужен только первый вызов

  // Loading state
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <div className="text-gray-600">Загрузка воронки...</div>
        </div>
      </div>
    );
  }

  // Error state - только для критических ошибок загрузки
  if (error && !funnelData) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="text-red-600 mb-4">{error}</div>
          <button 
            onClick={handleBackToCatalog}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
          >
            Вернуться к каталогу
          </button>
        </div>
      </div>
    );
  }

  // Main render
  if (!initialBuilderState || !funnelData) {
    return null;
  }

  return (
    <BuilderProvider initialState={initialBuilderState}>
      <BuilderUndoRedoProvider>
        <div className="h-screen flex flex-col bg-gray-50 overflow-hidden">
        
        {/* Error Toast - показывается поверх интерфейса */}
        {error && funnelData && (
          <div className="fixed top-4 right-4 z-50 max-w-md bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg">
            <div className="flex items-start">
              <div className="flex-shrink-0">
                <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                </svg>
              </div>
              <div className="ml-3 flex-1">
                <h3 className="text-sm font-medium text-red-800">
                  Ошибка сохранения
                </h3>
                <div className="mt-2 text-sm text-red-700">
                  {error}
                </div>
                <div className="mt-3 flex space-x-2">
                  <button
                    onClick={() => setError(null)}
                    className="text-sm bg-red-100 text-red-800 px-3 py-1 rounded-md hover:bg-red-200"
                  >
                    Закрыть
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
        
        {/* Top Bar */}
        <BuilderTopBar 
          onNew={handleNew}
          onSave={handleSave}
          onPublish={handlePublish}
          onBackToCatalog={handleBackToCatalog}
          saving={saving}
          funnelInfo={{
            name: funnelData.name,
            status: funnelData.status,
            version: funnelData.version,
            lastSaved: funnelData.updatedAt
          }}
        />

        {/* Main Content */}
        <div className="flex-1 flex overflow-hidden">
          
          {/* Sidebar */}
          <aside className="w-[440px] shrink-0 overflow-y-auto border-r border-border/60 bg-background/95">
            <BuilderSidebar />
          </aside>

          {/* Canvas Area */}
          <div className="flex-1 flex overflow-hidden">
            
            {/* Canvas */}
            <div className="flex-1 overflow-hidden">
              <BuilderCanvas />
            </div>

            {/* Preview Panel */}
            <div className="w-[360px] shrink-0 border-l border-border/60 bg-background overflow-y-auto">
              <div className="p-4 border-b border-border/60">
                <h3 className="font-semibold text-sm">Предпросмотр</h3>
                <p className="text-xs text-muted-foreground">
                  Как выглядит экран в браузере
                </p>
              </div>
              <div className="p-4">
                <BuilderPreview />
              </div>
            </div>

          </div>
        </div>
        </div>
      </BuilderUndoRedoProvider>
    </BuilderProvider>
  );
}
