src/components/layout/TopNavigation.tsx

'use client';

interface TopNavigationProps {
  onTogglePanel?: () => void;
  panelOpen?: boolean;
  onToggleLeftPanel?: () => void;
  leftPanelOpen?: boolean;
}

export function TopNavigation({ onTogglePanel, panelOpen, onToggleLeftPanel, leftPanelOpen }: TopNavigationProps) {
  return (
    <nav className="top-nav app-nav">
      {/* Brand */}
      <div className="nav-brand" style={{ gap: '0.5rem' }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/Emirates NBD Bank Logo.png"
          alt="Emirates NBD Logo"
          style={{
            height: '24px',
            width: 'auto',
            objectFit: 'contain',
          }}
        />
        <div>
          <div className="nav-title" style={{ color: 'var(--enbd-blue)', fontWeight: 700 }}>IRIS FINBOT</div>
        </div>
      </div>

      {/* Center title */}
      <div className="nav-center-title">
        <span className="nav-center-title-text">
          <span className="nav-title-prefix">Investment Relations</span>
          <span className="nav-title-split" aria-hidden="true" />
          <span className="nav-title-intelligence">Intelligence System (IRIS)</span>
        </span>
      </div>

      {/* Actions */}
      <div className="nav-actions">
        {/* Toggle FAQ sidebar */}
        <button
          className="btn btn-ghost"
          style={{
            padding: '0.4rem 0.875rem',
            fontSize: '0.78rem',
            borderColor: leftPanelOpen ? 'transparent' : 'var(--enbd-blue-border)',
            color: leftPanelOpen ? 'var(--text-secondary)' : 'var(--enbd-blue)',
            background: leftPanelOpen ? 'transparent' : 'var(--enbd-blue-muted)',
          }}
          onClick={onToggleLeftPanel}
          title={leftPanelOpen ? 'Hide FAQ sidebar' : 'Show FAQ sidebar'}
          id="toggle-left-panel-btn"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="3" y1="12" x2="21" y2="12"/>
            <line x1="3" y1="6" x2="21" y2="6"/>
            <line x1="3" y1="18" x2="21" y2="18"/>
          </svg>
          {leftPanelOpen ? 'Hide FAQ' : 'Show FAQ'}
        </button>

        {/* Toggle PDF Viewer */}
        <button
          className="btn btn-ghost"
          style={{ padding: '0.4rem 0.875rem', fontSize: '0.78rem' }}
          onClick={onTogglePanel}
          title={panelOpen ? 'Close document viewer' : 'Open document viewer'}
          id="toggle-doc-panel-btn"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
            <line x1="9" y1="3" x2="9" y2="21"/>
          </svg>
          {panelOpen ? 'Hide Viewer' : 'PDF Viewer'}
        </button>

        <div
          className="nav-avatar"
          title="IR Analyst — Emirates NBD"
          id="user-avatar-btn"
          aria-label="User profile"
        >
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M20 21a8 8 0 0 0-16 0"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
        </div>
      </div>
    </nav>
  );
}