import { Avatar, Badge, Button, Flex, Input } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faMagnifyingGlass, faBars } from '@fortawesome/free-solid-svg-icons';
import { brandTokens } from '../../lib/theme';
import { FoundationStatus } from './FoundationStatus';

interface TopbarProps {
  onToggleSidebar?: () => void;
}

/**
 * Topbar canônica do SAR (80px de altura — brand.md).
 * Apple-inspired clean: logo à esquerda, search central, notif + perfil à direita.
 * Variantes por cockpit: search desabilitada para Rafael mobile (vai pro bottom nav).
 */
export function Topbar({ onToggleSidebar }: TopbarProps) {
  return (
    <Flex
      align="center"
      justify="space-between"
      style={{
        height: 'var(--layout-topbar-height)',
        padding: '0 var(--space-lg)',
        background: 'var(--bg-surface)',
        borderBottom: '1px solid var(--border-subtle)',
        position: 'sticky',
        top: 0,
        zIndex: 'var(--z-sticky)',
      }}
    >
      {/* Lado esquerdo: hamburger (mobile) + logo */}
      <Flex align="center" gap={16}>
        <Button
          type="text"
          icon={<FontAwesomeIcon icon={faBars} />}
          onClick={onToggleSidebar}
          aria-label="Alternar menu"
          style={{ display: 'inline-flex' }}
        />
        <Flex align="center" gap={12}>
          <img
            src="/sar-icon.png"
            alt="SAR"
            style={{ height: 40, width: 'auto' }}
          />
          <Flex vertical gap={0}>
            <span
              style={{
                fontSize: 'var(--text-lg)',
                fontWeight: 'var(--font-weight-bold)',
                color: 'var(--text-main)',
                lineHeight: 1.1,
              }}
            >
              SAR
            </span>
            <span
              style={{
                fontSize: 'var(--text-2xs)',
                color: 'var(--text-muted)',
                letterSpacing: '0.05em',
                textTransform: 'uppercase',
                fontWeight: 'var(--font-weight-medium)',
              }}
            >
              Força de Vendas
            </span>
          </Flex>
        </Flex>
      </Flex>

      {/* Centro: search (Sandra/Daniel/Alice) */}
      <Flex flex={1} justify="center" style={{ maxWidth: 480, margin: '0 var(--space-2xl)' }}>
        <Input
          size="large"
          placeholder="Buscar cliente, pedido, produto..."
          prefix={
            <FontAwesomeIcon
              icon={faMagnifyingGlass}
              style={{ color: 'var(--text-muted)' }}
            />
          }
          style={{ borderRadius: 12 }}
          aria-label="Buscar"
        />
      </Flex>

      {/* Lado direito: status fundação + notificações + perfil */}
      <Flex align="center" gap={16}>
        <FoundationStatus />
        <Badge count={3} color={brandTokens.red} offset={[-4, 4]}>
          <Button
            type="text"
            size="large"
            icon={<FontAwesomeIcon icon={faBell} />}
            aria-label="Notificações"
          />
        </Badge>
        <Avatar
          size={40}
          style={{
            background: 'var(--jcs-blue-light)',
            color: 'var(--jcs-blue)',
            fontWeight: 'var(--font-weight-semibold)',
            cursor: 'pointer',
          }}
        >
          R
        </Avatar>
      </Flex>
    </Flex>
  );
}
