import React from 'react';
import { Inbox, Trash2, Zap } from 'lucide-react';
import { usePendingApprovals } from './platform/features/approvals/approvalQueries';
import { InlineEditField } from './platform/features/record/components/InlineEditField';
import { GlobalSearch } from './platform/features/search/GlobalSearch';

export interface CrmSidebarSystemItemBadgeProps {
  showLabels: boolean;
}

export interface CrmSidebarSystemItem {
  id: string;
  label: string;
  icon: React.ComponentType<{ size?: string | number; className?: string }>;
  route:
    | { kind: 'appNavigation'; capability: string }
    | { kind: 'setupCapability'; capability: string };
  requiredCapability?: string;
  badge?: React.ComponentType<CrmSidebarSystemItemBadgeProps>;
}

export interface CrmLayoutFieldComponent {
  componentType?: string;
  type?: string;
  apiName?: string;
  value?: string;
}

export interface CrmLayoutFieldItem {
  label?: string;
}

export interface CrmLayoutFieldDefinition {
  name: string;
  label?: string;
  type?: string;
  [key: string]: unknown;
}

export interface CrmLayoutFieldItemResolverInput {
  layoutItem: CrmLayoutFieldItem;
  fieldComponents: readonly CrmLayoutFieldComponent[];
  record: Record<string, unknown>;
  objectFields?: readonly CrmLayoutFieldDefinition[];
}

export interface CrmLayoutFieldItemResolution {
  permissionField: CrmLayoutFieldDefinition;
  renderField: CrmLayoutFieldDefinition;
  label: string;
  value: unknown;
}

export interface CrmShellComponents {
  topBarSearch: React.ComponentType;
  sidebarSystemItemBadges: {
    approvals: React.ComponentType<CrmSidebarSystemItemBadgeProps>;
  };
  sidebarSystemItems: readonly CrmSidebarSystemItem[];
  layoutFieldItemResolver: (input: CrmLayoutFieldItemResolverInput) => CrmLayoutFieldItemResolution | undefined;
  layoutInlineEditField: React.ComponentType<unknown>;
}

const CRM_COMPOUND_NAME_REPRESENTATIVE_FIELD = 'LastName';
const CRM_COMPOUND_NAME_RENDER_FIELD = 'Name';

export function resolveCrmLayoutFieldItem(
  input: CrmLayoutFieldItemResolverInput,
): CrmLayoutFieldItemResolution | undefined {
  const hasCompoundNameParts = input.fieldComponents.length > 1 &&
    input.fieldComponents.some(component => (
      (component.apiName || component.value) === CRM_COMPOUND_NAME_REPRESENTATIVE_FIELD
    ));

  if (!hasCompoundNameParts) {
    return undefined;
  }

  const representativeField = input.objectFields?.find(field => (
    field.name === CRM_COMPOUND_NAME_REPRESENTATIVE_FIELD
  ));
  if (!representativeField) {
    return undefined;
  }

  const label = input.layoutItem.label || CRM_COMPOUND_NAME_RENDER_FIELD;
  return {
    permissionField: representativeField,
    renderField: {
      ...representativeField,
      name: CRM_COMPOUND_NAME_RENDER_FIELD,
      label,
    },
    label,
    value: input.record[CRM_COMPOUND_NAME_RENDER_FIELD],
  };
}

export const CrmSidebarApprovalsBadge: React.FC<CrmSidebarSystemItemBadgeProps> = ({ showLabels }) => {
  const { data: pendingItems } = usePendingApprovals();
  const pendingApprovalsCount = pendingItems?.length ?? 0;
  if (pendingApprovalsCount <= 0) {
    return null;
  }
  if (showLabels) {
    return (
      <span className="px-1.5 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded">
        {pendingApprovalsCount}
      </span>
    );
  }
  return (
    <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
      {pendingApprovalsCount > 99 ? '99+' : pendingApprovalsCount}
    </span>
  );
};

export const crmShellComponents: CrmShellComponents = {
  topBarSearch: GlobalSearch,
  sidebarSystemItemBadges: {
    approvals: CrmSidebarApprovalsBadge,
  },
  sidebarSystemItems: [
    {
      id: 'approvals',
      label: 'Approvals',
      icon: Inbox,
      route: { kind: 'appNavigation', capability: 'approvals' },
      badge: CrmSidebarApprovalsBadge,
    },
    {
      id: 'flows',
      label: 'Flows',
      icon: Zap,
      route: { kind: 'setupCapability', capability: 'flowList' },
      requiredCapability: 'ViewSetup',
    },
    {
      id: 'recycle-bin',
      label: 'Recycle Bin',
      icon: Trash2,
      route: { kind: 'appNavigation', capability: 'recycleBin' },
    },
  ],
  layoutFieldItemResolver: resolveCrmLayoutFieldItem,
  layoutInlineEditField: InlineEditField as React.ComponentType<unknown>,
};