import { useState, useCallback } from 'react';

export type Page = 'home' | 'dashboard' | 'data-sources' | 'faq';

export default function Header({
  activePage,
  onPageChange,
  theme,
  onToggleTheme,
}: {
  activePage: Page;
  onPageChange: (page: Page) => void;
  theme: 'light' | 'dark';
  onToggleTheme: () => void;
}) {
  const [copied, setCopied] = useState(false);

  const handleShare = useCallback(() => {
    navigator.clipboard.writeText(window.location.href).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  }, []);

  const tabClass = (page: Page) =>
    `px-3 py-1.5 rounded text-sm font-medium transition-colors ${
      activePage === page
        ? 'bg-navy-700 text-white'
        : 'text-warm-300 hover:bg-navy-800 hover:text-white'
    }`;

  return (
    <header className="h-12 bg-navy-900 text-white flex items-center justify-between px-4 shrink-0">
      <div className="flex items-center gap-4">
        <button
          className="flex items-center gap-2 hover:opacity-80 transition-opacity"
          onClick={() => onPageChange('home')}
        >
          <svg
            className="w-5 h-5 text-teal-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
            />
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
            />
          </svg>
          <span className="font-semibold text-lg">Narrowit</span>
        </button>
        <nav className="flex items-center gap-2">
          <button className={tabClass('dashboard')} onClick={() => onPageChange('dashboard')}>
            Dashboard
          </button>
          <button className={tabClass('data-sources')} onClick={() => onPageChange('data-sources')}>
            Data Sources
          </button>
          <button className={tabClass('faq')} onClick={() => onPageChange('faq')}>
            FAQ
          </button>
        </nav>
      </div>
      <div className="flex items-center gap-2">
        <button
          onClick={onToggleTheme}
          className="flex items-center justify-center w-8 h-8 rounded bg-navy-800 hover:bg-navy-700 transition-colors"
          title={`Theme: ${theme}`}
        >
          {theme === 'light' ? (
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
              />
            </svg>
          ) : (
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
              />
            </svg>
          )}
        </button>
        {activePage === 'dashboard' && (
          <button
            onClick={handleShare}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-navy-800 hover:bg-navy-700 transition-colors text-sm"
          >
            {copied ? (
              <>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
                Copied!
              </>
            ) : (
              <>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
                  />
                </svg>
                Share
              </>
            )}
          </button>
        )}
      </div>
    </header>
  );
}
