import { useTemplateContext } from '@/entity/template/model/TemplateContext'
import {
  getFileData,
  getLatestFileForTemplate,
  parseExcelFile,
} from '@/service/fileApiService'
import { Template } from '@/type/template'
import React, { useCallback, useEffect, useState } from 'react'
import { HeaderBar } from './HeaderBar'
import { SpreadsheetViewer } from './SpreadsheetViewer'

interface TemplateEditorProps {
  template: Template
  onBack: () => void
}

export const TemplateEditor: React.FC<TemplateEditorProps> = ({
  template,
  onBack,
}) => {
  const [editedTemplate, setEditedTemplate] = useState(template)
  const [excelData, setExcelData] = useState<Record<string, any>>(
    template.excelData || {}
  )
  const [isLoading, setIsLoading] = useState(false)
  const [dataVersion, setDataVersion] = useState(0)
  const [serverFileName, setServerFileName] = useState<string | undefined>()

  // Состояние автосохранения таблиц
  const [autoSaveState, setAutoSaveState] = useState<{
    hasUnsavedChanges: boolean
    isSaving: boolean
    manualSave: () => Promise<void>
  }>({
    hasUnsavedChanges: false,
    isSaving: false,
    manualSave: () => Promise.resolve(),
  })

  const { updateTemplate } = useTemplateContext()

  useEffect(() => {
    let isMounted = true

    const loadLatestFile = async () => {
      try {
        const latestFile = await getLatestFileForTemplate(template.id)
        if (!latestFile) return

        // Сохраняем имя файла для отображения
        if (isMounted) {
          setServerFileName(latestFile.name)
        }

        // Если у нас еще нет данных Excel – загружаем их
        if (
          Object.keys(excelData).length === 0 &&
          latestFile &&
          latestFile.id
        ) {
          const fileData = await getFileData(latestFile.id)

          if (isMounted && Object.keys(fileData.data).length > 0) {
            setExcelData(fileData.data)
            setEditedTemplate(prev => ({
              ...prev,
              mergedCells: fileData.mergedCells,
            }))
            setDataVersion(v => v + 1)
          }
        }
      } catch (error) {
        console.error('Ошибка при загрузке последнего файла шаблона:', error)
      }
    }

    loadLatestFile()

    return () => {
      isMounted = false
    }
  }, [])

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setIsLoading(true)
    try {
      const { fileId, data, mergedCells } = await parseExcelFile(
        file,
        template.id
      )
      setExcelData(data)

      const updatedTemplate = {
        ...template,
        excelFile: file,
        excelData: data,
        mergedCells,
        updatedAt: new Date(),
      }

      setEditedTemplate(updatedTemplate)

      // Сохраняем шаблон с новым Excel-файлом, чтобы в списке он больше не
      // помечался как «требует настройки»
      await updateTemplate({
        ...updatedTemplate,
        updatedAt: new Date(),
      })
      setDataVersion(v => v + 1)

      // console.log('✅ Файл загружен с ID:', fileId)
    } catch (err) {
      console.error(err)
      alert('Ошибка при загрузке Excel файла на сервер')
    } finally {
      setIsLoading(false)
    }
  }

  const handleAutoSaveStateChange = useCallback(
    (state: {
      hasUnsavedChanges: boolean
      isSaving: boolean
      manualSave: () => Promise<void>
    }) => {
      setAutoSaveState(state)
    },
    []
  )

  return (
    <div className="flex h-screen flex-col bg-background">
      <HeaderBar
        template={editedTemplate}
        onBack={onBack}
        isSaving={isLoading || autoSaveState.isSaving}
        hasUnsavedChanges={autoSaveState.hasUnsavedChanges}
        onBeforeNavigate={autoSaveState.manualSave}
      />
      <SpreadsheetViewer
        data={excelData}
        mergedCells={editedTemplate.mergedCells || []}
        dataVersion={dataVersion}
        templateId={editedTemplate.id}
        excelFileName={serverFileName || editedTemplate.excelFile?.name}
        isExcelLoading={isLoading}
        onExcelFileChange={handleFileChange}
        onAutoSaveStateChange={handleAutoSaveStateChange}
      />
    </div>
  )
}
