import { Link, Outlet } from 'react-router-dom'
import { useAuth } from '../auth/AuthProvider'
import { CiPublicFooter } from '../components/CiPartials'
import './PublicLayout.css'

export function PublicLayout() {
  const { isAuthenticated, user, logout } = useAuth()

  return (
    <div className="d-flex flex-column min-vh-100 public-shell">
      <nav
        className="navbar navbar-expand-lg navbar-dark shadow-sm"
        style={{ backgroundColor: '#2c9b09' }}
      >
        <div className="container">
          <Link className="navbar-brand fw-semibold public-navbar-brand" to="/">
            <span className="public-navbar-logo-wrap" aria-hidden>
              <img
                src="/images/logo.png"
                alt=""
                className="public-navbar-logo"
                decoding="async"
              />
            </span>
            <span>Al Rahma Sunday School</span>
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#publicNav"
            aria-controls="publicNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse justify-content-end" id="publicNav">
            <ul className="navbar-nav align-items-lg-center gap-lg-2">
              <li className="nav-item">
                <Link className="nav-link" to="/">
                  Home
                </Link>
              </li>
              {isAuthenticated ? (
                <li className="nav-item">
                  <Link className="nav-link" to="/docs">
                    API docs
                  </Link>
                </li>
              ) : null}
              {isAuthenticated ? (
                <>
                  <li className="nav-item">
                    <span className="navbar-text small px-2">{user?.name}</span>
                  </li>
                  <li className="nav-item">
                    <Link className="btn btn-outline-light btn-sm" to="/app/home">
                      Portal
                    </Link>
                  </li>
                  <li className="nav-item">
                    <button
                      type="button"
                      className="btn btn-link nav-link text-white text-decoration-none"
                      onClick={() => {
                        logout()
                      }}
                    >
                      Sign out
                    </button>
                  </li>
                </>
              ) : (
                <>
                  <li className="nav-item">
                    <Link className="nav-link" to="/login">
                      Sign in
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link className="btn btn-outline-light btn-sm" to="/register">
                      Register
                    </Link>
                  </li>
                </>
              )}
            </ul>
          </div>
        </div>
      </nav>

      <main className="flex-grow-1 d-flex flex-column">
        <Outlet />
      </main>

      <CiPublicFooter />
    </div>
  )
}
