"use client";

import Link from "next/link";
import { CreditCard, LayoutDashboard, LogOut, Menu, Server } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { DemoStoreProvider, type Site, useDemoStore } from "./demo-store";

const navigation = [
  { href: "/overview", label: "Overview", icon: LayoutDashboard },
  { href: "/sites", label: "Sites", icon: Server },
  { href: "/billing", label: "Billing", icon: CreditCard },
];

function ShellContents({ children, accountEmail, planName, planStatus }: Readonly<{ children: React.ReactNode; accountEmail: string; planName: string; planStatus: string }>) {
  const path = usePathname();
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const { organizationName } = useDemoStore();

  useEffect(() => {
    if (window.sessionStorage.getItem("aiwc-pending-site-pair")) {
      window.location.replace("/connect");
    }
  }, []);

  async function logout() {
    await fetch("/api/auth/logout", { method: "POST" });
    router.replace("/login");
    router.refresh();
  }

  return (
    <div className="app">
      {isOpen ? <button className="sidebar-scrim" aria-label="Close navigation" onClick={() => setIsOpen(false)} /> : null}
      <aside className={`sidebar ${isOpen ? "open" : ""}`}>
        <div className="sidebar-head">
          <div className="org-switcher" title={organizationName}>
            <div><div className="org-name">{organizationName}</div><div className="org-plan">{planName} · {planStatus}</div></div>
          </div>
        </div>
        <nav className="nav" aria-label="Main navigation">
          {navigation.map(({ href, label, icon: Icon }) => {
            const active = path === href || (href !== "/overview" && path.startsWith(`${href}/`));
            return <Link key={href} href={href} className={active ? "nav-item active" : "nav-item"} onClick={() => setIsOpen(false)}><Icon size={17} /><span>{label}</span></Link>;
          })}
        </nav>
        <div className="sidebar-foot">
          <div className="account-row" title={accountEmail}>
            <div className="avatar">{accountEmail.charAt(0).toUpperCase()}</div>
            <div><div className="account-name">WooCommerce customer</div><div className="account-email">{accountEmail}</div></div>
          </div>
          <button className="logout-button" type="button" onClick={logout}><LogOut size={15} /> Log out</button>
        </div>
      </aside>
      <main className="main">
        <header className="header">
          <div className="header-left">
            <button className="icon-btn shell-menu" aria-label="Open navigation" onClick={() => setIsOpen(true)}><Menu size={18} /></button>
            <span className="page-heading">Control center</span>
            <div className="site-context"><Server size={14} /> All sites</div>
          </div>
        </header>
        <div className="content">{children}</div>
      </main>
    </div>
  );
}

export function AppShell({ children, accountEmail, organizationName, initialSites, workspaceId, planName, planStatus, siteLimit }: Readonly<{ children: React.ReactNode; accountEmail: string; organizationName: string; initialSites: Site[]; workspaceId: string; planName: string; planStatus: string; siteLimit: number }>) {
  return <DemoStoreProvider initialOrganizationName={organizationName} initialSites={initialSites} key={workspaceId} workspaceId={workspaceId} planName={planName} siteLimit={siteLimit}><ShellContents accountEmail={accountEmail} planName={planName} planStatus={planStatus}>{children}</ShellContents></DemoStoreProvider>;
}