import { useEffect } from 'react'
import { useTreeStore } from './store/store'
import { Sidebar } from './components/layout/Sidebar'
import { ChatPanel } from './components/layout/ChatPanel'
import { KeyNotesPanel } from './components/layout/KeyNotesPanel'

export default function App() {
  const themes = useTreeStore((s) => s.themes)
  const addMainTheme = useTreeStore((s) => s.addMainTheme)

  useEffect(() => {
    if (themes.length === 0) {
      const id = addMainTheme('Tema Principal')
      useTreeStore.getState().addSubTheme(id, 'Subtema 1')
    }
  }, [themes.length, addMainTheme])

  return (
    <div className="flex h-full w-full">
      <aside className="w-72 shrink-0 border-r border-slate-700/60 bg-slate-950/40">
        <Sidebar />
      </aside>
      <main className="flex min-w-0 flex-1 flex-col">
        <ChatPanel />
      </main>
      <aside className="w-96 shrink-0 border-l border-slate-700/60 bg-slate-950/40">
        <KeyNotesPanel />
      </aside>
    </div>
  )
}