import { Outlet, Link, useLocation } from 'react-router-dom'
import { useState } from 'react'
import { useAuth } from '../context/AuthContext'
import { UserMenu } from './UserMenu'
import { SaveWarningBar } from './SaveWarningBar'
import { ProfileModal } from './ProfileModal'
import { AccountModal } from './AccountModal'
import { ClearDataModal } from './ClearDataModal'
import { PersonaPromptBuildHost } from './PersonaPromptBuildHost'
import { AdvisorPanelBuildHost } from './AdvisorPanelBuildHost'

function headerNavLinkClass(active: boolean) {
  return `header-nav-link${active ? ' header-nav-link--current' : ''}`
}

export function AppLayout() {
  const { pathname } = useLocation()
  const { user, loading } = useAuth()
  const [profile, setProfile] = useState(false)
  const [account, setAccount] = useState(false)
  const [clear, setClear] = useState(false)

  const showSaveBanner = !loading && !user

  const homeActive = pathname === '/'
  const personaActive =
    pathname === '/persona' ||
    pathname.startsWith('/persona/') ||
    pathname.startsWith('/create-persona')
  const advisorActive =
    pathname === '/advisor' ||
    pathname.startsWith('/advisor/') ||
    pathname.startsWith('/create-advisor')

  return (
    <div
      className={`layout-main${showSaveBanner ? ' layout-main--save-banner' : ''}`}
    >
      <header className="header-bar">
        <div className="header-bar-left">
          <a
            href="https://neon.ai"
            target="_blank"
            rel="noopener noreferrer"
            className="header-neon-link"
            title="Neon.ai"
          >
            <img src="/neon-logo.png" alt="" className="header-neon-logo" />
            <span className="header-neon-text">Neon.ai</span>
          </a>
          <UserMenu
            onProfile={() => setProfile(true)}
            onAccount={() => setAccount(true)}
            onClearData={() => setClear(true)}
          />
        </div>
        <nav className="header-bar-center">
          <Link
            to="/"
            className={headerNavLinkClass(homeActive)}
            aria-current={homeActive ? 'page' : undefined}
          >
            Home
          </Link>
          <Link
            to="/persona"
            className={headerNavLinkClass(personaActive)}
            aria-current={personaActive ? 'page' : undefined}
          >
            Personas
          </Link>
          <Link
            to="/advisor"
            className={headerNavLinkClass(advisorActive)}
            aria-current={advisorActive ? 'page' : undefined}
          >
            Advisor Panel
          </Link>
        </nav>
        <div className="header-bar-right">
          <Link to="/" className="header-brand header-brand-accent">
            AI Expert Advisory Builder&apos;s Workshop
          </Link>
        </div>
      </header>
      <PersonaPromptBuildHost />
      <AdvisorPanelBuildHost />
      <Outlet />
      <SaveWarningBar />
      {profile && <ProfileModal onClose={() => setProfile(false)} />}
      {account && <AccountModal onClose={() => setAccount(false)} />}
      {clear && <ClearDataModal onClose={() => setClear(false)} />}
    </div>
  )
}