'use client';

import { SearchX } from 'lucide-react';

import { EmptyState } from '@/components/shared/empty-state';

interface DetailNotFoundProps {
  /** "interest", "client", "yacht", etc. - used to build the copy. */
  entity: string;
  /** Plural list path back-link. e.g. "/port-x/clients". */
  backHref: string;
  /** Plural label for the back button, e.g. "Back to clients". */
  backLabel: string;
  /** HTTP status code from the failed fetch (404 vs 403 changes copy). */
  status?: number;
}

/**
 * Renders an explicit "not found" / "no access" panel for entity detail
 * pages whose data fetch failed. Replaces the prior silent-list-shell
 * behaviour where a wrong-port URL paste rendered the navigation chrome
 * with empty tabs and no error message. Post-audit F17.
 */
export function DetailNotFound({ entity, backHref, backLabel, status }: DetailNotFoundProps) {
  const denied = status === 403;
  return (
    <EmptyState
      icon={SearchX}
      title={denied ? `No access to this ${entity}` : `${capitalize(entity)} not found`}
      description={
        denied
          ? `You do not have permission to view this ${entity} in this port.`
          : `It may have been removed, archived, or it belongs to a different port. Use the back button or pick a different ${entity}.`
      }
      className="mt-16"
      action={{
        label: backLabel,
        onClick: () => {
          window.location.assign(backHref);
        },
      }}
    />
  );
}

function capitalize(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}
