pn-new-crm/src/providers/port-provider.tsx

'use client';

import { createContext, useContext, useEffect, type ReactNode } from 'react';
import { useParams } from 'next/navigation';

import { useUIStore } from '@/stores/ui-store';
import type { Port } from '@/lib/db/schema/ports';

interface PortContextValue {
  ports: Port[];
  currentPort: Port | null;
  currentPortId: string | null;
  currentPortSlug: string | null;
}

const PortContext = createContext<PortContextValue>({
  ports: [],
  currentPort: null,
  currentPortId: null,
  currentPortSlug: null,
});

interface PortProviderProps {
  children: ReactNode;
  ports: Port[];
  defaultPortId: string | null;
}

export function PortProvider({ children, ports, defaultPortId }: PortProviderProps) {
  const params = useParams();
  const portSlugFromUrl = params?.portSlug as string | undefined;

  const setPort = useUIStore((s) => s.setPort);
  const currentPortId = useUIStore((s) => s.currentPortId);
  const currentPortSlug = useUIStore((s) => s.currentPortSlug);

  // Resolve current port - URL slug takes priority over stored port
  const currentPort =
    ports.find((p) => p.slug === portSlugFromUrl) ??
    ports.find((p) => p.id === currentPortId) ??
    (defaultPortId ? (ports.find((p) => p.id === defaultPortId) ?? null) : null);

  // Sync Zustand store whenever the active port changes
  useEffect(() => {
    if (currentPort && (currentPort.id !== currentPortId || currentPort.slug !== currentPortSlug)) {
      setPort(currentPort.id, currentPort.slug);
    }
  }, [currentPort, currentPortId, currentPortSlug, setPort]);

  return (
    <PortContext.Provider
      value={{
        ports,
        currentPort: currentPort ?? null,
        currentPortId: currentPort?.id ?? null,
        currentPortSlug: currentPort?.slug ?? null,
      }}
    >
      {children}
    </PortContext.Provider>
  );
}

export function usePortContext(): PortContextValue {
  return useContext(PortContext);
}