import { useEffect, useRef } from 'react'
import ProjectList from './components/Projects/ProjectList'
import MainCalendar from './components/Calendar/MainCalendar'
import FocusDrawer from './components/FocusView/FocusDrawer'
import ToastContainer from './components/UI/Toast'
import useProjectStore from './store/useProjectStore'
import useUIStore from './store/useUIStore'

export default function App() {
  const { loadProjects } = useProjectStore()
  const { sidebarOpen, toggleSidebar } = useUIStore()
  const calApiRef    = useRef(null)
  const newProjectFn = useRef(null)

  useEffect(() => {
    loadProjects()
  }, [])

  useEffect(() => {
    const handler = (e) => {
      if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return
      if (e.key === 'n' || e.key === 'N') { e.preventDefault(); newProjectFn.current?.() }
      if (e.key === 'b' || e.key === 'B') toggleSidebar()
      if (e.key === 'ArrowLeft'  && calApiRef.current) calApiRef.current.prev()
      if (e.key === 'ArrowRight' && calApiRef.current) calApiRef.current.next()
      if ((e.key === 't' || e.key === 'T') && calApiRef.current) calApiRef.current.today()
    }
    document.addEventListener('keydown', handler)
    return () => document.removeEventListener('keydown', handler)
  }, [toggleSidebar])

  return (
    <div className="flex h-screen bg-surface overflow-hidden">
      {/* Sidebar */}
      <aside
        className={`flex-shrink-0 bg-surface-raised border-r border-surface-border flex flex-col h-full transition-[width] duration-300 overflow-hidden ${sidebarOpen ? 'w-72' : 'w-0'}`}
        style={{ '--sidebar-width': '18rem' }}
      >
        <ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
      </aside>

      {/* Toggle button — docked to left edge, never overlaps calendar header */}
      <button
        onClick={toggleSidebar}
        title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar  [B]`}
        className={`fixed z-30 flex items-center justify-center
          border-surface-border bg-surface-raised hover:bg-surface-elevated
          transition-all duration-300
          ${sidebarOpen
            ? 'top-16 w-6 h-10 rounded-r-lg border border-l-0 hover:border-gold/40'
            : 'top-4 left-4 w-16 h-16 rounded-xl border hover:border-gold/30 shadow-lg'
          }`}
        style={{ left: sidebarOpen ? '18rem' : '1rem' }}
      >
        {sidebarOpen ? (
          <span className="text-text-muted hover:text-gold text-[11px]">◀</span>
        ) : (
          <img
            src="/logo.png"
            alt="FabDash"
            className="w-10 h-10 object-contain rounded"
            onError={e => {
              e.target.style.display = 'none'
              e.target.nextSibling.style.display = 'flex'
            }}
          />
        )}
        {/* Fallback when no logo file present */}
        <span className="text-gold font-black text-sm tracking-widest hidden flex-col items-center leading-none">
          <span>FAB</span><span className="text-white">DASH</span>
        </span>
      </button>

      {/* Main content */}
      <main className="flex-1 overflow-hidden">
        <MainCalendar onCalendarReady={api => { calApiRef.current = api }} />
      </main>

      <FocusDrawer />
      <ToastContainer />
    </div>
  )
}