import React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'

const STORAGE_KEY = 'wpvfb_left_rail_collapsed'

/** Collapsed state remembered by the rail (false when none / storage blocked). */
export function readRailCollapsed() {
  try { return window.localStorage.getItem(STORAGE_KEY) === '1' } catch (e) { return false }
}
export function storeRailCollapsed(v) {
  try { window.localStorage.setItem(STORAGE_KEY, v ? '1' : '0') } catch (e) { /* ignore */ }
}

/**
 * Left icon rail shell (the reference builder F:7238-7374): 84px ↔ 48px with a chevron tab on the right edge, #fafafa background.
 * Props: collapsed, onToggle(next), children (render FloatingIcons with collapsed={collapsed}), footer (optional).
 */
export default function LeftRail({ collapsed = false, onToggle, children, footer }) {
  const toggle = () => {
    storeRailCollapsed(!collapsed)
    if (onToggle) onToggle(!collapsed)
  }
  return (
    <aside
      className={`relative flex-shrink-0 flex flex-col items-center bg-[#fafafa] border-r border-slate-200 transition-[width] duration-200 ${collapsed ? 'w-[48px]' : 'w-[84px]'}`}
      data-testid="left-rail"
      data-collapsed={collapsed ? 'true' : 'false'}
    >
      <div className="flex-1 w-full overflow-y-auto overflow-x-hidden flex flex-col items-center py-2">{children}</div>
      {footer && !collapsed && <div className="pb-2 text-[10px] text-slate-400">{footer}</div>}
      <button
        type="button"
        onClick={toggle}
        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        aria-expanded={!collapsed}
        title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
        className="absolute top-1/2 -right-3 -translate-y-1/2 w-6 h-10 rounded-r-md bg-white border border-l-0 border-slate-200 shadow-sm flex items-center justify-center text-slate-400 hover:text-slate-700 hover:bg-slate-50 z-20 cursor-pointer"
      >
        {collapsed ? <ChevronRight className="w-3.5 h-3.5" aria-hidden="true" /> : <ChevronLeft className="w-3.5 h-3.5" aria-hidden="true" />}
      </button>
    </aside>
  )
}