'use client'
import { useState } from 'react'
import { useApp } from '@/lib/app-context'

export default function Header() {
  const { userRole, userName, shortlist, setRole, setUserName } = useApp()
  const [showAuth, setShowAuth] = useState(false)

  const signIn = (role: 'client'|'vendor'|'admin', name: string) => {
    setRole(role)
    setUserName(name)
    setShowAuth(false)
  }

  const signOut = () => {
    setRole(null)
    setUserName(null)
  }

  return (
    <header className="sticky top-0 z-50 bg-ivory-50/80 backdrop-blur-xl border-b border-ivory-200">
      <div className="wedding-section">
        <div className="flex items-center justify-between h-16">
          <a href="/" className="flex items-center gap-2 shrink-0">
            <span className="text-2xl">💍</span>
            <span className="font-heading text-xl font-semibold text-charcoal-700 tracking-wide">Evermore</span>
          </a>

          <nav className="hidden md:flex items-center gap-6">
            <a href="/search" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Explore</a>
            <a href="/planner" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Planner</a>
            <a href="/contracts" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">Contracts</a>
            <a href="/shortlist" className="text-sm font-medium text-charcoal-400 hover:text-gold-500 transition-colors">
              Shortlist{shortlist.length > 0 && <span className="ml-1.5 wedding-badge bg-rose-50 text-rose-500 text-xs">{shortlist.length}</span>}
            </a>
          </nav>

          <div className="flex items-center gap-3">
            {userRole ? (
              <div className="flex items-center gap-3">
                <span className="wedding-badge text-xs bg-sage-50 text-sage-600 capitalize">{userRole}</span>
                <span className="hidden sm:inline text-sm text-charcoal-600">{userName}</span>
                <button onClick={signOut} className="text-xs text-charcoal-400 hover:text-rose-500 transition-colors">Sign Out</button>
              </div>
            ) : (
              <button onClick={() => setShowAuth(true)} className="wedding-btn-primary text-sm">Sign In</button>
            )}
          </div>
        </div>
      </div>

      {/* Auth modal */}
      {showAuth && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" onClick={() => setShowAuth(false)}>
          <div className="wedding-card p-8 max-w-sm w-full" onClick={e => e.stopPropagation()}>
            <h2 className="font-heading text-2xl font-semibold text-charcoal-700 mb-2">Demo Sign In</h2>
            <p className="text-sm text-charcoal-400 mb-6">Select a role to explore the platform. Auth will be wired to Cognito in production.</p>
            <div className="space-y-3">
              <button onClick={() => signIn('client', 'Amaya Perera')} className="wedding-btn-primary w-full">
                🧑‍💼 Sign in as Client
              </button>
              <button onClick={() => signIn('vendor', 'Lens & Light Studio')} className="wedding-btn-gold w-full">
                🏪 Sign in as Vendor
              </button>
              <button onClick={() => signIn('admin', 'Admin User')} className="wedding-btn-outline w-full">
                🛡️ Sign in as Admin
              </button>
            </div>
            <p className="text-xs text-charcoal-300 mt-4 text-center">
              No password required — this is a demo. Real auth uses OIDC + PKCE with Cognito/Keycloak.
            </p>
          </div>
        </div>
      )}
    </header>
  )
}