/**
 * AdminUserMandatesPage
 *
 * Admin page for managing user-mandate memberships.
 * Allows assigning users to mandates and managing their roles within mandates.
 */

import React, { useState, useEffect } from 'react';
import { useUserMandates, type Mandate } from '../../hooks/useUserMandates';
import { FaSync, FaBuilding } from 'react-icons/fa';
import { MandateUsersPanel } from '../../components/admin/MandateUsersPanel';
import styles from './Admin.module.css';

import { useLanguage } from '../../providers/language/LanguageContext';
import { mandateDisplayLabel } from '../../utils/mandateDisplayUtils';

export const AdminUserMandatesPage: React.FC = () => {
  const { t } = useLanguage();

  const { error, fetchMandates } = useUserMandates();

  const [mandates, setMandates] = useState<Mandate[]>([]);
  const [selectedMandateId, setSelectedMandateId] = useState<string>('');

  useEffect(() => {
    const loadMandates = async () => {
      const data = await fetchMandates();
      setMandates(data);
      if (data.length > 0) {
        setSelectedMandateId((prev) => prev || data[0].id);
      }
    };
    loadMandates();
  }, [fetchMandates]);

  if (error && !selectedMandateId) {
    return (
      <div className={`${styles.adminPage} ${styles.adminPageFill}`}>
        <div className={styles.errorContainer}>
          <span className={styles.errorIcon}>⚠️</span>
          <p className={styles.errorMessage}>
            {t('Fehler')}: {error}
          </p>
          <button type="button" className={styles.secondaryButton} onClick={() => fetchMandates()}>
            <FaSync /> {t('Erneut versuchen')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className={`${styles.adminPage} ${styles.adminPageFill}`}>
      <div className={styles.pageHeader}>
        <div>
          <h1 className={styles.pageTitle}>{t('Mandanten-Mitglieder')}</h1>
          <p className={styles.pageSubtitle}>{t('Verwalten Sie, welche Benutzer Zugriff')}</p>
        </div>
      </div>

      <div className={styles.filterSection}>
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>
            <FaBuilding style={{ marginRight: 8 }} />
            {t('Mandant auswählen')}:
          </label>
          <select
            className={styles.filterSelect}
            value={selectedMandateId}
            onChange={(e) => setSelectedMandateId(e.target.value)}
          >
            <option value="">{t('Mandant wählen')}</option>
            {mandates.map((m) => (
              <option key={m.id} value={m.id}>
                {mandateDisplayLabel(m)}
              </option>
            ))}
          </select>
        </div>
      </div>

      {!selectedMandateId ? (
        <div className={styles.emptyState}>
          <FaBuilding className={styles.emptyIcon} />
          <h3 className={styles.emptyTitle}>{t('Kein Mandant ausgewählt')}</h3>
          <p className={styles.emptyDescription}>
            {t('Wählen Sie einen Mandanten aus, um dessen Mitglieder zu verwalten.')}
          </p>
        </div>
      ) : (
        <div className={styles.tableContainer}>
          <MandateUsersPanel mandateId={selectedMandateId} />
        </div>
      )}
    </div>
  );
};

export default AdminUserMandatesPage;