import React from 'react'
import { FaTachometerAlt, FaDatabase, FaBolt, FaServer, FaPuzzlePiece } from 'react-icons/fa';
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useLocation, useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Container } from '../shared'

interface DeveloperLayoutProps {
  children: React.ReactNode
}

const DeveloperLayout: React.FC<DeveloperLayoutProps> = ({ children }) => {
  const { translate } = useLocalization()
  const location = useLocation()
  const navigate = useNavigate()

  const navigation = [
    {
      id: 'dashboard',
      label: translate('::App.DeveloperKit.Dashboard'),
      icon: FaTachometerAlt,
      path: ROUTES_ENUM.protected.saas.developerKit,
    },
    {
      id: 'entities',
      label: translate('::App.DeveloperKit.Entity'),
      icon: FaDatabase,
      path: ROUTES_ENUM.protected.saas.developerKitEntities,
    },
    {
      id: 'migrations',
      label: translate('::App.DeveloperKit.Migrations'),
      icon: FaBolt,
      path: ROUTES_ENUM.protected.saas.developerKitMigrations,
    },
    {
      id: 'endpoints',
      label: translate('::App.DeveloperKit.Endpoints'),
      icon: FaServer,
      path: ROUTES_ENUM.protected.saas.developerKitEndpoints,
    },
    {
      id: 'components',
      label: translate('::App.DeveloperKit.Components'),
      icon: FaPuzzlePiece,
      path: ROUTES_ENUM.protected.saas.developerKitComponents,
    },
  ]

  return (
    <Container>
      <div className="mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar */}
          <div className="lg:w-64 flex-shrink-0 p-4 bg-gray-50">
            <nav className="space-y-2">
              {navigation.map((item) => {
                const Icon = item.icon
                const isActive = location.pathname === item.path
                return (
                  <button
                    key={item.id}
                    onClick={() => navigate(item.path)}
                    className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
                      isActive
                        ? 'bg-blue-100 text-blue-700'
                        : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="font-medium">{item.label}</span>
                  </button>
                )
              })}
            </nav>
          </div>

          {/* Main Content */}
          <div className="flex-1">{children}</div>
        </div>
      </div>
    </Container>
  )
}

export default DeveloperLayout