/**
 * TrusteeOrganisationsView
 * 
 * Organisations-Verwaltung für eine Trustee-Instanz
 */

import React from 'react';
import { useTrusteeOrganisations, useTrusteeOrganisationOperations } from '../../../hooks/useTrustee';
import { useTablePermission } from '../../../hooks/useInstancePermissions';
import styles from './TrusteeViews.module.css';

export const TrusteeOrganisationsView: React.FC = () => {
  const { items: organisations, loading, error, refetch } = useTrusteeOrganisations();
  const { handleDelete, deletingItems } = useTrusteeOrganisationOperations();
  const { canCreate, canUpdate, canDelete } = useTablePermission('TrusteeOrganisation');
  
  if (loading) {
    return <div className={styles.loading}>Lade Organisationen...</div>;
  }
  
  if (error) {
    return <div className={styles.error}>Fehler: {error}</div>;
  }
  
  const onDelete = async (orgId: string) => {
    if (window.confirm('Organisation wirklich löschen?')) {
      const success = await handleDelete(orgId);
      if (success) {
        refetch();
      }
    }
  };
  
  return (
    <div className={styles.listView}>
      {/* Toolbar */}
      <div className={styles.toolbar}>
        {canCreate && (
          <button className={styles.primaryButton}>
            + Neue Organisation
          </button>
        )}
        <button className={styles.secondaryButton} onClick={() => refetch()}>
          Aktualisieren
        </button>
      </div>
      
      {/* Tabelle */}
      {organisations.length === 0 ? (
        <div className={styles.emptyState}>
          <p>Keine Organisationen vorhanden.</p>
        </div>
      ) : (
        <table className={styles.dataTable}>
          <thead>
            <tr>
              <th>Label</th>
              <th>Status</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {organisations.map((org) => (
              <tr key={org.id}>
                <td>{org.label}</td>
                <td>
                  <span className={`${styles.badge} ${org.enabled ? styles.badgeSuccess : styles.badgeWarning}`}>
                    {org.enabled ? 'Aktiv' : 'Inaktiv'}
                  </span>
                </td>
                <td className={styles.actions}>
                  {canUpdate && (
                    <button className={styles.iconButton} title="Bearbeiten">
                      ✏️
                    </button>
                  )}
                  {canDelete && (
                    <button 
                      className={styles.iconButton} 
                      title="Löschen"
                      onClick={() => onDelete(org.id)}
                      disabled={deletingItems.has(org.id)}
                    >
                      {deletingItems.has(org.id) ? '...' : '🗑️'}
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default TrusteeOrganisationsView;