import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../../contexts/AuthContext'

export function Header() {
  const { user, isAuthenticated } = useAuth()
  const [showCreate, setShowCreate] = useState(false)
  const [search, setSearch] = useState('')
  const navigate = useNavigate()

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (search.trim()) {
      navigate(`/explore?q=${encodeURIComponent(search.trim())}`)
      setSearch('')
    }
  }

  return (
    <header className="h-12 bg-[#1A2634] flex items-center gap-3 px-3 shrink-0 z-40 relative">
      {/* Logo */}
      <Link to="/" className="flex items-center gap-2 shrink-0">
        <div className="w-7 h-7 rounded bg-[#0052CC] flex items-center justify-center text-white font-bold text-sm">F</div>
        <span className="text-white font-semibold text-sm hidden sm:block">ForgeBucket</span>
      </Link>

      {/* Search */}
      <form onSubmit={handleSearch} className="flex-1 max-w-xl">
        <div className="relative">
          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
            width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
          </svg>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Search repositories, issues, pull requests…"
            className="w-full bg-white/10 text-white placeholder-white/40 text-xs rounded pl-8 pr-3 py-1.5 focus:outline-none focus:bg-white/15 focus:ring-1 focus:ring-white/30"
          />
        </div>
      </form>

      <div className="flex items-center gap-1 ml-auto shrink-0">
        {/* Create */}
        {isAuthenticated && (
          <div className="relative">
            <button
              onClick={() => setShowCreate(s => !s)}
              className="flex items-center gap-1 px-3 py-1.5 rounded bg-[#0052CC] hover:bg-[#0065FF] text-white text-xs font-semibold transition-colors"
            >
              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
              </svg>
              Create
            </button>
            {showCreate && (
              <CreateMenu onClose={() => setShowCreate(false)} />
            )}
          </div>
        )}

        {/* Notifications (placeholder) */}
        <button className="w-8 h-8 rounded flex items-center justify-center text-white/60 hover:bg-white/10 hover:text-white transition-colors">
          <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
          </svg>
        </button>

        {/* Settings */}
        <Link to="/settings" className="w-8 h-8 rounded flex items-center justify-center text-white/60 hover:bg-white/10 hover:text-white transition-colors">
          <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
          </svg>
        </Link>

        {/* Avatar */}
        {isAuthenticated ? (
          <Link to="/profile" className="w-7 h-7 rounded-full bg-[#0052CC] flex items-center justify-center text-white text-xs font-bold hover:ring-2 hover:ring-white/30 transition-all">
            {user?.username?.[0]?.toUpperCase()}
          </Link>
        ) : (
          <Link to="/login" className="px-3 py-1.5 rounded text-white/80 hover:text-white text-xs font-medium hover:bg-white/10 transition-colors">
            Sign in
          </Link>
        )}
      </div>

      {/* Click-away for create menu */}
      {showCreate && (
        <div className="fixed inset-0 z-30" onClick={() => setShowCreate(false)} />
      )}
    </header>
  )
}

function CreateMenu({ onClose }: { onClose: () => void }) {
  return (
    <div className="absolute right-0 top-full mt-1 w-56 bg-white rounded-lg shadow-xl border border-[#DFE1E6] z-50 overflow-hidden">
      <div className="px-4 py-2.5 border-b border-[#DFE1E6]">
        <p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide">Create</p>
      </div>
      <ul>
        <li>
          <Link
            to="/repos/new"
            onClick={onClose}
            className="flex items-center gap-2.5 px-4 py-3 text-sm text-[#172B4D] hover:bg-[#F4F5F7]"
          >
            <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" />
            </svg>
            New repository
          </Link>
        </li>
        <li>
          <Link
            to="/repos/import"
            onClick={onClose}
            className="flex items-center gap-2.5 px-4 py-3 text-sm text-[#172B4D] hover:bg-[#F4F5F7]"
          >
            <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
            </svg>
            Import repository
          </Link>
        </li>
      </ul>
    </div>
  )
}
