import { Blocks, FolderHeart, MessageSquare, Sparkles } from 'lucide-react';
import { useUIStore } from '../../store/uiStore';
import '../../styles/panels.css';

export function PanelLaunchers() {
  const libraryVisible = useUIStore((s) => s.panels.library.visible);
  const chatVisible = useUIStore((s) => s.panels.chat.visible);
  const assetsVisible = useUIStore((s) => s.panels.assets.visible);
  const togglePanel = useUIStore((s) => s.togglePanel);
  const enterCreateView = useUIStore((s) => s.enterCreateView);

  return (
    <>
      <button
        type="button"
        className="panel-launcher panel-launcher--create"
        onClick={enterCreateView}
        title="Open Create view"
        aria-label="Open Create view"
      >
        <Sparkles
          className="panel-launcher__icon"
          size={18}
          strokeWidth={1.65}
          aria-hidden="true"
          focusable="false"
        />
      </button>

      <button
        type="button"
        className={`panel-launcher panel-launcher--assets${assetsVisible ? ' panel-launcher--active' : ''}`}
        onClick={() => togglePanel('assets')}
        title="Toggle assets (characters, moodboards, styles)"
        aria-label="Toggle assets panel"
        aria-pressed={assetsVisible}
      >
        <FolderHeart className="panel-launcher__icon" size={18} strokeWidth={1.65} aria-hidden="true" focusable="false" />
      </button>

      <button
        type="button"
        className={`panel-launcher panel-launcher--nodes${libraryVisible ? ' panel-launcher--active' : ''}`}
        onClick={() => togglePanel('library')}
        title="Toggle node library"
        aria-label="Toggle node library"
        aria-pressed={libraryVisible}
      >
        <Blocks className="panel-launcher__icon" size={18} strokeWidth={1.65} aria-hidden="true" focusable="false" />
      </button>

      <button
        type="button"
        className={`panel-launcher panel-launcher--chat${chatVisible ? ' panel-launcher--active' : ''}`}
        onClick={() => togglePanel('chat')}
        title="Toggle chat panel"
        aria-label="Toggle chat panel"
        aria-pressed={chatVisible}
      >
        <MessageSquare className="panel-launcher__icon" size={18} strokeWidth={1.65} aria-hidden="true" focusable="false" />
      </button>
    </>
  );
}
