import { useEffect, useState } from "react"
import Link from "next/link"
import { medusaClient } from "../lib/medusa-client"
import { clearStoredToken, getStoredToken } from "../lib/storefront"

export default function Layout({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  useEffect(() => {
    const token = getStoredToken()
    if (token) {
      medusaClient.setToken(token)
      setIsLoggedIn(true)
    }
  }, [])

  const handleLogout = () => {
    clearStoredToken()
    medusaClient.setToken(null)
    setIsLoggedIn(false)
  }

  return (
    <div style={{ minHeight: "100vh", fontFamily: "sans-serif", background: "#f8f8f8" }}>
      <header
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "1rem 2rem",
          background: "#fff",
          borderBottom: "1px solid #e6e6e6",
        }}
      >
        <Link href="/" style={{ fontWeight: 600, textDecoration: "none", color: "#222" }}>
          Lucien-sens-bon
        </Link>
        <nav style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
          <Link href="/" style={{ textDecoration: "none", color: "#444" }}>
            Boutique
          </Link>
          <Link href="/cart" style={{ textDecoration: "none", color: "#444" }}>
            Panier
          </Link>
          <Link href="/checkout" style={{ textDecoration: "none", color: "#444" }}>
            Commander
          </Link>
          {!isLoggedIn ? (
            <>
              <Link href="/register" style={{ textDecoration: "none", color: "#444" }}>
                Créer un compte
              </Link>
              <Link href="/login" style={{ textDecoration: "none", color: "#444" }}>
                Se connecter
              </Link>
            </>
          ) : (
            <button
              type="button"
              onClick={handleLogout}
              style={{
                border: "1px solid #ccc",
                background: "#fff",
                borderRadius: "6px",
                padding: "0.4rem 0.8rem",
                cursor: "pointer",
              }}
            >
              Se déconnecter
            </button>
          )}
        </nav>
      </header>
      <main style={{ padding: "2rem" }}>{children}</main>
    </div>
  )
}