erp-platform/ui/src/views/sqlQueryManager/components/SqlObjectProperties.tsx

import type {
  SqlFunctionDto,
  SqlQueryDto,
  SqlStoredProcedureDto,
  SqlViewDto,
  SqlObjectType,
} from '@/proxy/sql-query-manager/models'
import { useLocalization } from '@/utils/hooks/useLocalization'
import dayjs from 'dayjs'

export type SqlObject = SqlFunctionDto | SqlQueryDto | SqlStoredProcedureDto | SqlViewDto

interface SqlObjectPropertiesProps {
  object: SqlObject | null
  type: SqlObjectType | null
}

const SqlObjectProperties = ({ object, type }: SqlObjectPropertiesProps) => {
  const { translate } = useLocalization()

  if (!object || !type) {
    return (
      <div className="p-4 text-center text-gray-500">
        {translate('::App.Platform.SelectAnObjectToViewProperties')}
      </div>
    )
  }

  const PropertyRow = ({ label, value }: { label: string; value: any }) => (
    <div className="mb-3">
      <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">{label}</div>
      <div className="text-sm font-medium">{value || '-'}</div>
    </div>
  )

  const getObjectTypeName = () => {
    switch (type) {
      case 1:
        return translate('::App.Platform.Query')
      case 2:
        return translate('::App.Platform.StoredProcedure')
      case 3:
        return translate('::App.Platform.View')
      case 4:
        return translate('::App.Platform.Function')
      default:
        return translate('::App.Platform.Object')
    }
  }

  const getStatusBadge = (status: number) => {
    switch (status) {
      case 1:
        return <span className="px-2 py-1 text-xs rounded bg-gray-200 dark:bg-gray-700">{translate('::App.Platform.Draft')}</span>
      case 2:
        return <span className="px-2 py-1 text-xs rounded bg-green-200 dark:bg-green-700">{translate('::App.Platform.Active')}</span>
      case 3:
        return <span className="px-2 py-1 text-xs rounded bg-orange-200 dark:bg-orange-700">{translate('::App.Platform.Archived')}</span>
      default:
        return <span className="px-2 py-1 text-xs rounded bg-gray-200 dark:bg-gray-700">{translate('::App.Platform.Unknown')}</span>
    }
  }

  const renderCommonProperties = () => (
    <>
      <PropertyRow label={translate('::App.Platform.ObjectType')} value={getObjectTypeName()} />
      <PropertyRow label={translate('::App.Platform.ID')} value={object.id} />
      {object.creationTime && (
        <PropertyRow
          label={translate('::App.Platform.Created')}
          value={dayjs(object.creationTime).format('DD/MM/YYYY HH:mm')}
        />
      )}
      {object.lastModificationTime && (
        <PropertyRow
          label={translate('::App.Platform.Modified')}
          value={dayjs(object.lastModificationTime).format('DD/MM/YYYY HH:mm')}
        />
      )}
    </>
  )

  const renderQueryProperties = () => {
    const query = object as SqlQueryDto
    return (
      <>
        <PropertyRow label={translate('::App.Platform.Code')} value={query.code} />
        <PropertyRow label={translate('::App.Platform.Name')} value={query.name} />
        <PropertyRow label={translate('::App.Platform.Description')} value={query.description} />
        <PropertyRow label={translate('::App.Platform.DataSource')} value={query.dataSourceCode} />
        <PropertyRow label={translate('::App.Platform.Status')} value={getStatusBadge(query.status)} />
        <PropertyRow label={translate('::App.Platform.Category')} value={query.category} />
        <PropertyRow label={translate('::App.Platform.Tags')} value={query.tags} />
        <PropertyRow
          label={translate('::App.Platform.ModifiesData')}
          value={query.isModifyingData ? translate('::App.Platform.Yes') : translate('::App.Platform.No')}
        />
        <PropertyRow label={translate('::App.Platform.ExecutionCount')} value={query.executionCount} />
        {query.lastExecutedAt && (
          <PropertyRow
            label={translate('::App.Platform.LastExecuted')}
            value={dayjs(query.lastExecutedAt).format('DD/MM/YYYY HH:mm')}
          />
        )}
        {renderCommonProperties()}
      </>
    )
  }

  const renderStoredProcedureProperties = () => {
    const sp = object as SqlStoredProcedureDto
    return (
      <>
        <PropertyRow label={translate('::App.Platform.ProcedureName')} value={sp.procedureName} />
        <PropertyRow label={translate('::App.Platform.Schema')} value={sp.schemaName} />
        <PropertyRow label={translate('::App.Platform.DisplayName')} value={sp.displayName} />
        <PropertyRow label={translate('::App.Platform.Description')} value={sp.description} />
        <PropertyRow label={translate('::App.Platform.DataSource')} value={sp.dataSourceCode} />
        <PropertyRow label={translate('::App.Platform.Status')} value={getStatusBadge(sp.status)} />
        <PropertyRow label={translate('::App.Platform.Category')} value={sp.category} />
        <PropertyRow label={translate('::App.Platform.Deployed')} value={sp.isDeployed ? translate('::App.Platform.Yes') : translate('::App.Platform.No')} />
        {sp.lastDeployedAt && (
          <PropertyRow
            label={translate('::App.Platform.LastDeployed')}
            value={dayjs(sp.lastDeployedAt).format('DD/MM/YYYY HH:mm')}
          />
        )}
        {renderCommonProperties()}
      </>
    )
  }

  const renderViewProperties = () => {
    const view = object as SqlViewDto
    return (
      <>
        <PropertyRow label={translate('::App.Platform.ViewName')} value={view.viewName} />
        <PropertyRow label={translate('::App.Platform.Schema')} value={view.schemaName} />
        <PropertyRow label={translate('::App.Platform.DisplayName')} value={view.displayName} />
        <PropertyRow label={translate('::App.Platform.Description')} value={view.description} />
        <PropertyRow label={translate('::App.Platform.DataSource')} value={view.dataSourceCode} />
        <PropertyRow label={translate('::App.Platform.Status')} value={getStatusBadge(view.status)} />
        <PropertyRow label={translate('::App.Platform.Category')} value={view.category} />
        <PropertyRow label={translate('::App.Platform.Deployed')} value={view.isDeployed ? translate('::App.Platform.Yes') : translate('::App.Platform.No')} />
        <PropertyRow
          label={translate('::App.Platform.SchemaBinding')}
          value={view.withSchemaBinding ? translate('::App.Platform.Yes') : translate('::App.Platform.No')}
        />
        {view.lastDeployedAt && (
          <PropertyRow
            label={translate('::App.Platform.LastDeployed')}
            value={dayjs(view.lastDeployedAt).format('DD/MM/YYYY HH:mm')}
          />
        )}
        {renderCommonProperties()}
      </>
    )
  }

  const renderFunctionProperties = () => {
    const func = object as SqlFunctionDto
    const getFunctionType = (funcType: number) => {
      switch (funcType) {
        case 1:
          return translate('::App.Platform.ScalarFunction')
        case 2:
          return translate('::App.Platform.TableValuedFunction')
        case 3:
          return translate('::App.Platform.InlineTableValuedFunction')
        default:
          return translate('::App.Platform.Unknown')
      }
    }

    return (
      <>
        <PropertyRow label={translate('::App.Platform.FunctionName')} value={func.functionName} />
        <PropertyRow label={translate('::App.Platform.Schema')} value={func.schemaName} />
        <PropertyRow label={translate('::App.Platform.DisplayName')} value={func.displayName} />
        <PropertyRow label={translate('::App.Platform.Description')} value={func.description} />
        <PropertyRow label={translate('::App.Platform.FunctionType')} value={getFunctionType(func.functionType)} />
        <PropertyRow label={translate('::App.Platform.ReturnType')} value={func.returnType} />
        <PropertyRow label={translate('::App.Platform.DataSource')} value={func.dataSourceCode} />
        <PropertyRow label={translate('::App.Platform.Status')} value={getStatusBadge(func.status)} />
        <PropertyRow label={translate('::App.Platform.Category')} value={func.category} />
        <PropertyRow label={translate('::App.Platform.Deployed')} value={func.isDeployed ? translate('::App.Platform.Yes') : translate('::App.Platform.No')} />
        {func.lastDeployedAt && (
          <PropertyRow
            label={translate('::App.Platform.LastDeployed')}
            value={dayjs(func.lastDeployedAt).format('DD/MM/YYYY HH:mm')}
          />
        )}
        {renderCommonProperties()}
      </>
    )
  }

  return (
    <div className="h-full flex flex-col">
      <div className="mb-4 pb-2 border-b">
        <h6 className="font-bold">{translate('::App.Platform.Properties')}</h6>
      </div>

      <div className="flex-1 overflow-auto p-2">
        {type === 1 && renderQueryProperties()}
        {type === 2 && renderStoredProcedureProperties()}
        {type === 3 && renderViewProperties()}
        {type === 4 && renderFunctionProperties()}
      </div>
    </div>
  )
}

export default SqlObjectProperties