/**
 * JARVIS — Status Bar (top header)
 * Shows session title, connection status, and settings button.
 */

import React, { useState } from 'react'
import { Menu, Circle, Settings } from 'lucide-react'
import useAppStore from '../../stores/appStore'
import clsx from 'clsx'
import SettingsModal from './SettingsModal'
import { useKeyboardShortcut } from '../../hooks/index'

export default function StatusBar() {
  const { toggleSidebar, modelStatus, activeSessionId, sessions } = useAppStore()
  const [settingsOpen, setSettingsOpen] = useState(false)
  const activeSession = sessions.find((s) => s.id === activeSessionId)
  const isOnline = modelStatus?.status === 'online'

  // Ctrl+, opens settings
  useKeyboardShortcut(',', () => setSettingsOpen(true), { ctrl: true })

  return (
    <>
      <header className="h-12 flex items-center px-4 gap-3
                          border-b border-jarvis-border bg-jarvis-surface/80 backdrop-blur-sm
                          flex-shrink-0 z-10">
        {/* Sidebar toggle */}
        <button
          onClick={toggleSidebar}
          className="p-1.5 rounded-lg text-jarvis-dim hover:text-jarvis-text
                     hover:bg-jarvis-panel transition-colors"
        >
          <Menu size={16} />
        </button>

        {/* Session title */}
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-jarvis-text truncate">
            {activeSession?.title || 'JARVIS'}
          </p>
        </div>

        {/* Status indicator */}
        <div className="flex items-center gap-1.5">
          <Circle
            size={7}
            className={clsx(
              'fill-current',
              isOnline ? 'text-jarvis-success' : 'text-jarvis-dim',
            )}
          />
          <span className="text-[11px] font-mono text-jarvis-muted">
            {isOnline ? 'ONLINE' : 'CONNECTING'}
          </span>
        </div>

        {/* Settings */}
        <button
          onClick={() => setSettingsOpen(true)}
          title="System status (Ctrl+,)"
          className="p-1.5 rounded-lg text-jarvis-dim hover:text-jarvis-text
                     hover:bg-jarvis-panel transition-colors"
        >
          <Settings size={15} />
        </button>
      </header>

      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </>
  )
}