tessera-ctl/apps/web/src/components/custom-modules/custom-module-manager.tsx

'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { type CustomModule, listCustomModules } from '@/lib/custom-modules-api';
import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
import { useCategoryLabel } from '@/lib/use-category-label';
import { CustomModuleFormModal } from './custom-module-form-modal';
import { DeleteCustomModuleDialog } from './delete-custom-module-dialog';

/** Seitenspezifische, bereits uebersetzte Texte der beiden Aufrufer. */
export interface CustomModuleManagerTexts {
  title: string;
  description: string;
  create: string;
  noModules: string;
  noModulesBody: string;
}

interface CustomModuleManagerProps {
  /**
   * `shared`: Verwaltung — zeigt und pflegt nur die gemeinsamen Eintraege (fuer
   * alle Benutzer sichtbar). `personal`: Einstellungen — zeigt und pflegt nur
   * die eigenen persoenlichen Eintraege des angemeldeten Benutzers.
   */
  scope: 'shared' | 'personal';
  texts: CustomModuleManagerTexts;
}

/**
 * Liste mit Anlegen, Bearbeiten und Loeschen eigener Module (quick-260929-dzu).
 * Eine Oberflaeche fuer zwei Aufrufer: `admin/custom-modules` (`scope="shared"`)
 * und `settings/custom-modules` (`scope="personal"`). Die API liefert gemeinsame
 * PLUS eigene Eintraege; die Seite filtert ueber `personal` auf ihren Bereich.
 * Nach jedem erfolgreichen Anlegen, Aendern oder Loeschen zieht die Seitenleiste
 * ueber `bumpSidebarRefresh` ohne Neuladen nach.
 */
export function CustomModuleManager({ scope, texts }: CustomModuleManagerProps) {
  const t = useTranslations('customModules.form');
  const tManage = useTranslations('customModules.manage');
  const tCommon = useTranslations('common');
  const categoryLabel = useCategoryLabel();
  const bumpSidebarRefresh = useMarketplaceStore((s) => s.bumpSidebarRefresh);
  const shared = scope === 'shared';

  const [modules, setModules] = useState<CustomModule[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadFailed, setLoadFailed] = useState(false);

  const [showFormModal, setShowFormModal] = useState(false);
  const [editing, setEditing] = useState<CustomModule | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<CustomModule | null>(null);

  const fetchModules = useCallback(async () => {
    try {
      const all = await listCustomModules();
      setModules(all.filter((m) => m.personal !== shared));
      setLoadFailed(false);
    } catch {
      setLoadFailed(true);
    } finally {
      setLoading(false);
    }
  }, [shared]);

  useEffect(() => {
    fetchModules();
  }, [fetchModules]);

  const handleChanged = () => {
    fetchModules();
    bumpSidebarRefresh();
  };

  const openCreate = () => {
    setEditing(null);
    setShowFormModal(true);
  };

  const openEdit = (mod: CustomModule) => {
    setEditing(mod);
    setShowFormModal(true);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1
          className={`${shared ? 'text-2xl' : 'text-lg'} font-semibold text-foreground`}
        >
          {texts.title}
        </h1>
        <button type="button" onClick={openCreate} className="btn btn-primary">
          {texts.create}
        </button>
      </div>

      <p className="text-sm text-muted-foreground">{texts.description}</p>

      {loadFailed && (
        <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
          {tManage('loadError')}
        </div>
      )}

      {loading ? (
        <p className="text-muted-foreground">{tCommon('loading')}</p>
      ) : modules.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <h2 className="mb-2 text-lg font-semibold text-foreground">{texts.noModules}</h2>
          <p className="mb-6 text-sm text-muted-foreground">{texts.noModulesBody}</p>
          <button type="button" onClick={openCreate} className="btn btn-primary">
            {texts.create}
          </button>
        </div>
      ) : (
        <div className="overflow-x-auto rounded-md border border-border">
          <table className="w-full text-sm">
            <thead className="bg-muted/50">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('name')}</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('url')}</th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">{t('category')}</th>
                <th className="px-4 py-3 text-right font-medium text-muted-foreground">
                  {tManage('actions')}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {modules.map((mod) => (
                <tr key={mod.id} className="transition-colors hover:bg-muted/30">
                  <td className="px-4 py-3 font-medium text-foreground">
                    <Link href={`/modules/custom/${mod.id}`} className="link">
                      {mod.name}
                    </Link>
                  </td>
                  <td className="max-w-[24rem] px-4 py-3 text-muted-foreground">
                    <span className="block truncate" title={mod.url}>
                      {mod.url}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">{categoryLabel(mod.category)}</td>
                  <td className="px-4 py-3 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => openEdit(mod)}
                        className="rounded px-2 py-1 text-xs text-foreground transition-colors hover:bg-muted"
                      >
                        {tCommon('edit')}
                      </button>
                      <button
                        type="button"
                        onClick={() => setDeleteTarget(mod)}
                        className="rounded px-2 py-1 text-xs text-destructive transition-colors hover:bg-destructive/10"
                      >
                        {tCommon('delete')}
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showFormModal && (
        <CustomModuleFormModal
          mod={editing}
          shared={shared}
          onClose={() => setShowFormModal(false)}
          onSaved={handleChanged}
        />
      )}

      {deleteTarget && (
        <DeleteCustomModuleDialog
          mod={deleteTarget}
          shared={shared}
          onClose={() => setDeleteTarget(null)}
          onDeleted={handleChanged}
        />
      )}
    </div>
  );
}