import { useState } from "react"
import { useLocation } from "react-router-dom"
import Sidebar from "./Sidebar"

const PAGE_COPY = {
  "/": {
    label: "Command Center",
    subtitle: "Real-time manufacturing quality monitoring, reporting, and plant visibility.",
  },
  "/live": {
    label: "Live Monitoring",
    subtitle: "Choose uploaded images or browser camera feed for inspection and monitoring.",
  },
  "/history": {
    label: "Inspection History",
    subtitle: "Trace reports, decisions, and defect signatures over time.",
  },
  "/analytics": {
    label: "Analytics",
    subtitle: "Trend performance, defect mix, and production quality signals.",
  },
}

function formatHeaderTime() {
  return new Intl.DateTimeFormat("en-IN", {
    weekday: "short",
    month: "short",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
  }).format(new Date())
}

export default function AppShell({ children }) {
  const { pathname } = useLocation()
  const [mobileOpen, setMobileOpen] = useState(false)
  const headerCopy = PAGE_COPY[pathname] || PAGE_COPY["/"]

  return (
    <div className="min-h-screen text-slate-100">
      <div className="flex min-h-screen">
        <Sidebar mobileOpen={mobileOpen} onClose={() => setMobileOpen(false)} />

        <div className="flex min-h-screen min-w-0 flex-1 flex-col lg:pl-[320px]">
          <header className="sticky top-0 z-20 border-b border-white/10 bg-slate-950/[0.55] backdrop-blur-xl">
            <div className="mx-auto flex w-full max-w-[1600px] items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
              <div className="flex min-w-0 items-center gap-3">
                <button
                  type="button"
                  className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-lg text-slate-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/10 lg:hidden"
                  onClick={() => setMobileOpen(true)}
                  aria-label="Open navigation"
                >
                  ≡
                </button>

                  <div className="min-w-0">
                  <p className="eyebrow">Manufacturing Monitoring System</p>
                  <h1 className="truncate text-xl font-semibold text-slate-50">{headerCopy.label}</h1>
                  <p className="hidden text-sm text-slate-400 sm:block">{headerCopy.subtitle}</p>
                </div>
              </div>

              <div className="hidden rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300 sm:block">
                {formatHeaderTime()}
              </div>
            </div>
          </header>

          <main className="flex flex-1">{children}</main>
        </div>
      </div>
    </div>
  )
}