import { Layer, Book1, ArrowLeft2, Setting2 } from 'iconsax-react'
import { clx } from '@/helpers/utils'
import { useState } from 'react'
import PagesPanel from './PagesPanel'
import LayersList from './LayersList'
import SettingsPanel from './SettingsPanel'

type TabType = 'pages' | 'layers' | 'settings'

type LayersPanelProps = {
  isOpen: boolean
  setIsOpen: (isOpen: boolean) => void
  catalogSize?: string
}

const TAB_LABELS: Record<TabType, string> = {
  pages: 'صفحات',
  layers: 'لایه ها',
  settings: 'تنظیمات',
}

const LayersPanel = ({ isOpen, setIsOpen, catalogSize }: LayersPanelProps) => {
  const [activeTab, setActiveTab] = useState<TabType>('pages')

  if (!isOpen) {
    return (
      <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
        <div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
          <button
            onClick={() => { setActiveTab('pages'); setIsOpen(true) }}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Book1 size={20} color="black" />
          </button>
          <button
            onClick={() => { setActiveTab('layers'); setIsOpen(true) }}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Layer size={20} color="black" />
          </button>
          <button
            onClick={() => { setActiveTab('settings'); setIsOpen(true) }}
            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Setting2 size={20} color="black" />
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
      <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
        <button
          onClick={() => setActiveTab('pages')}
          className={clx(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeTab === 'pages' ? 'bg-gray-100' : 'hover:bg-gray-200'
          )}
        >
          <Book1 variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={20} color="black" />
        </button>

        <button
          onClick={() => setActiveTab('layers')}
          className={clx(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeTab === 'layers' ? 'bg-gray-100' : 'hover:bg-gray-200'
          )}
        >
          <Layer variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={20} color="black" />
        </button>

        <button
          onClick={() => setActiveTab('settings')}
          className={clx(
            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
            activeTab === 'settings' ? 'bg-gray-100' : 'hover:bg-gray-200'
          )}
        >
          <Setting2 variant={activeTab === 'settings' ? 'Bold' : 'Outline'} size={20} color="black" />
        </button>
      </div>

      <div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[232px]">
        <div className="bg-white rounded-r-4xl flex flex-col h-full">
          <div className="flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-1">
              <button
                onClick={() => setIsOpen(false)}
                className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
              >
                <ArrowLeft2 size={20} color="black" />
              </button>
              <h2 className="text-base font-medium">
                {TAB_LABELS[activeTab]}
              </h2>
            </div>
          </div>

          {activeTab === 'pages' && <PagesPanel catalogSize={catalogSize} />}
          {activeTab === 'layers' && <LayersList />}
          {activeTab === 'settings' && <SettingsPanel />}
        </div>
      </div>
    </div>
  )
}

export default LayersPanel

