import { NavLink, Outlet, useLocation, useParams } from "react-router";
import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
import { VendorPortalProvider } from "@/app/v/_components/vendor-portal-provider";
import { Text } from "@/components/ui/text";
import "@/app/v/_components/vendor-portal.css";

function VendorPortalHeader() {
  const { vendor, status } = useVendorPortal();

  return (
    <div className="vp-header">
      <div className="vp-brand">Sea Haven Industries — Vendor Portal</div>
      {status === "ready" && vendor != null && Boolean(vendor.companyName) && (
        <div className="vp-vendor-name">{vendor.companyName}</div>
      )}
    </div>
  );
}

function VendorPortalNav() {
  const { token } = useParams();
  const { pathname } = useLocation();
  const onDetail = /\/dispatch\//.test(pathname);

  return (
    <nav className="vp-nav">
      <div className="vp-nav-inner">
        <NavLink
          to={`/v/${token}/dashboard`}
          className={({ isActive }) => `vp-nav-tab ${isActive || onDetail ? "active" : ""}`}
        >
          Work
        </NavLink>
        <NavLink
          to={`/v/${token}/pos`}
          className={({ isActive }) => `vp-nav-tab ${isActive ? "active" : ""}`}
        >
          POs
        </NavLink>
      </div>
    </nav>
  );
}

function VendorPortalBody() {
  const { status, error } = useVendorPortal();

  if (status === "loading") {
    return (
      <div className="vp-container">
        <div className="vp-card vp-muted">Loading…</div>
      </div>
    );
  }

  if (status === "error") {
    return (
      <div className="vp-container">
        <Text as="section" variant="body" className="vp-error">
          <Text variant="title">Access Denied</Text>
          <Text variant="error">
            {error?.message ||
              "This link is invalid or has expired. Please contact your dispatcher for a new link."}
          </Text>
        </Text>
      </div>
    );
  }

  return (
    <>
      <VendorPortalNav />
      <div className="vp-container">
        <Outlet />
      </div>
    </>
  );
}

export default function VendorPortalLayout() {
  return (
    <VendorPortalProvider>
      <div className="vp-shell">
        <VendorPortalHeader />
        <VendorPortalBody />
      </div>
    </VendorPortalProvider>
  );
}