import React, { useState, useEffect, useMemo } from 'react'
import {
  FaUpload,
  FaCheckCircle,
  FaRegBell,
  FaClock,
  FaSync,
  FaEye,
  FaTrashAlt,
  FaDownload,
  FaFileExcel,
  FaFileAlt,
} from 'react-icons/fa'
import { FileUploadArea } from './FileUploadArea'
import { ImportPreview } from './ImportPreview'
import { ImportProgress } from './ImportProgress'
import { ListFormImportDto, ListFormImportExecuteDto } from '@/proxy/imports/models'
import { ImportService } from '@/services/import.service'
import { GridDto } from '@/proxy/form/models'
import { useLocalization } from '@/utils/hooks/useLocalization'

interface ImportDashboardProps {
  gridDto: GridDto
}

export type TabNames = 'import' | 'preview' | 'history'

export const ImportDashboard: React.FC<ImportDashboardProps> = ({ gridDto }) => {
  const { translate } = useLocalization()

  const [activeTab, setActiveTab] = useState<TabNames>('import')
  const [currentSession, setCurrentSession] = useState<ListFormImportDto | null>(null)
  const [importHistory, setImportHistory] = useState<ListFormImportDto[]>([])
  const [loading, setLoading] = useState(false)
  const importService = useMemo(() => new ImportService(), [])
  const [generating, setGenerating] = useState(false)
  const [expandedSessions, setExpandedSessions] = useState<Set<string>>(new Set())
  const [sessionExecutes, setSessionExecutes] = useState<
    Record<string, ListFormImportExecuteDto[]>
  >({})
  const [loadingExecutes, setLoadingExecutes] = useState<Set<string>>(new Set())

  useEffect(() => {
    loadImportHistory()
  }, [])

  const loadImportHistory = async () => {
    try {
      const history = await importService.getListFormImportByListFormCode(
        gridDto.gridOptions.listFormCode || '',
      )
      setImportHistory(history)

      // Execute cache'ini temizle çünkü history değişmiş olabilir
      setSessionExecutes({})
      setExpandedSessions(new Set())
    } catch (error) {
      console.error('Failed to load import history:', error)
    }
  }

  const toggleSessionExecutes = async (sessionId: string) => {
    // Toggle expanded state
    const newExpandedSessions = new Set(expandedSessions)
    if (expandedSessions.has(sessionId)) {
      newExpandedSessions.delete(sessionId)
      setExpandedSessions(newExpandedSessions)
    } else {
      newExpandedSessions.add(sessionId)
      setExpandedSessions(newExpandedSessions)

      // Her zaman fresh data çek - cache'e güvenme
      setLoadingExecutes((prev) => new Set([...prev, sessionId]))
      try {
        const executes = await importService.getListFormImportExecutes(sessionId)
        setSessionExecutes((prev) => ({
          ...prev,
          [sessionId]: executes,
        }))
      } catch (error) {
        console.error('Failed to load import executes:', error)
      } finally {
        setLoadingExecutes((prev) => {
          const newSet = new Set(prev)
          newSet.delete(sessionId)
          return newSet
        })
      }
    }
  }

  const handleFileUpload = async (file: File) => {
    setLoading(true)
    try {
      let session = await importService.uploadFile(file, gridDto.gridOptions.listFormCode || '')
      setCurrentSession(session)
      setActiveTab('preview')

      // Start polling for status updates - continue until fully processed
      if (session.status !== 'failed') {
        // Daha uzun süreli ve gerçekçi bir progression
        setTimeout(async () => {
          session = await importService.updateSession(session.id, {
            status: 'validating',
            listFormCode: gridDto.gridOptions.listFormCode || '',
          })
          setCurrentSession(session)
        }, 1000) // 1 saniye sonra validating

        setTimeout(async () => {
          session = await importService.updateSession(session.id, {
            status: 'processing',
            listFormCode: gridDto.gridOptions.listFormCode || '',
          })
          setCurrentSession(session)
        }, 2000) // 2 saniye sonra processing başlangıç

        setTimeout(async () => {
          session = await importService.updateSession(session.id, {
            status: 'uploaded',
            listFormCode: gridDto.gridOptions.listFormCode || '',
          })
          setCurrentSession(session)
        }, 3000) // 3 saniye sonra uploaded

        pollImportStatus(session.id)
      }

      // Load import history to refresh the data
      await loadImportHistory()
    } catch (error) {
      console.error('File upload failed:', error)
    } finally {
      setLoading(false)
    }
  }

  const pollImportStatus = async (sessionId: string) => {
    try {
      const session = await importService.getListFormImport(sessionId)
      setCurrentSession(session)

      if (session.status === 'uploaded' || session.status === 'failed') {
        loadImportHistory()
      }
    } catch (error) {
      console.error('Failed to get import status:', error)
    }
  }

  const handleImportExecute = async (
    sessionId: string,
    listFormCode: string,
    selectedRows?: number[],
  ) => {
    setLoading(true)
    try {
      const session = await importService.executeImport(sessionId, listFormCode, selectedRows)
      pollImportStatus(session.importId)
      await loadImportHistory()

      // Execute sonrası History sekmesine geç ki kullanıcı yeni execute'i görebilsin
      setActiveTab('history')
    } catch (error) {
      console.error('Import execution failed:', error)
    } finally {
      setLoading(false)
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'uploaded':
        return <FaCheckCircle className="w-5 h-5 text-green-500" />
      case 'failed':
        return <FaRegBell className="w-5 h-5 text-red-500" />
      case 'processing':
      case 'validating':
        return <FaSync className="w-5 h-5 text-blue-500 animate-spin" />
      default:
        return <FaClock className="w-5 h-5 text-yellow-500" />
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'uploaded':
        return 'bg-green-50 text-green-700 border-green-200'
      case 'failed':
        return 'bg-red-50 text-red-700 border-red-200'
      case 'processing':
      case 'validating':
        return 'bg-blue-50 text-blue-700 border-blue-200'
      default:
        return 'bg-yellow-50 text-yellow-700 border-yellow-200'
    }
  }

  const generateTemplate = async (format: 'excel' | 'csv') => {
    setGenerating(true)
    try {
      const blob = await importService.generateTemplate(gridDto, format)
      const filename = `${gridDto.gridOptions.listFormCode}_template.${format === 'excel' ? 'xlsx' : 'csv'}`
      importService.downloadGenerateTemplate(blob, filename)
    } catch (error) {
      console.error('Template generation failed:', error)
    } finally {
      setGenerating(false)
    }
  }

  const getEditableColumns = () => {
    return gridDto.columnFormats.filter((col: any) => col.permissionDto.i && col.fieldName !== 'Id')
  }

  const editableColumns = getEditableColumns()

  return (
    <div className="mx-auto px-4 py-2">
      {/* Navigation Tabs */}
      <div className="flex space-x-1 mb-4 bg-white rounded-lg p-1 shadow-sm border border-slate-200">
        {['import', 'preview', 'history'].map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab as TabNames)}
            className={`px-6 py-3 rounded-md font-medium transition-all duration-200 flex items-center space-x-2 ${
              activeTab === tab
                ? 'bg-blue-500 text-white shadow-md'
                : 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
            }`}
          >
            {tab === 'import' && <FaUpload className="w-4 h-4" />}
            {tab === 'preview' && <FaEye className="w-4 h-4" />}
            {tab === 'history' && <FaClock className="w-4 h-4" />}
            <span className="capitalize">{tab}</span>
          </button>
        ))}
      </div>

      {/* Content */}
      {activeTab === 'import' && (
        <div className="space-y-6">
          {/* Template Generator & File Upload - Side by Side */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Template Generator - 2/3 width on large screens, full width on mobile */}
            <div className="lg:col-span-2">
              <div className="bg-white rounded-xl shadow-sm border border-slate-200">
                <div className="px-3 py-3 border-b flex items-center justify-between">
                  <h3 className="text-xl font-semibold text-slate-800 flex items-center">
                    <FaDownload className="w-4 h-4 mr-2" />
                    {translate('::App.Listforms.ImportManager.TemplateColumns')} (
                    {editableColumns.length})
                  </h3>

                  {/* Template Options */}
                  <div className="flex gap-2">
                    <button
                      onClick={() => generateTemplate('excel')}
                      disabled={generating}
                      className="flex items-center gap-1.5 px-3 py-1.5 border border-green-200 rounded-md hover:border-green-300 hover:bg-green-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
                    >
                      <FaFileExcel className="w-3.5 h-3.5 text-green-500 group-hover:scale-110 transition-transform" />
                      <span className="font-medium text-slate-700">
                        {translate('::App.Listforms.ImportManager.ExcelTemplate')}
                      </span>
                    </button>

                    <button
                      onClick={() => generateTemplate('csv')}
                      disabled={generating}
                      className="flex items-center gap-1.5 px-3 py-1.5 border border-blue-200 rounded-md hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed bg-white text-xs"
                    >
                      <FaFileAlt className="w-3.5 h-3.5 text-blue-500 group-hover:scale-110 transition-transform" />
                      <span className="font-medium text-slate-700">
                        {translate('::App.Listforms.ImportManager.CsvTemplate')}
                      </span>
                    </button>
                  </div>
                </div>

                <div className="max-h-96 overflow-y-auto">
                  <table className="w-full">
                    <thead className="bg-slate-100 sticky top-0">
                      <tr>
                        <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
                          {translate('::App.Listform.ListformField.Column')}
                        </th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
                          {translate('::ListForms.ListFormEdit.Type')}
                        </th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
                          {translate('::App.Required')}
                        </th>
                        <th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">
                          {translate('::Abp.Mailing.Default')}
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {editableColumns.map((column: any) => (
                        <tr key={column.fieldName} className="hover:bg-slate-50">
                          <td className="px-2 py-2 font-medium text-slate-800">
                            {column.captionName || column.fieldName}
                          </td>
                          <td className="px-4 py-2 text-slate-600">
                            <span
                              className={`px-2 py-1 rounded text-xs font-medium ${
                                column.dataType === 'string'
                                  ? 'bg-blue-100 text-blue-800'
                                  : column.dataType === 'number'
                                    ? 'bg-green-100 text-green-800'
                                    : column.dataType === 'boolean'
                                      ? 'bg-purple-100 text-purple-800'
                                      : 'bg-orange-100 text-orange-800'
                              }`}
                            >
                              {column.dataType}
                            </span>
                          </td>
                          <td className="px-4 py-2">
                            {column.validationRuleDto.some(
                              (rule: any) => rule.type === 'required',
                            ) ? (
                              <span className="text-red-500 font-medium">
                                {translate('::App.Listforms.ImportManager.Yes')}
                              </span>
                            ) : (
                              <span className="text-slate-400">
                                {translate('::App.Listforms.ImportManager.No')}
                              </span>
                            )}
                          </td>
                          <td className="px-4 py-2 text-slate-600 text-sm">
                            {typeof column.defaultValue === 'object'
                              ? JSON.stringify(column.defaultValue)
                              : column.defaultValue}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {generating && (
                  <div className="flex items-center justify-center py-4">
                    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
                    <span className="ml-2 text-slate-600">
                      {translate('::App.Listforms.ImportManager.GeneratingTemplate')}
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* File Upload - 1/3 width on large screens, full width on mobile */}
            <div className="lg:col-span-1">
              <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 h-full">
                <h2 className="text-xl font-semibold text-slate-800 mb-4 flex items-center">
                  <FaUpload className="w-5 h-5 mr-2 text-green-500" />
                  {translate('::App.Listforms.ImportManager.UploadData')}
                </h2>
                <FileUploadArea
                  onFileUpload={handleFileUpload}
                  loading={loading}
                  acceptedFormats={['.xlsx', '.xls', '.csv']}
                />
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'preview' && (
        <div className="w-full">
          {currentSession ? (
            <div className="w-full">
              {currentSession.status === 'validating' ||
              currentSession.status === 'uploading' ||
              currentSession.status === 'processing' ? (
                <ImportProgress session={currentSession} />
              ) : (
                <div className="w-full">
                  <ImportPreview
                    session={currentSession}
                    gridDto={gridDto}
                    onExecute={handleImportExecute}
                    loading={loading}
                    importService={importService}
                    onPreviewLoaded={loadImportHistory}
                  />
                </div>
              )}
            </div>
          ) : (
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-12">
              <div className="text-center text-slate-500">
                <FaEye className="w-16 h-16 mx-auto mb-4 text-slate-300" />
                <div className="text-xl font-medium mb-2">
                  {translate('::App.Listforms.ImportManager.NoDataToPreview')}
                </div>
                <div>{translate('::App.Listforms.ImportManager.UploadFileToPreview')}</div>
              </div>
            </div>
          )}
        </div>
      )}

      {activeTab === 'history' && (
        <div className="bg-white rounded-xl shadow-sm border border-slate-200">
          <div className="p-3 border-b border-slate-200">
            <h2 className="text-xl font-semibold text-slate-800 flex items-center">
              <FaClock className="w-5 h-5 mr-2 text-indigo-500" />
              {translate('::App.Listforms.ImportManager.ImportHistory')}
            </h2>
          </div>

          <div className="divide-y divide-slate-100">
            {importHistory.map((session) => (
              <div
                key={session.id}
                className={`p-2 transition-colors border-l-4 ${
                  currentSession?.id === session.id
                    ? 'bg-blue-50 border-l-blue-500 hover:bg-blue-100'
                    : 'border-l-transparent hover:bg-slate-50'
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    {getStatusIcon(session.status)}
                    <div className="flex items-center space-x-2">
                      <div>
                        <div className="font-medium text-slate-800">{session.blobName}</div>
                        <div className="text-sm text-slate-500">
                          {new Date(session.creationTime).toLocaleString()}
                        </div>
                      </div>
                      {currentSession?.id === session.id && (
                        <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                          {translate('::App.Status.Active')}
                        </span>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center space-x-4">
                    <div className="text-right">
                      <div className="text-sm font-medium text-slate-800">
                        {session.totalRows} {translate('::App.Listforms.ImportManager.TotalRows')}
                      </div>
                    </div>

                    <span
                      className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusColor(
                        session.status,
                      )}`}
                    >
                      {session.status.charAt(0).toUpperCase() + session.status.slice(1)}
                    </span>

                    <div className="flex space-x-2">
                      <button
                        onClick={() => toggleSessionExecutes(session.id)}
                        className={`p-2 rounded-lg transition-colors ${
                          expandedSessions.has(session.id)
                            ? 'text-red-500 bg-red-50 hover:text-red-600 hover:bg-red-100'
                            : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
                        }`}
                        title={translate('::App.Listforms.ImportManager.ViewExecutionDetails')}
                      >
                        <FaEye className="w-4 h-4" />
                      </button>
                      <button
                        onClick={async () => {
                          // Execute bilgilerini manuel olarak yenile
                          if (sessionExecutes[session.id]) {
                            setLoadingExecutes((prev) => new Set([...prev, session.id]))
                            try {
                              const executes = await importService.getListFormImportExecutes(
                                session.id,
                              )
                              setSessionExecutes((prev) => ({
                                ...prev,
                                [session.id]: executes,
                              }))
                            } catch (error) {
                              console.error('Failed to refresh import executes:', error)
                            } finally {
                              setLoadingExecutes((prev) => {
                                const newSet = new Set(prev)
                                newSet.delete(session.id)
                                return newSet
                              })
                            }
                          }
                        }}
                        className="p-2 rounded-lg transition-colors text-slate-400 hover:text-blue-500 hover:bg-blue-50"
                        title={translate('::App.Listforms.ImportManager.RefreshExecutionDetails')}
                      >
                        <FaSync className="w-4 h-4" />
                      </button>
                      <button
                        onClick={async () => {
                          if (currentSession?.id === session.id) {
                            return // Don't delete if it's the current session
                          }
                          await importService.deleteHistory(session.id)
                          await loadImportHistory()
                        }}
                        disabled={currentSession?.id === session.id}
                        className={`p-2 rounded-lg transition-colors ${
                          currentSession?.id === session.id
                            ? 'text-slate-300 cursor-not-allowed'
                            : 'text-slate-400 hover:text-red-500 hover:bg-red-50'
                        }`}
                        title={
                          currentSession?.id === session.id
                            ? translate('::App.Listforms.ImportManager.CannotDeleteActiveSession')
                            : translate('::App.Listforms.ImportManager.DeleteImportSession')
                        }
                      >
                        <FaTrashAlt className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>

                {/* Execute Details Section */}
                {expandedSessions.has(session.id) && (
                  <div className="mt-3 bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                    <div className="p-3">
                      {loadingExecutes.has(session.id) ? (
                        <div className="flex items-center space-x-2 text-slate-500 py-2">
                          <FaSync className="w-4 h-4 animate-spin" />
                          <span className="text-sm">
                            {translate('::App.Listforms.ImportManager.LoadingExecutionDetails')}
                          </span>
                        </div>
                      ) : sessionExecutes[session.id] && sessionExecutes[session.id].length > 0 ? (
                        <div className="space-y-2">
                          {sessionExecutes[session.id].map((execute) => (
                            <div key={execute.id} className="p-3 rounded-lg">
                              <div className="flex items-center justify-between">
                                {/* Sol: Tarih */}
                                <div className="flex-shrink-0">
                                  <div className="text-lg text-slate-500">
                                    {new Date(execute.creationTime).toLocaleString()}
                                  </div>
                                </div>

                                {/* Orta: Executed, Valid, Errors */}
                                <div className="flex items-center space-x-4 text-xs text-slate-600">
                                  <div className="text-center">
                                    <div className="font-medium text-slate-800">
                                      {execute.execRows}
                                    </div>
                                    <div className="text-slate-500">
                                      {translate('::App.Listforms.ImportManager.Executed')}
                                    </div>
                                  </div>
                                  <div className="text-center">
                                    <div className="font-medium text-green-600">
                                      {execute.validRows}
                                    </div>
                                    <div className="text-slate-500">
                                      {translate('::App.Listforms.ImportManager.Valid')}
                                    </div>
                                  </div>
                                  <div className="text-center">
                                    <div className="font-medium text-red-600">
                                      {execute.errorRows}
                                    </div>
                                    <div className="text-slate-500">
                                      {translate('::App.Listforms.ImportManager.Errors')}
                                    </div>
                                  </div>
                                </div>

                                {/* Sağ: Status */}
                                <div className="flex items-center space-x-2 flex-shrink-0">
                                  {execute.status === 'completed' && (
                                    <FaCheckCircle className="w-4 h-4 text-green-500" />
                                  )}
                                  {execute.status === 'processing' && (
                                    <FaSync className="w-4 h-4 text-blue-500 animate-spin" />
                                  )}
                                  {execute.status === 'validating' && (
                                    <FaClock className="w-4 h-4 text-yellow-500" />
                                  )}
                                  {execute.status === 'failed' && (
                                    <FaRegBell className="w-4 h-4 text-red-500" />
                                  )}
                                  <div
                                    className={`text-xs font-medium ${
                                      execute.status === 'completed'
                                        ? 'text-green-600'
                                        : execute.status === 'processing'
                                          ? 'text-blue-600'
                                          : execute.status === 'validating'
                                            ? 'text-yellow-600'
                                            : 'text-red-600'
                                    }`}
                                  >
                                    {execute.status.charAt(0).toUpperCase() +
                                      execute.status.slice(1)}
                                    {execute.status === 'processing' && ` (${execute.progress}%)`}
                                  </div>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="text-sm text-slate-500 py-2">
                          {translate('::App.Listforms.ImportManager.NoExecutionRecords')}
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            ))}

            {importHistory.length === 0 && (
              <div className="p-12 text-center text-slate-500">
                <FaClock className="w-12 h-12 mx-auto mb-4 text-slate-300" />
                <div className="text-lg font-medium mb-2">
                  {translate('::App.Listforms.ImportManager.NoImportHistory')}
                </div>
                <div>{translate('::App.Listforms.ImportManager.ImportHistoryHint')}</div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
