import React, { useState, useEffect } from 'react';
import { Search, Bell, Settings, Sun, Moon } from 'lucide-react';

interface HeaderProps {
  currentPage?: string;
}

export const Header: React.FC<HeaderProps> = ({ currentPage = 'Dashboard' }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' || 'dark';
    setTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      console.log('Search query:', searchQuery);
      // Implement search functionality
    }
  };

  return (
    <header className="header" role="banner">
      {/* Left Section - Breadcrumb */}
      <div className="header-left">
        <div className="header-breadcrumb">
          <div className="breadcrumb-item">
            <a href="/">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/>
              </svg>
            </a>
          </div>
          <span className="breadcrumb-separator">/</span>
          <div className="breadcrumb-item active">
            <span>{currentPage}</span>
          </div>
        </div>
      </div>

      {/* Center Section - Search */}
      <div className="header-center">
        <form className="header-search" onSubmit={handleSearch}>
          <Search className="header-search-icon" size={16} />
          <input
            type="text"
            className="header-search-input"
            placeholder="Search..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </form>
      </div>

      {/* Right Section - Actions */}
      <div className="header-right">
        {/* API Status Indicator */}
        <div className="status-indicator">
          <span className="status-dot"></span>
          <span>API Live</span>
        </div>

        {/* Notifications */}
        <button className="icon-btn" aria-label="Notifications" title="Notifications">
          <Bell size={20} />
        </button>

        {/* Theme Toggle */}
        <button
          className="icon-btn"
          aria-label="Toggle theme"
          title="Toggle theme"
          onClick={toggleTheme}
        >
          {theme === 'light' ? <Sun size={20} /> : <Moon size={20} />}
        </button>

        {/* Settings */}
        <a href="/settings" className="icon-btn" aria-label="Settings" title="Settings">
          <Settings size={20} />
        </a>
      </div>
    </header>
  );
};

export default Header;