'use client';

import { Icon } from '@/components/ui/Icon';
import { IconButton } from '@/components/ui/IconButton';
import { useTheme } from '@/components/ThemeProvider';
import { usePageHeader } from './PageHeaderContext';

export function TopBar() {
  const { header } = usePageHeader();
  const { theme, toggleTheme } = useTheme();

  const { title, subtitle, crumbs, actions } = header;

  return (
    <header
      style={{
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'space-between',
        padding: '22px 32px 18px',
        borderBottom: '1px solid var(--border)',
        background: 'var(--bg)',
        position: 'sticky',
        top: 0,
        zIndex: 5,
        backdropFilter: 'blur(8px)',
      }}
    >
      <div>
        {crumbs && crumbs.length > 1 && (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              fontSize: 11,
              color: 'var(--ink-muted)',
              marginBottom: 6,
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              fontWeight: 500,
            }}
          >
            {crumbs.map((c, i) => (
              <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                {i > 0 && <Icon name="chev" size={12} style={{ opacity: 0.4 }} />}
                <span style={i === crumbs.length - 1 ? { color: 'var(--ink)' } : undefined}>
                  {c}
                </span>
              </span>
            ))}
          </div>
        )}
        <h1
          style={{
            fontFamily: 'var(--font-display)',
            fontSize: 28,
            fontWeight: 500,
            letterSpacing: '-0.02em',
            color: 'var(--ink-strong)',
            margin: 0,
            lineHeight: 1.1,
          }}
        >
          {title}
        </h1>
        {subtitle && (
          <div style={{ fontSize: 13, color: 'var(--ink-muted)', marginTop: 4 }}>{subtitle}</div>
        )}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {/* Search */}
        <div
          style={{
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            background: 'var(--bg-elev)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--r-sm)',
            padding: '6px 10px',
            minWidth: 280,
            color: 'var(--ink-muted)',
          }}
        >
          <Icon name="search" size={14} />
          <input
            placeholder="Search medicines, regimens, stores…"
            style={{
              border: 0,
              outline: 0,
              background: 'transparent',
              fontSize: 13,
              flex: 1,
              color: 'var(--ink)',
            }}
            aria-label="Search"
          />
          <kbd
            style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              padding: '2px 5px',
              background: 'var(--bg-inset)',
              borderRadius: 4,
              border: '1px solid var(--border)',
              color: 'var(--ink-muted)',
            }}
          >
            ⌘K
          </kbd>
        </div>

        {/* Notifications */}
        <IconButton icon="bell" label="Notifications" dot />

        {/* Theme toggle */}
        <IconButton
          icon={theme === 'dark' ? 'sun' : 'moon'}
          label="Toggle theme"
          onClick={toggleTheme}
        />

        {/* Page actions slot */}
        {actions}
      </div>
    </header>
  );
}
