import React, { useState } from 'react';
import { Link, useRouterState } from '@tanstack/react-router';
import { Toasts } from '@/shared/ui/toasts/toasts';
import { ToastContainer,toast } from 'react-toastify';


const Header: React.FC = () => {
  const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(true);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const router = useRouterState();

  const isActive = (path: string) => {
    return router.location.pathname === path;
  };
  const toastTest = (str: string) => {
    //alert(str)
    toast(str);
    //notiBar(str)
    
  };

  const openBottomSheet = () => {

  };

  return (
    <>
    <header 
      className="fixed left-0 right-0 bg-white shadow-lg z-50"
      style={{
        top: `env(safe-area-inset-top, 0px)`
      }}
    >
      <Toasts />
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center py-4">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-blue-600 rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-sm">NP</span>
            </div>
            <span className="text-xl font-bold text-gray-900">
              NicePayments
            </span>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link
              to="/"
              className={`font-medium transition-colors ${
                isActive('/') 
                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
                  : 'text-gray-700 hover:text-blue-600'
              }`}
            >
              홈
            </Link>
            <Link
              to="/about"
              className={`font-medium transition-colors ${
                isActive('/about') 
                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
                  : 'text-gray-700 hover:text-blue-600'
              }`}
            >
              회사소개
            </Link>
            <Link
              to="/contact"
              className={`font-medium transition-colors ${
                isActive('/contact') 
                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
                  : 'text-gray-700 hover:text-blue-600'
              }`}
            >
              문의하기
            </Link>
            <Link
              to="/test"
              className={`font-medium transition-colors ${
                isActive('/test') 
                  ? 'text-blue-600 border-b-2 border-blue-600 pb-1' 
                  : 'text-gray-700 hover:text-blue-600'
              }`}
            >
              테스트
            </Link>
          </nav>

          {/* User Menu */}
          <div className="hidden md:flex items-center space-x-4">
            <div className="space-x-2">
              <button 
                onClick={() => toastTest('로그인')}
                className="text-gray-700 px-4 py-2 rounded-md hover:bg-gray-100 transition-colors">
                로그인
              </button>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
                회원가입
              </button>
            </div>
          </div>

          {/* Mobile Menu Button */}
          <button
            className="md:hidden flex items-center justify-center w-8 h-8"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            <svg 
              className="w-6 h-6" 
              fill="none" 
              stroke="currentColor" 
              viewBox="0 0 24 24"
            >
              {isMenuOpen ? (
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M6 18L18 6M6 6l12 12" 
                />
              ) : (
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M4 6h16M4 12h16M4 18h16" 
                />
              )}
            </svg>
          </button>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden py-4 border-t border-gray-200">
            <nav className="flex flex-col space-y-4">
              <Link
                to="/"
                className={`font-medium transition-colors ${
                  isActive('/') ? 'text-blue-600' : 'text-gray-700'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                홈
              </Link>
              <Link
                to="/about"
                className={`font-medium transition-colors ${
                  isActive('/about') ? 'text-blue-600' : 'text-gray-700'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                회사소개
              </Link>
              <Link
                to="/contact"
                className={`font-medium transition-colors ${
                  isActive('/contact') ? 'text-blue-600' : 'text-gray-700'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                문의하기
              </Link>
              <Link
                to="/test"
                className={`font-medium transition-colors ${
                  isActive('/test') ? 'text-blue-600' : 'text-gray-700'
                }`}
                onClick={() => setIsMenuOpen(false)}
              >
                테스트
              </Link>
              
              <div className="pt-4 border-t border-gray-200">
                <div className="space-y-2">
                  <button 
                    className="w-full text-left text-gray-700 hover:text-blue-600 transition-colors"
                    onClick={() => toastTest('로그인')}
                  >
                    로그인
                  </button>
                  <button 
                    className="w-full text-left bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    회원가입
                  </button>
                </div>
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
    
    </>
  );
};

export default Header;