'use client'

import { useState, useCallback, useMemo, memo } from 'react'
import { useMapLayers } from '../hooks/useMapLayers'

import type { LayerSwitcherProps, LayerConfig } from '../types'

const positionStyles: Record<string, React.CSSProperties> = {
  'top-left': { top: 10, left: 10 },
  'top-right': { top: 10, right: 10 },
  'bottom-left': { bottom: 10, left: 10 },
  'bottom-right': { bottom: 10, right: 10 },
}

function LayerSwitcherComponent({
  layers,
  position = 'top-right',
  title = 'Layers',
  collapsible = true,
  defaultCollapsed = false,
  showToggleAll = false,
  className = '',
  style,
  onChange,
}: LayerSwitcherProps) {
  const { setLayerVisibility } = useMapLayers()
  const [collapsed, setCollapsed] = useState(defaultCollapsed)

  const initialVisibility = useMemo(() => {
    const initial: Record<string, boolean> = {}
    layers.forEach((layer) => {
      initial[layer.id] = layer.defaultVisible !== false
    })
    return initial
  }, [layers])

  const [visibility, setVisibility] = useState<Record<string, boolean>>(initialVisibility)

  const handleToggle = useCallback(
    (layerId: string) => {
      const newVisible = !visibility[layerId]
      setVisibility((prev) => ({ ...prev, [layerId]: newVisible }))
      setLayerVisibility(layerId, newVisible)
      onChange?.(layerId, newVisible)
    },
    [visibility, setLayerVisibility, onChange]
  )

  const handleToggleAll = useCallback(
    (visible: boolean) => {
      const newVisibility: Record<string, boolean> = {}
      layers.forEach((layer) => {
        newVisibility[layer.id] = visible
        setLayerVisibility(layer.id, visible)
        onChange?.(layer.id, visible)
      })
      setVisibility(newVisibility)
    },
    [layers, setLayerVisibility, onChange]
  )

  const allVisible = useMemo(() => Object.values(visibility).every(Boolean), [visibility])
  const noneVisible = useMemo(() => Object.values(visibility).every((v) => !v), [visibility])

  const containerStyle = useMemo<React.CSSProperties>(
    () => ({
      position: 'absolute',
      ...positionStyles[position],
      backgroundColor: 'white',
      borderRadius: 8,
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
      padding: collapsed ? 8 : 12,
      minWidth: collapsed ? 'auto' : 150,
      zIndex: 1,
      ...style,
    }),
    [position, collapsed, style]
  )

  const headerStyle = useMemo<React.CSSProperties>(
    () => ({
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 8,
      cursor: collapsible ? 'pointer' : 'default',
      fontWeight: 600,
      fontSize: 12,
      color: '#333',
      marginBottom: collapsed ? 0 : 8,
    }),
    [collapsible, collapsed]
  )

  const itemStyle = useMemo<React.CSSProperties>(
    () => ({
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      padding: '4px 0',
      fontSize: 12,
      color: '#666',
      cursor: 'pointer',
    }),
    []
  )

  const checkboxStyle = useMemo<React.CSSProperties>(
    () => ({
      width: 14,
      height: 14,
      cursor: 'pointer',
    }),
    []
  )

  const groups = useMemo(() => {
    return layers.reduce(
      (acc, layer) => {
        const group = layer.group || ''
        if (!acc[group]) acc[group] = []
        acc[group].push(layer)
        return acc
      },
      {} as Record<string, LayerConfig[]>
    )
  }, [layers])

  const handleHeaderClick = collapsible ? () => setCollapsed(!collapsed) : undefined

  return (
    <div className={className} style={containerStyle}>
      <div style={headerStyle} onClick={handleHeaderClick}>
        <span>{title}</span>
        {collapsible && (
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            style={{
              transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
              transition: 'transform 0.2s',
            }}
          >
            <path d="M3 4.5L6 7.5L9 4.5" stroke="#666" fill="none" />
          </svg>
        )}
      </div>
      {!collapsed && (
        <div>
          {showToggleAll && (
            <div
              style={{
                ...itemStyle,
                borderBottom: '1px solid #eee',
                marginBottom: 4,
                paddingBottom: 8,
              }}
            >
              <button
                onClick={() => handleToggleAll(true)}
                disabled={allVisible}
                style={{
                  fontSize: 10,
                  padding: '2px 6px',
                  cursor: allVisible ? 'default' : 'pointer',
                  opacity: allVisible ? 0.5 : 1,
                }}
              >
                All
              </button>
              <button
                onClick={() => handleToggleAll(false)}
                disabled={noneVisible}
                style={{
                  fontSize: 10,
                  padding: '2px 6px',
                  cursor: noneVisible ? 'default' : 'pointer',
                  opacity: noneVisible ? 0.5 : 1,
                }}
              >
                None
              </button>
            </div>
          )}
          {Object.entries(groups).map(([group, groupLayers]) => (
            <div key={group || 'default'}>
              {group && (
                <div
                  style={{
                    fontSize: 10,
                    fontWeight: 600,
                    color: '#999',
                    marginTop: 8,
                    marginBottom: 4,
                    textTransform: 'uppercase',
                  }}
                >
                  {group}
                </div>
              )}
              {groupLayers.map((layer) => (
                <div
                  key={layer.id}
                  style={itemStyle}
                  onClick={() => handleToggle(layer.id)}
                >
                  <input
                    type="checkbox"
                    checked={visibility[layer.id]}
                    onChange={() => handleToggle(layer.id)}
                    style={checkboxStyle}
                  />
                  <span>{layer.label}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export const LayerSwitcher = memo(LayerSwitcherComponent)
