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'
import { LocaleSwitcher } from '../components/common/LocaleSwitcher'

type PublicLayoutProps = {
  children: ReactNode
  footer?: boolean
  variant?: 'demo' | 'live'
  profilePath?: string
  simulationPath?: string
  bookingUrl?: string
}

function PublicHeader({
  variant = 'demo',
  profilePath: profilePathOverride,
  simulationPath,
  bookingUrl,
}: Omit<PublicLayoutProps, 'children' | 'footer'>) {
  const { path, copy } = usePageContext()
  const location = useLocation()
  const profilePath = profilePathOverride || path('/profile')
  const customerSimulationPath = simulationPath || path('/customer-simulation')
  const isCustomerSimulation = location.pathname.startsWith(path('/customer-simulation'))
  const pageCopy = copy.publicLayout
  const navCopy = 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>
                {variant === 'live' ? (
                  bookingUrl ? <li className="nav-item"><a href={bookingUrl} className="nav-link" target="_blank" rel="noreferrer">{navCopy.booking}</a></li> : null
                ) : (
                  <li className="nav-item"><a href={`${profilePath}#reviews`} className="nav-link">{navCopy.reviews}</a></li>
                )}
              </ul>
            </div>
          </div>
          <div className="col-auto d-flex stylist-dashboard-actions gap-2">
            <LocaleSwitcher locale={locale} />
          </div>
        </div>
      </nav>
    </header>
  )
}

export function PublicLayout({
  children,
  footer = true,
  variant = 'demo',
  profilePath,
  simulationPath,
  bookingUrl,
}: PublicLayoutProps) {
  useLegacyThemePage({ bodyClassName: '', mobileNavStyle: 'classic' })
  const { copy } = usePageContext()

  return (
    <>
      <PublicHeader variant={variant} profilePath={profilePath} simulationPath={simulationPath} bookingUrl={bookingUrl} />
      {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}
    </>
  )
}