import React from 'react';
import { MessageSquare, Mail, Hash, Users, Settings, Plus } from 'lucide-react';
import { CommunicationTab } from '../types';
import { Button, Tabs } from '@krona/ui';

interface CommunicationsHeaderProps {
  activeTab: CommunicationTab;
  onTabChange: (tab: CommunicationTab) => void;
  onAddChannel: () => void;
  unreadChats: number;
  unreadEmails: number;
  unreadChannels: number;
}

export function CommunicationsHeader({
  activeTab,
  onTabChange,
  onAddChannel,
  unreadChats,
  unreadEmails,
  unreadChannels,
}: CommunicationsHeaderProps) {
  const tabItems = [
    {
      id: 'messengers',
      label: 'Мессенджеры',
      badge: unreadChats > 0 ? unreadChats : undefined,
      icon: <MessageSquare className="w-4 h-4" />,
    },
    {
      id: 'email',
      label: 'Email',
      badge: unreadEmails > 0 ? unreadEmails : undefined,
      icon: <Mail className="w-4 h-4" />,
    },
    {
      id: 'channels',
      label: 'Каналы',
      badge: unreadChannels > 0 ? unreadChannels : undefined,
      icon: <Hash className="w-4 h-4" />,
    },
    {
      id: 'contacts',
      label: 'Контакты',
      icon: <Users className="w-4 h-4" />,
    },
    {
      id: 'settings',
      label: 'Настройки',
      icon: <Settings className="w-4 h-4" />,
    },
  ];

  return (
    <header className="relative bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] px-3 sm:px-6 pt-3 sm:pt-5 pb-2 sm:pb-3 shrink-0 overflow-hidden">
      <div className="hidden lg:flex items-center gap-3 absolute right-8 top-4 text-right pointer-events-none opacity-50 font-serif italic text-sm text-[var(--krona-text-secondary)]">
        <span>Больше, чем общение с поддержкой</span>
        <svg
          className="w-8 h-8 text-[var(--krona-gold)] shrink-0"
          viewBox="0 0 32 32"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.2"
          aria-hidden="true"
        >
          <path d="M16 28C16 18 20 10 28 6" strokeLinecap="round" />
          <path d="M16 24C12 20 8 18 4 17" strokeLinecap="round" />
          <path d="M16 19C20 16 24 15 27 15" strokeLinecap="round" />
          <path d="M16 14C12 11 9 10 6 10" strokeLinecap="round" />
          <path d="M18 10C21 8 24 7 26 7" strokeLinecap="round" />
          <circle cx="28" cy="6" r="1.5" fill="currentColor" />
          <circle cx="4" cy="17" r="1.5" fill="currentColor" />
          <circle cx="27" cy="15" r="1.5" fill="currentColor" />
          <circle cx="6" cy="10" r="1.5" fill="currentColor" />
        </svg>
      </div>

      <div className="flex items-center justify-between gap-3 mb-2 sm:mb-4">
        <div>
          <h1 className="text-xl sm:text-3xl font-bold font-serif text-[var(--krona-text-primary)]">
            Коммуникации
          </h1>
          <p className="hidden sm:block text-sm text-[var(--krona-text-secondary)] mt-1">
            Все сообщения, почта и каналы компании в одном пространстве
          </p>
        </div>

        {/* Mobile compact action button */}
        <button
          type="button"
          onClick={onAddChannel}
          className="sm:hidden h-10 w-10 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] font-medium flex items-center justify-center shrink-0 transition-colors active:scale-95"
          aria-label="Добавить канал"
        >
          <Plus className="w-4 h-4 text-[var(--krona-primary)]" />
          <span className="sr-only">Добавить канал</span>
        </button>
      </div>

      <div className="flex items-center justify-between gap-3 min-w-0">
        <div className="flex-1 min-w-0 overflow-x-auto scrollbar-none">
          <Tabs
            items={tabItems}
            activeId={activeTab}
            onChange={(id) => onTabChange(id as CommunicationTab)}
            className="border-b-0 whitespace-nowrap"
          />
        </div>

        {/* Desktop / Tablet full button */}
        <div className="hidden sm:flex items-center gap-2 shrink-0">
          <Button
            variant="secondary"
            size="sm"
            onClick={onAddChannel}
            leftIcon={<Plus className="w-4 h-4 text-[var(--krona-primary)]" />}
          >
            Добавить канал
          </Button>
        </div>
      </div>
    </header>
  );
}