simstudioai--sim/apps/sim/ee/custom-blocks/components/custom-blocks.tsx

'use client'

import { useMemo, useState } from 'react'
import { ChipTag } from '@sim/emcn'
import { ArrowRight, Plus } from 'lucide-react'
import { useParams } from 'next/navigation'
import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
import { SettingsResourceRow } from '@/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row'
import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
import { getCustomBlockIcon } from '@/blocks/custom/custom-block-icon'
import { CustomBlockDetail } from '@/ee/custom-blocks/components/custom-block-detail'
import { useWhitelabelSettings } from '@/ee/whitelabeling/hooks/whitelabel'
import { useCanPublishCustomBlock, useCustomBlocks } from '@/hooks/queries/custom-blocks'
import { useWorkspacesQuery } from '@/hooks/queries/workspace'

export function CustomBlocks() {
  const params = useParams()
  const workspaceId = typeof params?.workspaceId === 'string' ? params.workspaceId : undefined

  const { data: canManage = false, isLoading } = useCanPublishCustomBlock(workspaceId)
  const { data: blocks = [] } = useCustomBlocks(workspaceId)
  const { data: workspaces = [] } = useWorkspacesQuery()

  // Any org member can view the org's blocks, but publishing requires admin on a
  // source workspace — the publish route enforces admin on the picked workspace.
  const currentOrgId = useMemo(
    () => workspaces.find((w) => w.id === workspaceId)?.organizationId ?? null,
    [workspaces, workspaceId]
  )
  const canCreate = useMemo(
    () =>
      !!currentOrgId &&
      workspaces.some((w) => w.organizationId === currentOrgId && w.permissions === 'admin'),
    [workspaces, currentOrgId]
  )
  const { data: whitelabel } = useWhitelabelSettings(blocks[0]?.organizationId)
  const fallbackIconUrl = whitelabel?.logoUrl ?? null

  const [searchTerm, setSearchTerm] = useState('')
  const [selected, setSelected] = useState<string | 'new' | null>(null)

  const filtered = useMemo(() => {
    if (!searchTerm.trim()) return blocks
    const q = searchTerm.toLowerCase()
    return blocks.filter((b) => b.name.toLowerCase().includes(q))
  }, [blocks, searchTerm])

  if (isLoading) return null

  if (!canManage) {
    return (
      <SettingsEmptyState>
        Custom blocks require an Enterprise plan. Contact your admin to enable them.
      </SettingsEmptyState>
    )
  }

  if (selected !== null && workspaceId) {
    return (
      <CustomBlockDetail
        key={selected}
        blockId={selected === 'new' ? null : selected}
        workspaceId={workspaceId}
        onBack={() => setSelected(null)}
      />
    )
  }

  return (
    <SettingsPanel
      search={{
        value: searchTerm,
        onChange: setSearchTerm,
        placeholder: 'Search custom blocks...',
      }}
      actions={
        canCreate
          ? [
              {
                text: 'Create block',
                icon: Plus,
                variant: 'primary',
                onSelect: () => setSelected('new'),
              },
            ]
          : []
      }
    >
      <SettingsSection label={`Blocks (${blocks.length})`}>
        {blocks.length === 0 ? (
          <SettingsEmptyState variant='inline'>
            {canCreate
              ? 'No custom blocks yet. Click "Create block" to publish a workflow as a block.'
              : 'No custom blocks yet.'}
          </SettingsEmptyState>
        ) : filtered.length === 0 ? (
          <SettingsEmptyState variant='inline'>
            No blocks found matching "{searchTerm}"
          </SettingsEmptyState>
        ) : (
          <div className='-mx-2 flex flex-col gap-y-0.5'>
            {filtered.map((cb) => {
              const Icon = getCustomBlockIcon(cb.iconUrl, fallbackIconUrl)
              return (
                <button
                  key={cb.id}
                  type='button'
                  onClick={() => setSelected(cb.id)}
                  className='w-full rounded-lg p-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
                >
                  <SettingsResourceRow
                    icon={<Icon />}
                    iconFill
                    title={cb.name}
                    description={cb.description || undefined}
                    trailing={
                      <div className='flex flex-shrink-0 items-center gap-2'>
                        {!cb.enabled && <ChipTag variant='gray'>Disabled</ChipTag>}
                        <ArrowRight className='size-4 text-[var(--text-icon)]' />
                      </div>
                    }
                  />
                </button>
              )
            })}
          </div>
        )}
      </SettingsSection>
    </SettingsPanel>
  )
}