'use client'

import React, { useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Sidebar from '../../../components/ui/Sidebar'
import useNavigationStore from '../../store/navigationStore'
import ReportsList from '../../../components/reports/ReportsList'
import ExportMenu from '../../../components/ui/ExportMenu'
import detectorsData from '../../../data/detectors.json'
import axios from 'axios'

const ReportsPage: React.FC = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { currentObject, setCurrentObject } = useNavigationStore()

  const urlObjectId = searchParams.get('objectId')
  const urlObjectTitle = searchParams.get('objectTitle')
  const objectId = currentObject.id || urlObjectId
  const objectTitle = currentObject.title || urlObjectTitle

  useEffect(() => {
    if (urlObjectId && urlObjectTitle && (!currentObject.id || currentObject.id !== urlObjectId)) {
      setCurrentObject(urlObjectId, urlObjectTitle)
    }
  }, [urlObjectId, urlObjectTitle, currentObject.id, setCurrentObject])

  const handleBackClick = () => {
    router.push('/dashboard')
  }

  const handleExport = async (format: 'csv' | 'pdf') => {
    try {
      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_API_URL}/account/get-reports/`,
        { report_format: format },
        {
          responseType: 'blob',
          headers: {
            'Content-Type': 'application/json',
          },
        }
      )

      const contentDisposition = response.headers['content-disposition']
      const filenameMatch = contentDisposition?.match(/filename="(.+)"/)
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').replace(/T/g, '_')
      const filename = filenameMatch ? filenameMatch[1] : `alerts_report_${timestamp}.${format}`

      const url = window.URL.createObjectURL(new Blob([response.data]))
      const link = document.createElement('a')
      link.href = url
      link.download = filename

      document.body.appendChild(link)
      link.click()

      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    } catch (error) {
      console.error('Error:', error)
    }
  }

  return (
    <div className="flex h-screen bg-[#0e111a]">
      <Sidebar
        activeItem={9} // Reports
      />

      <div className="flex flex-1 flex-col">
        <header className="border-b border-gray-700 bg-[#161824] px-6 py-4">
          <div className="flex items-center gap-4">
            <button
              onClick={handleBackClick}
              className="text-gray-400 transition-colors hover:text-white"
              aria-label="Назад к дашборду"
            >
              <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <nav className="flex items-center gap-2 text-sm">
              <span className="text-gray-400">Дашборд</span>
              <span className="text-gray-600">/</span>
              <span className="text-white">{objectTitle || 'Объект'}</span>
              <span className="text-gray-600">/</span>
              <span className="text-white">Отчеты</span>
            </nav>
          </div>
        </header>

        <div className="flex-1 overflow-auto p-6">
          <div className="mb-6">
            <div className="mb-6 flex items-center justify-between">
              <h1 className="text-2xl font-semibold text-white">Отчеты по датчикам</h1>

              <ExportMenu onExport={handleExport} />
            </div>

            <ReportsList objectId={objectId || undefined} detectorsData={detectorsData} />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ReportsPage