import React from 'react'
import type { ReactNode } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useLegacyThemePage, usePageContext } from '../shared/pageContext'
import { AppLogo } from '../components/common/AppLogo'

function PublicHeader() {
  const { locale, path, copy } = usePageContext()
  const location = useLocation()
  const profilePath = path('/profile')
  const customerSimulationPath = path('/customer-simulation')
  const isCustomerSimulation = location.pathname.startsWith(customerSimulationPath)
  const pageCopy = copy.publicLayout
  const navCopy = locale === 'zh'
    ? { profile: '美发师主页', templates: '发型参考', simulation: 'AI发型试试看', reviews: '评价' }
    : pageCopy.nav

  return (
    <header>
      <nav className="navbar navbar-expand-lg header-light bg-white box-shadow-small">
        <div className="container-fluid">
          <div className="col-auto me-auto">
            <Link className="navbar-brand" to={path('')}>
              <AppLogo />
            </Link>
          </div>
          <div className="col-auto menu-order position-static">
            <button
              className="navbar-toggler float-start"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#publicNavbarNav"
              aria-controls="publicNavbarNav"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-line"></span>
              <span className="navbar-toggler-line"></span>
              <span className="navbar-toggler-line"></span>
              <span className="navbar-toggler-line"></span>
            </button>
            <div className="collapse navbar-collapse" id="publicNavbarNav">
              <ul className="navbar-nav">
                <li className="nav-item"><a href={`${profilePath}#profile`} className="nav-link">{navCopy.profile}</a></li>
                <li className="nav-item"><a href={`${profilePath}#templates`} className="nav-link">{navCopy.templates}</a></li>
                <li className="nav-item"><Link to={customerSimulationPath} className={`nav-link${isCustomerSimulation ? ' active' : ''}`}>{navCopy.simulation}</Link></li>
                <li className="nav-item"><a href={`${profilePath}#reviews`} className="nav-link">{navCopy.reviews}</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
  )
}

export function PublicLayout({ children, footer = true }: { children: ReactNode; footer?: boolean }) {
  useLegacyThemePage({ bodyClassName: '', mobileNavStyle: 'classic' })
  const { copy } = usePageContext()

  return (
    <>
      <PublicHeader />
      {children}
      {footer ? (
        <footer className="p-0 footer-light position-relative">
          <div className="container">
            <div className="row justify-content-center pt-5 pb-5 sm-pt-40px sm-pb-40px">
              <div className="col-12 text-center">
                <img src="/images/logo_color.svg" alt="Aitori Stylist" className="footer-logo mb-20px" style={{ maxWidth: '160px' }} />
                <div className="fs-16 text-medium-gray">{copy.publicLayout.footer}</div>
              </div>
            </div>
          </div>
        </footer>
      ) : null}
    </>
  )
}