erp-platform/ui/src/components/developerKit/EntityManager.tsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useEntities } from '../../contexts/EntityContext'
import {
  FaPlus,
  FaSearch,
  FaEdit,
  FaTrashAlt,
  FaEye,
  FaEyeSlash,
  FaFilter,
  FaCalendarAlt,
  FaDatabase,
  FaCheckCircle,
  FaTable,
  FaBolt,
} from 'react-icons/fa'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'

const EntityManager: React.FC = () => {
  const { entities, deleteEntity, toggleEntityActiveStatus } = useEntities()
  const [searchTerm, setSearchTerm] = useState('')
  const [filterActive, setFilterActive] = useState<'all' | 'active' | 'inactive'>('all')
  const { translate } = useLocalization()

  const filteredEntities = entities.filter((entity) => {
    const matchesSearch =
      entity.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      entity.displayName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (entity.description || '').toLowerCase().includes(searchTerm.toLowerCase())

    const matchesActiveFilter =
      filterActive === 'all' ||
      (filterActive === 'active' && entity.isActive) ||
      (filterActive === 'inactive' && !entity.isActive)

    return matchesSearch && matchesActiveFilter
  })

  const handleToggleActive = async (id: string) => {
    try {
      await toggleEntityActiveStatus(id)
    } catch (err) {
      console.error('Failed to toggle entity status:', err)
    }
  }

  const handleDelete = async (id: string, name: string) => {
    if (
      window.confirm(
        `Are you sure you want to delete the "${name}" entity?\n\nThis action will permanently remove:\n• The entity and all its fields\n• All related migrations\n• All related API endpoints\n\nThis cannot be undone.`,
      )
    ) {
      try {
        await deleteEntity(id)
      } catch (err) {
        console.error('Failed to delete entity:', err)
        alert(translate('::App.DeveloperKit.Entity.DeleteFailed'))
      }
    }
  }

  const stats = {
    total: entities.length,
    active: entities.filter((e) => e.isActive).length,
    migrationsPending: entities.filter((e) => e.migrationStatus === 'pending').length,
    endpointsApplied: entities.filter((e) => e.endpointStatus === 'applied').length,
  }

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-slate-900 mb-2">
            {translate('::App.DeveloperKit.Entity.Title')}
          </h1>
          <p className="text-slate-600">{translate('::App.DeveloperKit.Entity.Description')}</p>
        </div>
        <Link
          to={ROUTES_ENUM.protected.saas.developerKit.entitiesNew}
          className="flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors shadow-sm hover:shadow-md"
        >
          <FaPlus className="w-4 h-4" />
          {translate('::App.DeveloperKit.Entity.NewEntity')}
        </Link>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-600">
                {translate('::App.DeveloperKit.Entity.TotalEntities')}
              </p>
              <p className="text-2xl font-bold text-slate-900 mt-1">{stats.total}</p>
            </div>
            <div className="bg-blue-100 text-blue-600 p-3 rounded-lg">
              <FaDatabase className="w-6 h-6" />
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-600">
                {translate('::App.DeveloperKit.Entity.ActiveEntities')}
              </p>
              <p className="text-2xl font-bold text-slate-900 mt-1">
                {stats.active}
                <span className="text-sm font-normal text-slate-500 ml-1">/ {stats.total}</span>
              </p>
            </div>
            <div className="bg-green-100 text-green-600 p-3 rounded-lg">
              <FaCheckCircle className="w-6 h-6" />
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-600">
                {translate('::App.DeveloperKit.Entity.PendingMigrations')}
              </p>
              <p className="text-2xl font-bold text-slate-900 mt-1">{stats.migrationsPending}</p>
            </div>
            <div className="bg-purple-100 text-purple-600 p-3 rounded-lg">
              <FaBolt className="w-6 h-6" />
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-600">
                {translate('::App.DeveloperKit.Entity.CrudEndpoints')}
              </p>
              <p className="text-2xl font-bold text-slate-900 mt-1">{stats.endpointsApplied}</p>
            </div>
            <div className="bg-emerald-100 text-emerald-600 p-3 rounded-lg">
              <FaBolt className="w-6 h-6" />
            </div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-lg border border-slate-200 p-6 mb-6 shadow-sm">
        <div className="flex flex-col lg:flex-row gap-4">
          <div className="flex-1 relative">
            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
            <input
              type="text"
              placeholder={translate('::App.DeveloperKit.Entity.SearchPlaceholder')}
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors"
            />
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <FaFilter className="w-5 h-5 text-slate-500" />
              <select
                value={filterActive}
                onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
                className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-colors"
              >
                <option value="all">{translate('::App.DeveloperKit.Entity.Filter.All')}</option>
                <option value="active">
                  {translate('::App.DeveloperKit.Entity.Filter.Active')}
                </option>
                <option value="inactive">
                  {translate('::App.DeveloperKit.Entity.Filter.Inactive')}
                </option>
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* Entities List */}
      {filteredEntities.length > 0 ? (
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
          {filteredEntities.map((entity) => {
            return (
              <div
                key={entity.id}
                className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 group"
              >
                <div className="p-6">
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
                          <FaTable className="w-5 h-5" />
                        </div>
                        <div>
                          <h3 className="text-lg font-semibold text-slate-900">
                            {entity.displayName}
                          </h3>
                          <p className="text-sm text-slate-500">
                            {translate('::App.DeveloperKit.Entity.TableLabel')}: {entity.tableName}
                          </p>
                        </div>
                      </div>
                      {entity.description && (
                        <p className="text-slate-600 text-sm mb-3">{entity.description}</p>
                      )}
                      <div className="flex items-center gap-4 text-xs text-slate-500 mb-3">
                        <div className="flex items-center gap-1">
                          <FaCalendarAlt className="w-3 h-3" />
                          <span>
                            {translate('::App.DeveloperKit.Entity.Updated')}:{' '}
                            {entity.lastModificationTime
                              ? new Date(entity.lastModificationTime).toLocaleDateString()
                              : 'Never'}
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          <FaDatabase className="w-3 h-3" />
                          <span>
                            {entity.fields.length} {translate('::App.DeveloperKit.Entity.Fields')}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Entity Fields Preview */}
                  <div className="mb-4">
                    <div className="bg-slate-50 rounded-lg p-3">
                      <h4 className="text-sm font-medium text-slate-700 mb-2">
                        {translate('::App.DeveloperKit.Entity.FieldsLabel')}:
                      </h4>
                      <div className="grid grid-cols-2 gap-2 text-xs">
                        {entity.fields.slice(0, 4).map((field) => (
                          <div key={field.id} className="flex items-center gap-2">
                            <span
                              className={`px-2 py-1 rounded text-xs font-medium ${
                                field.type === 'string'
                                  ? 'bg-blue-100 text-blue-700'
                                  : field.type === 'number' || field.type === 'decimal'
                                    ? 'bg-green-100 text-green-700'
                                    : field.type === 'boolean'
                                      ? 'bg-purple-100 text-purple-700'
                                      : field.type === 'date'
                                        ? 'bg-orange-100 text-orange-700'
                                        : 'bg-slate-100 text-slate-700'
                              }`}
                            >
                              {field.type}
                            </span>
                            <span className="text-slate-600">{field.name}</span>
                            {field.isRequired && <span className="text-red-500">*</span>}
                          </div>
                        ))}
                        {entity.fields.length > 4 && (
                          <div className="text-slate-500 italic">
                            +{entity.fields.length - 4}{' '}
                            {translate('::App.DeveloperKit.Entity.More')}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Migration and Endpoint Status */}
                  <div className="mb-4 space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-slate-700">
                        {translate('::App.DeveloperKit.Entity.MigrationStatus')}
                      </span>
                      <span
                        className={`text-xs px-2 py-1 rounded-full ${
                          entity.migrationStatus === 'applied'
                            ? 'bg-green-100 text-green-700'
                            : entity.migrationStatus === 'pending'
                              ? 'bg-yellow-100 text-yellow-700'
                              : 'bg-red-100 text-red-700'
                        }`}
                      >
                        {entity.migrationStatus}
                      </span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-slate-700">
                        {translate('::App.DeveloperKit.Entity.EndpointStatus')}
                      </span>
                      <span
                        className={`text-xs px-2 py-1 rounded-full ${
                          entity.endpointStatus === 'applied'
                            ? 'bg-blue-100 text-blue-700'
                            : entity.endpointStatus === 'pending'
                              ? 'bg-orange-100 text-orange-700'
                              : 'bg-red-100 text-red-700'
                        }`}
                      >
                        {entity.endpointStatus}
                      </span>
                    </div>
                  </div>

                  {/* Actions */}
                  <div className="flex items-center justify-between pt-4 border-t border-slate-100">
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleToggleActive(entity.id)}
                        className={`flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium transition-colors ${
                          entity.isActive
                            ? 'bg-green-100 text-green-700 hover:bg-green-200'
                            : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                        }`}
                      >
                        {entity.isActive ? (
                          <>
                            <FaEye className="w-3 h-3" />
                            {translate('::App.DeveloperKit.Entity.Active')}
                          </>
                        ) : (
                          <>
                            <FaEyeSlash className="w-3 h-3" />
                            {translate('::App.DeveloperKit.Entity.Inactive')}
                          </>
                        )}
                      </button>
                    </div>
                    <div className="flex items-center gap-1">
                      <Link
                        to={ROUTES_ENUM.protected.saas.developerKit.entitiesEdit.replace(
                          ':id',
                          entity.id,
                        )}
                        className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
                        title={translate('::App.DeveloperKit.Entity.Edit')}
                      >
                        <FaEdit className="w-4 h-4" />
                      </Link>
                      <button
                        onClick={() => handleDelete(entity.id, entity.displayName)}
                        className="p-2 text-slate-600 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                        title={translate('::App.DeveloperKit.Entity.Delete')}
                      >
                        <FaTrashAlt className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      ) : (
        <div className="text-center py-12">
          <div className="max-w-md mx-auto">
            <div className="bg-slate-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
              <FaDatabase className="w-8 h-8 text-slate-500" />
            </div>
            <h3 className="text-lg font-medium text-slate-900 mb-2">
              {searchTerm || filterActive !== 'all'
                ? translate('::App.DeveloperKit.Entity.NoEntitiesFound')
                : translate('::App.DeveloperKit.Entity.NoEntitiesYet')}
            </h3>
            <p className="text-slate-600 mb-6">
              {searchTerm || filterActive !== 'all'
                ? translate('::App.DeveloperKit.Entity.TryAdjustingFilters')
                : translate('::App.DeveloperKit.Entity.CreateFirstEntity')}
            </p>
            {!searchTerm && filterActive === 'all' && (
              <Link
                to={ROUTES_ENUM.protected.saas.developerKitEntitiesNew}
                className="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition-colors shadow-sm hover:shadow-md"
              >
                <FaPlus className="w-4 h-4" />
                {translate('::App.DeveloperKit.Entity.CreateEntity')}
              </Link>
            )}
          </div>
        </div>
      )}
    </div>
  )
}

export default EntityManager