sozsoft-platform/ui/src/views/developerKit/CrudEndpointManager.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import {
  FaSearch,
  FaCopy,
  FaCheckCircle,
  FaExclamationCircle,
  FaDatabase,
  FaSyncAlt,
  FaPaperPlane,
  FaTrash,
  FaBolt,
  FaTable,
  FaToggleOn,
  FaToggleOff,
  FaChevronRight,
  FaChevronDown,
} from 'react-icons/fa'
import { useLocalization } from '@/utils/hooks/useLocalization'
import Widget from '@/components/common/Widget'
import { getDataSources } from '@/services/data-source.service'
import { sqlObjectManagerService } from '@/services/sql-query-manager.service'
import { developerKitService } from '@/services/developerKit.service'
import apiService from '@/services/api.service'
import type { DataSourceDto } from '@/proxy/data-source'
import type { DatabaseTableDto } from '@/proxy/sql-query-manager/models'
import type { CrudEndpoint } from '@/proxy/developerKit/models'
import PageTitle from '@/components/shared/PageTitle'
import { ConfirmDialog } from '@/components/shared'
import Button from '@/components/ui/Button'
import { Notification, toast } from '@/components/ui'

interface TestResult {
  success: boolean
  status: number
  data?: unknown
  error?: unknown
  timestamp: string
}

interface ParameterInput {
  name: string
  value: string
  type: 'path' | 'query'
}

type CrudFilter = 'all' | 'with' | 'without'

interface TableStat {
  total: number
  active: number
}

const CRUD_FILTERS: readonly CrudFilter[] = ['all', 'with', 'without'] as const

const EMPTY_ENDPOINTS: CrudEndpoint[] = []
const EMPTY_PARAMS: ParameterInput[] = []

const DEFAULT_SAMPLE_BODY = JSON.stringify(
  { name: 'Sample Item', description: 'Description', isActive: true },
  null,
  2,
)

const DEFAULT_ID_PARAM = '3fa85f64-5717-4562-b3fc-2c963f66afa6'

const METHOD_COLOR: Record<string, string> = {
  GET: 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800',
  POST: 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800',
  PUT: 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800',
  DELETE:
    'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800',
}

const FILTER_ACTIVE_CLASS: Record<CrudFilter, string> = {
  all: '!bg-blue-500 text-white',
  with: '!bg-green-500 text-white',
  without: '!bg-slate-500 text-white',
}

// Helper: tableName -> PascalCase entity name
function toPascalCase(tableName: string): string {
  const name = tableName.replace(/^.*\./g, '')
  return name
    .replace(/[_-]([a-z])/gi, (_: string, c: string) => c.toUpperCase())
    .replace(/^([a-z])/, (c: string) => c.toUpperCase())
}

const getErrorMessage = (error: unknown, fallback: string): string => {
  const response = (
    error as { response?: { data?: { error?: { message?: string }; message?: string } } }
  )?.response
  return (
    response?.data?.error?.message ||
    response?.data?.message ||
    (error instanceof Error ? error.message : undefined) ||
    fallback
  )
}

const needsBody = (ep: CrudEndpoint) =>
  ep.operationType === 'Create' || ep.operationType === 'Update'

const CrudEndpointManager: React.FC = () => {
  const { translate } = useLocalization()

  // Endpoints
  const [generatedEndpoints, setGeneratedEndpoints] = useState<CrudEndpoint[]>([])

  // Data source + tables
  const [dataSources, setDataSources] = useState<DataSourceDto[]>([])
  const [selectedDataSource, setSelectedDataSource] = useState<string | null>(null)
  const [dbTables, setDbTables] = useState<DatabaseTableDto[]>([])
  const [loadingTables, setLoadingTables] = useState(false)

  // Selection
  const [selectedTable, setSelectedTable] = useState<DatabaseTableDto | null>(null)
  const [tableSearch, setTableSearch] = useState('')
  const [crudFilter, setCrudFilter] = useState<CrudFilter>('all')

  // Endpoint management state
  const [generatingFor, setGeneratingFor] = useState<string | null>(null)
  const [deletingAll, setDeletingAll] = useState<string | null>(null)
  const [confirmDeleteTable, setConfirmDeleteTable] = useState<DatabaseTableDto | null>(null)
  const [togglingId, setTogglingId] = useState<string | null>(null)
  const [expandedEndpoint, setExpandedEndpoint] = useState<string | null>(null)

  // Test state
  const [testResults, setTestResults] = useState<Record<string, TestResult>>({})
  const [loadingEndpoints, setLoadingEndpoints] = useState<Set<string>>(new Set())
  const [parameterValues, setParameterValues] = useState<Record<string, Record<string, string>>>({})
  const [requestBodies, setRequestBodies] = useState<Record<string, string>>({})

  const pushError = useCallback((message: string) => {
    toast.push(
      <Notification type="danger" duration={3000}>
        {message}
      </Notification>,
    )
  }, [])

  const pushSuccess = useCallback((message: string) => {
    toast.push(
      <Notification type="success" duration={2000}>
        {message}
      </Notification>,
    )
  }, [])

  // Load endpoints + data sources on mount
  useEffect(() => {
    let cancelled = false

    developerKitService
      .getGeneratedListEndpoints()
      .then((res) => {
        if (!cancelled) setGeneratedEndpoints(res.items || [])
      })
      .catch((err) => {
        if (!cancelled) pushError(getErrorMessage(err, translate('::App.Platform.ErrorLoading')))
      })

    getDataSources()
      .then((res) => {
        if (cancelled) return
        const items = res.data.items || []
        setDataSources(items)
        setSelectedDataSource((current) => current ?? items[0]?.code ?? null)
      })
      .catch((err) => {
        if (!cancelled)
          pushError(getErrorMessage(err, translate('::App.Platform.FailedtoloadDatasources')))
      })

    return () => {
      cancelled = true
    }
  }, [pushError, translate])

  // Load tables when datasource changes
  useEffect(() => {
    if (!selectedDataSource) return
    let cancelled = false

    setLoadingTables(true)
    setDbTables([])
    setSelectedTable(null)

    sqlObjectManagerService
      .getAllObjects(selectedDataSource)
      .then((res) => {
        if (!cancelled) setDbTables(res.data.tables || [])
      })
      .catch((err) => {
        if (!cancelled)
          pushError(getErrorMessage(err, translate('::App.Platform.FailedToLoadObjects')))
      })
      .finally(() => {
        if (!cancelled) setLoadingTables(false)
      })

    return () => {
      cancelled = true
    }
  }, [selectedDataSource, pushError, translate])

  // entityName -> endpoints (tek geçiş, tablo başına filtrelemeyi önler)
  const endpointsByEntity = useMemo(() => {
    const map = new Map<string, CrudEndpoint[]>()
    for (const ep of generatedEndpoints) {
      const list = map.get(ep.entityName)
      if (list) list.push(ep)
      else map.set(ep.entityName, [ep])
    }
    return map
  }, [generatedEndpoints])

  const getEndpointsForTable = useCallback(
    (tableName: string): CrudEndpoint[] =>
      endpointsByEntity.get(toPascalCase(tableName)) ?? EMPTY_ENDPOINTS,
    [endpointsByEntity],
  )

  // fullName -> { total, active }
  const tableStats = useMemo(() => {
    const map = new Map<string, TableStat>()
    for (const table of dbTables) {
      const endpoints = endpointsByEntity.get(toPascalCase(table.tableName)) ?? EMPTY_ENDPOINTS
      map.set(table.fullName, {
        total: endpoints.length,
        active: endpoints.reduce((sum, ep) => sum + (ep.isActive ? 1 : 0), 0),
      })
    }
    return map
  }, [dbTables, endpointsByEntity])

  const withCrudCount = useMemo(
    () => dbTables.reduce((sum, t) => sum + ((tableStats.get(t.fullName)?.total ?? 0) > 0 ? 1 : 0), 0),
    [dbTables, tableStats],
  )

  const filteredTables = useMemo(() => {
    const search = tableSearch.trim().toLowerCase()
    return dbTables.filter((t) => {
      const matchesSearch =
        !search ||
        t.fullName.toLowerCase().includes(search) ||
        t.tableName.toLowerCase().includes(search)
      if (!matchesSearch) return false
      if (crudFilter === 'all') return true
      const hasCrud = (tableStats.get(t.fullName)?.total ?? 0) > 0
      return crudFilter === 'with' ? hasCrud : !hasCrud
    })
  }, [dbTables, tableSearch, crudFilter, tableStats])

  const tablesBySchema = useMemo(
    () =>
      filteredTables.reduce<Record<string, DatabaseTableDto[]>>((acc, t) => {
        const schema = t.schemaName || 'dbo'
        ;(acc[schema] ??= []).push(t)
        return acc
      }, {}),
    [filteredTables],
  )

  const filterLabels = useMemo<Record<CrudFilter, string>>(
    () => ({
      all: `${translate('::App.StaticLookup.All')} (${dbTables.length})`,
      with: `${translate('::App.DeveloperKitCrudEndpoints.FilterWith')} (${withCrudCount})`,
      without: `${translate('::App.DeveloperKitCrudEndpoints.FilterWithout')} (${dbTables.length - withCrudCount})`,
    }),
    [dbTables.length, withCrudCount, translate],
  )

  // Generate CRUD endpoints for a table
  const handleGenerate = useCallback(
    async (table: DatabaseTableDto) => {
      setGeneratingFor(table.fullName)
      try {
        const entityName = toPascalCase(table.tableName)
        const result = await developerKitService.generateCrudEndpoints(entityName)
        setGeneratedEndpoints((prev) => [
          ...prev.filter((ep) => ep.entityName !== entityName),
          ...(result.items || []),
        ])
        pushSuccess(translate('::App.Platform.OperationCompleted'))
      } catch (err) {
        pushError(getErrorMessage(err, translate('::App.Platform.IslemBasarisiz')))
      } finally {
        setGeneratingFor(null)
      }
    },
    [pushError, pushSuccess, translate],
  )

  // Delete all endpoints for a table
  const handleDeleteAll = useCallback(
    async (table: DatabaseTableDto) => {
      setDeletingAll(table.fullName)
      try {
        const endpoints = getEndpointsForTable(table.tableName)
        const results = await Promise.allSettled(
          endpoints.map((ep) => developerKitService.deleteGeneratedEndpoint(ep.id)),
        )

        // Kısmi başarıda yalnızca gerçekten silinenleri state'ten düş.
        const deletedIds = new Set(
          endpoints.filter((_, i) => results[i].status === 'fulfilled').map((ep) => ep.id),
        )
        if (deletedIds.size) {
          setGeneratedEndpoints((prev) => prev.filter((ep) => !deletedIds.has(ep.id)))
        }

        const failed = results.find((r) => r.status === 'rejected')
        if (failed) {
          pushError(
            getErrorMessage(
              (failed as PromiseRejectedResult).reason,
              translate('::App.Platform.ErrorDeleting'),
            ),
          )
        } else {
          pushSuccess(translate('::App.Platform.ObjectDeletedSuccessfully'))
        }
      } catch (err) {
        pushError(getErrorMessage(err, translate('::App.Platform.ErrorDeleting')))
      } finally {
        setDeletingAll(null)
      }
    },
    [getEndpointsForTable, pushError, pushSuccess, translate],
  )

  // Toggle single endpoint
  const handleToggle = useCallback(
    async (endpointId: string) => {
      setTogglingId(endpointId)
      try {
        const updated = await developerKitService.toggleGeneratedEndpoint(endpointId)
        setGeneratedEndpoints((prev) => prev.map((ep) => (ep.id === endpointId ? updated : ep)))
      } catch (err) {
        pushError(getErrorMessage(err, translate('::App.Platform.IslemBasarisiz')))
      } finally {
        setTogglingId(null)
      }
    },
    [pushError, translate],
  )

  const copyToClipboard = useCallback(
    async (text: string) => {
      try {
        await navigator.clipboard.writeText(text)
        pushSuccess(translate('::App.Platform.Copied'))
      } catch (err) {
        pushError(getErrorMessage(err, translate('::App.Platform.CopyFailed')))
      }
    },
    [pushError, pushSuccess, translate],
  )

  // Test endpoint helpers
  const getEndpointParameters = useCallback(
    (endpoint: CrudEndpoint): ParameterInput[] => {
      const vals = parameterValues[endpoint.id]
      const valueOf = (name: string, fallback: string) => vals?.[name] ?? fallback

      switch (endpoint.operationType) {
        case 'GetById':
        case 'Update':
        case 'Delete':
          return [{ name: 'id', value: valueOf('id', DEFAULT_ID_PARAM), type: 'path' }]
        case 'GetList':
          return [
            { name: 'SkipCount', value: valueOf('SkipCount', '0'), type: 'query' },
            { name: 'MaxResultCount', value: valueOf('MaxResultCount', '10'), type: 'query' },
          ]
        default:
          return []
      }
    },
    [parameterValues],
  )

  const getRequestBody = useCallback(
    (ep: CrudEndpoint) => requestBodies[ep.id] ?? DEFAULT_SAMPLE_BODY,
    [requestBodies],
  )

  const testEndpoint = useCallback(
    async (endpoint: CrudEndpoint) => {
      setLoadingEndpoints((prev) => new Set(prev).add(endpoint.id))
      try {
        const params = getEndpointParameters(endpoint)
        const pathValues = new Map(
          params.filter((p) => p.type === 'path').map((p) => [p.name, p.value]),
        )

        // Path backend tarafından üretilir ({id} gibi yer tutucular içerir).
        const basePath = endpoint.path || `/api/app/crudendpoint/${endpoint.entityName}`
        const url = basePath.replace(/\{(\w+)\}/g, (match, name: string) => {
          const value = pathValues.get(name)
          return value === undefined ? match : encodeURIComponent(value)
        })

        const queryParams = Object.fromEntries(
          params.filter((p) => p.type === 'query').map((p) => [p.name, p.value]),
        )

        let data: unknown
        if (needsBody(endpoint)) {
          try {
            data = JSON.parse(getRequestBody(endpoint))
          } catch {
            data = {}
          }
        }

        // apiService üzerinden gider: Authorization, __tenant ve Accept-Language
        // interceptor'ları uygulanır.
        const res = await apiService.fetchData({
          method: endpoint.method,
          url,
          params: Object.keys(queryParams).length ? queryParams : undefined,
          timeout: 10000,
          data,
        })

        setTestResults((prev) => ({
          ...prev,
          [endpoint.id]: {
            success: true,
            status: res.status,
            data: res.data,
            timestamp: new Date().toISOString(),
          },
        }))
      } catch (error: unknown) {
        const axiosErr = error as {
          response?: { status?: number; data?: unknown }
          message?: string
        }
        setTestResults((prev) => ({
          ...prev,
          [endpoint.id]: {
            success: false,
            status: axiosErr.response?.status || 0,
            error: axiosErr.response?.data ?? axiosErr.message,
            timestamp: new Date().toISOString(),
          },
        }))
      } finally {
        setLoadingEndpoints((prev) => {
          const next = new Set(prev)
          next.delete(endpoint.id)
          return next
        })
      }
    },
    [getEndpointParameters, getRequestBody],
  )

  // Derived stats
  const totalActiveEndpoints = useMemo(
    () => generatedEndpoints.reduce((sum, ep) => sum + (ep.isActive ? 1 : 0), 0),
    [generatedEndpoints],
  )

  const selectedTableEndpoints = useMemo(
    () => (selectedTable ? getEndpointsForTable(selectedTable.tableName) : EMPTY_ENDPOINTS),
    [selectedTable, getEndpointsForTable],
  )

  const selectedActiveCount = useMemo(
    () => selectedTableEndpoints.reduce((sum, ep) => sum + (ep.isActive ? 1 : 0), 0),
    [selectedTableEndpoints],
  )

  return (
    <div className="flex flex-col h-full gap-4 bg-gray-50 dark:bg-gray-950">
      <PageTitle title={translate('::App.DeveloperKit.CrudEndpoints')} />

      {/* Stats Row */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-2">
        <Widget
          title={translate('::App.DeveloperKitCrudEndpoints.TotalTables')}
          value={dbTables.length}
          color="blue"
          icon="FaDatabase"
          valueClassName="text-3xl"
          subTitle={translate('::App.DeveloperKitCrudEndpoints.TotalTablesDescription')}
        />
        <Widget
          title={translate('::App.DeveloperKitCrudEndpoints.EndpointInstalled')}
          value={withCrudCount}
          color="green"
          icon="FaCheckCircle"
          valueClassName="text-3xl"
          subTitle={translate('::App.DeveloperKitCrudEndpoints.EndpointInstalledDescription')}
        />
        <Widget
          title={translate('::App.DeveloperKitCrudEndpoints.ActiveEndpoint')}
          value={totalActiveEndpoints}
          color="teal"
          icon="FaBolt"
          valueClassName="text-3xl"
          subTitle={translate('::App.DeveloperKitCrudEndpoints.ActiveEndpointDescription')}
        />
        <Widget
          title={translate('::App.Platform.DataSource')}
          value={dataSources.length}
          color="purple"
          icon="FaServer"
          valueClassName="text-3xl"
          subTitle={translate('::App.DeveloperKitCrudEndpoints.DataSourceDescription')}
        />
      </div>

      {/* Main two-panel layout */}
      <div
        className="flex flex-col gap-4 lg:flex-row bg-gray-50 dark:bg-gray-950"
        style={{ minHeight: 400, height: 'calc(100vh - 250px)' }}
      >
        {/* Left Panel: Table List */}
        <div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
          {/* DataSource selector */}
          <div className="p-3 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800">
            <select
              value={selectedDataSource || ''}
              onChange={(e) => setSelectedDataSource(e.target.value)}
              aria-label={translate('::App.Platform.DataSource')}
              className="w-full px-2 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
            >
              {dataSources.length === 0 && (
                <option value="">{translate('::App.Platform.LoadingWithThreeDot')}</option>
              )}
              {dataSources.map((ds) => (
                <option key={ds.id} value={ds.code ?? ''}>
                  {ds.code}
                </option>
              ))}
            </select>
          </div>

          {/* Search + CRUD filter */}
          <div className="p-3 border-b border-slate-200 dark:border-gray-700 space-y-2">
            <div className="relative">
              <FaSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs" />
              <input
                type="search"
                placeholder={translate('::App.DeveloperKitCrudEndpoints.SearchTable')}
                value={tableSearch}
                onChange={(e) => setTableSearch(e.target.value)}
                aria-label={translate('::App.DeveloperKitCrudEndpoints.SearchTable')}
                className="w-full pl-7 pr-3 py-1.5 text-sm border border-slate-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
              />
            </div>
            <div className="flex rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden text-xs font-medium">
              {CRUD_FILTERS.map((f) => (
                <Button
                  type="button"
                  key={f}
                  onClick={() => setCrudFilter(f)}
                  variant="plain"
                  shape="none"
                  aria-pressed={crudFilter === f}
                  className={`flex-1 !h-auto !rounded-none !px-0 !py-1.5 transition-colors ${
                    crudFilter === f
                      ? FILTER_ACTIVE_CLASS[f]
                      : '!bg-white text-slate-500 hover:!bg-slate-50 dark:!bg-gray-900 dark:text-gray-400 dark:hover:!bg-gray-800'
                  }`}
                >
                  {filterLabels[f]}
                </Button>
              ))}
            </div>
          </div>

          {/* Table list */}
          <div className="flex-1 overflow-y-auto">
            {loadingTables ? (
              <div className="flex items-center justify-center p-8 text-slate-400">
                <FaSyncAlt className="animate-spin mr-2" />
                <span className="text-sm">{translate('::App.Platform.LoadingWithThreeDot')}</span>
              </div>
            ) : filteredTables.length === 0 ? (
              <div className="p-6 text-center text-slate-400 text-sm">
                {selectedDataSource
                  ? translate('::App.Platform.NoTablesAvailable')
                  : translate('::App.DeveloperKitCrudEndpoints.SelectDataSource')}
              </div>
            ) : (
              Object.entries(tablesBySchema).map(([schema, tables]) => (
                <div key={schema}>
                  <div className="px-3 py-1.5 text-xs font-semibold text-slate-400 dark:text-gray-400 uppercase tracking-wide bg-slate-50 dark:bg-gray-800 border-b border-slate-100 dark:border-gray-700 sticky top-0">
                    {schema}
                  </div>
                  {tables.map((table) => {
                    const stat = tableStats.get(table.fullName)
                    const active = stat?.active ?? 0
                    const total = stat?.total ?? 0
                    const isSelected = selectedTable?.fullName === table.fullName
                    const hasEndpoints = total > 0
                    return (
                      <Button
                        type="button"
                        key={table.fullName}
                        onClick={() => setSelectedTable(table)}
                        variant="plain"
                        shape="none"
                        className={`w-full !h-auto !items-center !justify-between !rounded-none border-b border-slate-50 !px-3 !py-1 text-left transition-colors hover:!bg-slate-50 dark:border-gray-800 dark:hover:!bg-gray-800 ${
                          isSelected
                            ? '!bg-blue-50 border-l-2 border-l-blue-500 dark:!bg-blue-900/20 dark:border-l-blue-400'
                            : ''
                        }`}
                      >
                        <span className="flex w-full min-w-0 items-center justify-between gap-2">
                          <span className="flex min-w-0 items-center gap-2">
                            <FaTable
                              className={`flex-shrink-0 text-xs ${
                                hasEndpoints ? 'text-green-500' : 'text-slate-300'
                              }`}
                            />
                            <span className="truncate text-sm text-slate-700 dark:text-gray-100">
                              {table.tableName}
                            </span>
                          </span>
                          <span className="flex flex-shrink-0 items-center gap-1">
                            {hasEndpoints && (
                              <span
                                className={`rounded-full px-1.5 py-0.5 text-xs font-medium ${
                                  active > 0
                                    ? 'bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400'
                                    : 'bg-slate-100 text-slate-500 dark:bg-gray-800 dark:text-gray-400'
                                }`}
                              >
                                {active}/{total}
                              </span>
                            )}
                            {isSelected && (
                              <FaChevronRight className="flex-shrink-0 text-xs text-blue-400" />
                            )}
                          </span>
                        </span>
                      </Button>
                    )
                  })}
                </div>
              ))
            )}
          </div>
        </div>

        {/* Right Panel: Endpoint Management */}
        <div className="flex-1 min-w-0 flex flex-col bg-white dark:bg-gray-900 rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden min-h-0">
          {!selectedTable ? (
            <div className="flex-1 flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 p-8">
              <FaDatabase className="text-4xl mb-3 text-slate-200 dark:text-gray-700" />
              <p className="text-base font-medium dark:text-gray-300">
                {translate('::App.DeveloperKitCrudEndpoints.SelectTablePrompt')}
              </p>
              <p className="text-sm mt-1 dark:text-gray-400">
                {translate('::App.DeveloperKitCrudEndpoints.SelectTableDescription')}
              </p>
            </div>
          ) : (
            <div className="flex flex-col h-full overflow-hidden">
              {/* Table header */}
              <div className="flex flex-col gap-3 p-4 border-b border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 sm:flex-row sm:items-center sm:justify-between">
                <div className="flex items-center gap-3">
                  <div className="bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 p-2 rounded-lg">
                    <FaTable />
                  </div>
                  <h4 className="text-slate-900 dark:text-gray-100">
                    {selectedTable.schemaName}.{selectedTable.tableName}
                  </h4>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  {selectedTableEndpoints.length > 0 && (
                    <Button
                      type="button"
                      onClick={() => setConfirmDeleteTable(selectedTable)}
                      disabled={deletingAll === selectedTable.fullName}
                      variant="plain"
                      shape="none"
                      icon={
                        deletingAll === selectedTable.fullName ? (
                          <FaSyncAlt className="animate-spin" />
                        ) : (
                          <FaTrash />
                        )
                      }
                      className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg border border-red-200 !px-3 !py-1.5 text-sm text-red-600 transition-colors hover:!bg-red-50 disabled:opacity-50 dark:border-red-700 dark:hover:!bg-red-900/20"
                    >
                      {translate('::App.DeveloperKitCrudEndpoints.DeleteAll')}
                    </Button>
                  )}
                  <Button
                    type="button"
                    onClick={() => handleGenerate(selectedTable)}
                    disabled={
                      generatingFor === selectedTable.fullName ||
                      deletingAll === selectedTable.fullName
                    }
                    variant="solid"
                    icon={
                      generatingFor === selectedTable.fullName ? (
                        <FaSyncAlt className="animate-spin" />
                      ) : (
                        <FaBolt />
                      )
                    }
                    className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg !px-4 !py-1.5 text-sm font-medium text-white transition-colors hover:!bg-blue-700 disabled:opacity-50 dark:!bg-blue-700 dark:hover:!bg-blue-800"
                  >
                    {selectedTableEndpoints.length > 0
                      ? translate('::App.DeveloperKitCrudEndpoints.Regenerate')
                      : translate('::App.DeveloperKitCrudEndpoints.CreateCrudEndpoint')}
                  </Button>
                </div>
              </div>

              {/* Endpoints list */}
              <div className="flex-1 overflow-y-auto p-4">
                {selectedTableEndpoints.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-16 text-slate-400 dark:text-gray-500">
                    <FaBolt className="text-3xl mb-3 text-slate-200 dark:text-gray-700" />
                    <p className="font-medium dark:text-gray-300">
                      {translate('::App.DeveloperKitCrudEndpoints.NoEndpointsYet')}
                    </p>
                    <p className="text-sm mt-1 dark:text-gray-400">
                      {translate('::App.DeveloperKitCrudEndpoints.ClickToCreate')}
                    </p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {selectedTableEndpoints.map((ep) => {
                      const isExpanded = expandedEndpoint === ep.id
                      const testResult = testResults[ep.id]
                      const isTesting = loadingEndpoints.has(ep.id)
                      const parameters = isExpanded ? getEndpointParameters(ep) : EMPTY_PARAMS
                      const resultPayload = testResult
                        ? JSON.stringify(
                            testResult.success ? testResult.data : testResult.error,
                            null,
                            2,
                          )
                        : ''
                      return (
                        <div
                          key={ep.id}
                          className="border border-slate-200 dark:border-gray-700 rounded-lg overflow-hidden"
                        >
                          {/* Endpoint row */}
                          <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-900 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors">
                            {/* Toggle */}
                            <Button
                              type="button"
                              onClick={() => handleToggle(ep.id)}
                              disabled={togglingId === ep.id}
                              title={
                                ep.isActive
                                  ? translate('::App.DeveloperKitCrudEndpoints.Disable')
                                  : translate('::App.DeveloperKitCrudEndpoints.Enable')
                              }
                              variant="plain"
                              shape="none"
                              className={`!h-8 !w-8 flex-shrink-0 !rounded !p-0 text-xl transition-colors hover:!bg-transparent ${
                                ep.isActive
                                  ? 'text-green-500 hover:text-green-700'
                                  : 'text-slate-300 hover:text-slate-500'
                              } disabled:opacity-40`}
                            >
                              {togglingId === ep.id ? (
                                <FaSyncAlt className="animate-spin text-base" />
                              ) : ep.isActive ? (
                                <FaToggleOn />
                              ) : (
                                <FaToggleOff />
                              )}
                            </Button>

                            {/* Method badge */}
                            <span
                              className={`flex-shrink-0 px-2 py-0.5 text-xs font-bold rounded border ${
                                METHOD_COLOR[ep.method] ||
                                'bg-slate-100 dark:bg-gray-800 text-slate-700 dark:text-gray-300 border-slate-200 dark:border-gray-700'
                              }`}
                            >
                              {ep.method}
                            </span>

                            {/* Operation */}
                            <div className="flex-1 min-w-0">
                              <span className="font-medium text-slate-800 dark:text-gray-100 text-sm">
                                {ep.operationType}
                              </span>
                              <code className="ml-3 text-xs text-slate-500 dark:text-gray-400 bg-slate-100 dark:bg-gray-800 px-2 py-0.5 rounded">
                                {ep.path}
                              </code>
                            </div>

                            {/* Expand */}
                            <Button
                              type="button"
                              onClick={() => setExpandedEndpoint(isExpanded ? null : ep.id)}
                              variant="plain"
                              shape="none"
                              aria-expanded={isExpanded}
                              className="!h-7 !w-7 !rounded !p-0 text-slate-400 transition-colors hover:!bg-transparent hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
                              title={translate('::App.DeveloperKitCrudEndpoints.TestDetails')}
                            >
                              {isExpanded ? (
                                <FaChevronDown className="text-xs" />
                              ) : (
                                <FaChevronRight className="text-xs" />
                              )}
                            </Button>
                          </div>

                          {/* Expanded detail + test */}
                          {isExpanded && (
                            <div className="border-t border-slate-200 dark:border-gray-700 bg-slate-50 dark:bg-gray-800 p-4 space-y-4">
                              {/* Parameters */}
                              {parameters.length > 0 && (
                                <div>
                                  <p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
                                    {translate('::App.DeveloperKitCrudEndpoints.Parameters')}
                                  </p>
                                  <div className="space-y-2">
                                    {parameters.map((param) => (
                                      <div key={param.name} className="flex items-center gap-2">
                                        <span
                                          className={`text-xs px-1.5 py-0.5 rounded font-mono ${
                                            param.type === 'path'
                                              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                                              : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
                                          }`}
                                        >
                                          {param.name}
                                        </span>
                                        <input
                                          type="text"
                                          value={param.value}
                                          aria-label={param.name}
                                          onChange={(e) =>
                                            setParameterValues((prev) => ({
                                              ...prev,
                                              [ep.id]: {
                                                ...prev[ep.id],
                                                [param.name]: e.target.value,
                                              },
                                            }))
                                          }
                                          className="flex-1 px-2 py-1 text-xs border border-slate-300 dark:border-gray-700 rounded focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                                        />
                                      </div>
                                    ))}
                                  </div>
                                </div>
                              )}

                              {/* Request body */}
                              {needsBody(ep) && (
                                <div>
                                  <p className="text-xs font-semibold text-slate-600 dark:text-gray-300 mb-2">
                                    {translate('::App.DeveloperKitCrudEndpoints.RequestBody')}
                                  </p>
                                  <textarea
                                    value={getRequestBody(ep)}
                                    aria-label={translate(
                                      '::App.DeveloperKitCrudEndpoints.RequestBody',
                                    )}
                                    onChange={(e) =>
                                      setRequestBodies((prev) => ({
                                        ...prev,
                                        [ep.id]: e.target.value,
                                      }))
                                    }
                                    rows={5}
                                    spellCheck={false}
                                    className="w-full px-2 py-1.5 text-xs border border-slate-300 dark:border-gray-700 rounded font-mono focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                                  />
                                </div>
                              )}

                              {/* Test button */}
                              <div className="flex items-center gap-2">
                                <Button
                                  type="button"
                                  onClick={() => testEndpoint(ep)}
                                  disabled={isTesting}
                                  variant="solid"
                                  icon={
                                    isTesting ? (
                                      <FaSyncAlt className="animate-spin" />
                                    ) : (
                                      <FaPaperPlane />
                                    )
                                  }
                                  className="!inline-flex !h-auto !items-center !justify-center gap-2 whitespace-nowrap !rounded-lg !px-4 !py-1.5 text-sm text-white transition-colors hover:!bg-blue-700 disabled:opacity-50"
                                >
                                  {isTesting
                                    ? translate('::App.DeveloperKitEndpoint.SendLoading')
                                    : translate('::App.DeveloperKitCrudEndpoints.Test')}
                                </Button>
                                {testResult && (
                                  <Button
                                    type="button"
                                    onClick={() =>
                                      setTestResults((prev) => {
                                        const next = { ...prev }
                                        delete next[ep.id]
                                        return next
                                      })
                                    }
                                    variant="plain"
                                    shape="none"
                                    className="!h-auto !rounded !px-2 !py-1.5 text-xs text-slate-500 hover:!bg-transparent hover:text-slate-700"
                                  >
                                    {translate('::App.Platform.Clear')}
                                  </Button>
                                )}
                              </div>

                              {/* Test result */}
                              {testResult && (
                                <div
                                  className={`rounded-lg border p-3 ${
                                    testResult.success
                                      ? 'border-green-200 dark:border-green-700 bg-green-50 dark:bg-green-900/20'
                                      : 'border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/20'
                                  }`}
                                >
                                  <div className="flex items-center gap-2 mb-2">
                                    {testResult.success ? (
                                      <FaCheckCircle className="text-green-500 dark:text-green-400" />
                                    ) : (
                                      <FaExclamationCircle className="text-red-500 dark:text-red-400" />
                                    )}
                                    <span className="text-sm font-medium">
                                      HTTP {testResult.status}
                                    </span>
                                    <span className="text-xs text-slate-500 dark:text-gray-400 ml-auto">
                                      {new Date(testResult.timestamp).toLocaleTimeString()}
                                    </span>
                                  </div>
                                  <div className="relative">
                                    <pre className="text-xs bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded p-2 overflow-x-auto max-h-48 text-gray-900 dark:text-gray-100">
                                      {resultPayload}
                                    </pre>
                                    <Button
                                      type="button"
                                      onClick={() => copyToClipboard(resultPayload)}
                                      variant="plain"
                                      shape="none"
                                      title={translate('::App.Platform.CopyToClipboard')}
                                      icon={<FaCopy className="text-xs" />}
                                      className="absolute right-1.5 top-1.5 !h-6 !w-6 !rounded !p-0 text-slate-400 hover:!bg-transparent hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
                                    />
                                  </div>
                                </div>
                              )}

                              {/* C# Code Preview */}
                              {ep.csharpCode && (
                                <div>
                                  <div className="flex items-center justify-between mb-1">
                                    <p className="text-xs font-semibold text-slate-600 dark:text-gray-300">
                                      {translate('::App.DeveloperKitCrudEndpoints.CsharpCode')}
                                    </p>
                                    <Button
                                      type="button"
                                      onClick={() => copyToClipboard(ep.csharpCode)}
                                      variant="plain"
                                      shape="none"
                                      icon={<FaCopy />}
                                      className="!inline-flex !h-auto !items-center !justify-center gap-1 whitespace-nowrap !rounded-none !px-0 !py-0 text-xs text-slate-400 hover:!bg-transparent hover:text-slate-700 dark:text-gray-400 dark:hover:text-gray-200"
                                    >
                                      {translate('::App.Platform.Copy')}
                                    </Button>
                                  </div>
                                  <pre className="text-xs bg-slate-800 dark:bg-gray-900 text-green-300 rounded-lg p-3 overflow-x-auto max-h-48 font-mono">
                                    {ep.csharpCode}
                                  </pre>
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      )
                    })}
                  </div>
                )}
              </div>

              {/* Footer info */}
              {selectedTableEndpoints.length > 0 && (
                <div className="border-t border-slate-200 dark:border-gray-700 px-2 py-1 bg-slate-50 dark:bg-gray-800 flex items-center gap-4 text-xs text-slate-500 dark:text-gray-400">
                  <span className="flex items-center gap-1">
                    <FaCheckCircle className="text-green-400" />
                    {selectedActiveCount} {translate('::App.Listform.ListformField.IsActive')}
                  </span>
                  <span>
                    {selectedTableEndpoints.length - selectedActiveCount}{' '}
                    {translate('::App.DeveloperKitCrudEndpoints.InactiveCount')}
                  </span>
                  <span className="ml-auto">
                    {translate('::App.DeveloperKitCrudEndpoints.EndpointSummary')}
                  </span>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      <ConfirmDialog
        isOpen={!!confirmDeleteTable}
        type="danger"
        title={translate('::App.Platform.DeleteConfirmation')}
        confirmText={translate('::App.DeveloperKitCrudEndpoints.DeleteAll')}
        cancelText={translate('::App.Platform.Cancel')}
        confirmButtonColor="red-600"
        onCancel={() => setConfirmDeleteTable(null)}
        onConfirm={() => {
          const table = confirmDeleteTable
          setConfirmDeleteTable(null)
          if (table) handleDeleteAll(table)
        }}
      >
        <p>{translate('::App.Platform.DeleteConfirmationMessage')}</p>
      </ConfirmDialog>
    </div>
  )
}

export default CrudEndpointManager