/**
 * AdminInvitationsPage
 * 
 * Admin page for managing invitations within a mandate.
 * Allows creating, viewing, and revoking invitations.
 */

import React, { useState, useEffect, useMemo } from 'react';
import { useInvitations, type Invitation, type InvitationCreate } from '../../hooks/useInvitations';
import { useUserMandates, type Mandate, type Role } from '../../hooks/useUserMandates';
import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
import { FaPlus, FaSync, FaEnvelopeOpenText, FaBuilding, FaCopy, FaLink } from 'react-icons/fa';
import { useToast } from '../../contexts/ToastContext';
import api from '../../api';
import styles from './Admin.module.css';

export const AdminInvitationsPage: React.FC = () => {
  const { showError } = useToast();
  const {
    invitations,
    loading,
    error,
    pagination,
    fetchInvitations,
    createInvitation,
    revokeInvitation,
  } = useInvitations();

  const { fetchMandates, fetchRoles } = useUserMandates();

  // State
  const [mandates, setMandates] = useState<Mandate[]>([]);
  const [selectedMandateId, setSelectedMandateId] = useState<string>('');
  const [roles, setRoles] = useState<Role[]>([]);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [showUrlModal, setShowUrlModal] = useState<Invitation | null>(null);
  const [showExpired, setShowExpired] = useState(false);
  const [showUsed, setShowUsed] = useState(false);
  const [_isSubmitting, setIsSubmitting] = useState(false); // Prefixed with _ to suppress warning
  const [copySuccess, setCopySuccess] = useState(false);
  const [backendAttributes, setBackendAttributes] = useState<AttributeDefinition[]>([]);

  // Load mandates and attributes on mount
  useEffect(() => {
    const loadMandates = async () => {
      const data = await fetchMandates();
      setMandates(data);
      if (data.length > 0 && !selectedMandateId) {
        setSelectedMandateId(data[0].id);
      }
    };
    loadMandates();
    // Fetch Invitation attributes from backend
    api.get('/api/attributes/Invitation').then(response => {
      const attrs = response.data?.attributes || response.data || [];
      setBackendAttributes(Array.isArray(attrs) ? attrs : []);
    }).catch(() => setBackendAttributes([]));
  }, [fetchMandates]);

  // Load invitations and roles when mandate changes (same roles as AdminUserMandatesPage: user, viewer, admin)
  useEffect(() => {
    if (selectedMandateId) {
      fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed });
      fetchRoles(selectedMandateId).then(setRoles);
    }
  }, [selectedMandateId, showExpired, showUsed, fetchInvitations, fetchRoles]);

  // Format timestamp
  const formatDate = (timestamp: number) => {
    if (!timestamp) return '-';
    const date = new Date(timestamp * 1000);
    return date.toLocaleString('de-CH', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // Table columns
  const columns = useMemo(() => [
    { 
      key: 'targetUsername', 
      label: 'Benutzername', 
      type: 'string' as const, 
      sortable: true, 
      filterable: true, 
      searchable: true, 
      width: 150,
    },
    { 
      key: 'email', 
      label: 'E-Mail', 
      type: 'string' as const, 
      sortable: true, 
      filterable: true, 
      width: 180,
      render: (value: string, row: Invitation) => {
        const emailText = value || '-';
        const emailSent = (row as any).emailSent;
        return (
          <span title={emailSent ? 'Email wurde gesendet' : 'Email nicht gesendet'}>
            {emailText} {emailSent && '✓'}
          </span>
        );
      }
    },
    { 
      key: 'roleIds', 
      label: 'Rollen', 
      type: 'string', // Array rendered as string
      sortable: false, 
      filterable: false, 
      width: 150,
      render: (value: string[]) => {
        if (!value || value.length === 0) return '-';
        return value.map(roleId => {
          const role = roles.find(r => r.id === roleId);
          return role?.roleLabel || roleId;
        }).join(', ');
      }
    } as any,
    { 
      key: 'expiresAt', 
      label: 'Gültig bis', 
      type: 'number' as const, 
      sortable: true, 
      width: 150,
      render: (value: number) => {
        const text = formatDate(value);
        const isExpired = value < Date.now() / 1000;
        return (
          <span style={{ color: isExpired ? 'var(--danger-color)' : 'inherit' }}>
            {text} {isExpired && '(abgelaufen)'}
          </span>
        );
      }
    },
    { 
      key: 'currentUses', 
      label: 'Verwendet', 
      type: 'string' as const, 
      sortable: true, 
      width: 100,
      render: (value: number, row: Invitation) => `${value || 0} / ${row.maxUses || 1}`
    },
    { 
      key: 'createdAt', 
      label: 'Erstellt', 
      type: 'number' as const, 
      sortable: true, 
      width: 150,
      render: (value: number) => formatDate(value)
    },
  ], [roles]);

  // Form attributes - same role options as AdminUserMandatesPage (user, viewer, admin)
  const createFields: AttributeDefinition[] = useMemo(() => {
    const excludedFields = ['id', 'mandateId', 'token', 'createdBy', 'createdAt', 'expiresAt', 'currentUses', 'inviteUrl', 'featureInstanceId'];
    
    // Mandate-level roles (user, viewer, admin) - same as when adding mandate members
    const roleOptions = roles
      .filter(r => !r.featureInstanceId)
      .map(r => ({ value: r.id, label: r.roleLabel }));
    
    const fields = backendAttributes
      .filter(attr => !excludedFields.includes(attr.name))
      .map(attr => ({
        ...attr,
        options: attr.name === 'roleIds' ? roleOptions : attr.options,
      })) as AttributeDefinition[];
    
    // Add helper field expiresInHours if not in model but fields exist
    if (fields.length > 0 && !fields.find(f => f.name === 'expiresInHours')) {
      fields.push({ name: 'expiresInHours', label: 'Gültigkeitsdauer (Stunden)', type: 'number', 
        required: true, default: 72 } as any);
    }
    // Override required for targetUsername and email (both required for invitations)
    return fields.map(f => {
      if (f.name === 'targetUsername' || f.name === 'email') {
        return { ...f, required: true };
      }
      return f;
    });
  }, [roles, backendAttributes]);

  // Handle create invitation
  const handleCreateInvitation = async (data: InvitationCreate) => {
    if (!selectedMandateId) return;
    setIsSubmitting(true);
    try {
      const result = await createInvitation(selectedMandateId, data);
      if (result.success && result.data) {
        setShowCreateModal(false);
        setShowUrlModal(result.data);
        fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed });
      } else {
        showError('Fehler', result.error || 'Fehler beim Erstellen der Einladung');
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  // Handle delete invitation by ID (for DeleteActionButton)
  // Note: DeleteActionButton handles confirmation UI, so no window.confirm here
  const handleDeleteInvitation = async (invitationId: string): Promise<boolean> => {
    if (!selectedMandateId) return false;
    const result = await revokeInvitation(selectedMandateId, invitationId);
    if (!result.success) {
      showError('Fehler', result.error || 'Fehler beim Widerrufen der Einladung');
    }
    return result.success;
  };

  // Handle show URL
  const handleShowUrl = (invitation: Invitation) => {
    setShowUrlModal(invitation);
  };

  // Copy URL to clipboard
  const handleCopyUrl = async (url: string) => {
    try {
      await navigator.clipboard.writeText(url);
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  // Get mandate name
  const getMandateName = (mandate: Mandate) => {
    if (mandate.label) return mandate.label;
    if (typeof mandate.name === 'object') {
      return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
    }
    return mandate.name || mandate.id;
  };

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

  return (
    <div className={styles.adminPage}>
      <div className={styles.pageHeader}>
        <div>
          <h1 className={styles.pageTitle}>Einladungen</h1>
          <p className={styles.pageSubtitle}>Erstellen und verwalten Sie Einladungen für neue Benutzer</p>
        </div>
      </div>

      {/* Mandate Selector and Filters */}
      <div className={styles.filterSection}>
        <div className={styles.filterGroup}>
          <label className={styles.filterLabel}>
            <FaBuilding style={{ marginRight: 8 }} />
            Mandant:
          </label>
          <select
            className={styles.filterSelect}
            value={selectedMandateId}
            onChange={(e) => setSelectedMandateId(e.target.value)}
          >
            <option value="">-- Mandant wählen --</option>
            {mandates.map(m => (
              <option key={m.id} value={m.id}>
                {getMandateName(m)}
              </option>
            ))}
          </select>
        </div>

        <div className={styles.filterGroup}>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={showExpired}
              onChange={(e) => setShowExpired(e.target.checked)}
            />
            Abgelaufene anzeigen
          </label>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={showUsed}
              onChange={(e) => setShowUsed(e.target.checked)}
            />
            Verwendete anzeigen
          </label>
        </div>
        
        {selectedMandateId && (
          <div className={styles.headerActions}>
            <button
              className={styles.secondaryButton}
              onClick={() => fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed })}
              disabled={loading}
            >
              <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
            </button>
            <button
              className={styles.primaryButton}
              onClick={() => setShowCreateModal(true)}
            >
              <FaPlus /> Neue Einladung
            </button>
          </div>
        )}
      </div>

      {/* Content */}
      {!selectedMandateId ? (
        <div className={styles.emptyState}>
          <FaBuilding className={styles.emptyIcon} />
          <h3 className={styles.emptyTitle}>Kein Mandant ausgewählt</h3>
          <p className={styles.emptyDescription}>
            Wählen Sie einen Mandanten aus, um dessen Einladungen zu verwalten.
          </p>
        </div>
      ) : loading && invitations.length === 0 ? (
        <div className={styles.loadingContainer}>
          <div className={styles.spinner} />
          <span>Lade Einladungen...</span>
        </div>
      ) : invitations.length === 0 ? (
        <div className={styles.emptyState}>
          <FaEnvelopeOpenText className={styles.emptyIcon} />
          <h3 className={styles.emptyTitle}>Keine Einladungen</h3>
          <p className={styles.emptyDescription}>
            Es gibt noch keine aktiven Einladungen für diesen Mandanten.
          </p>
          <button
            className={styles.primaryButton}
            onClick={() => setShowCreateModal(true)}
          >
            <FaPlus /> Erste Einladung erstellen
          </button>
        </div>
      ) : (
        <div className={styles.tableContainer}>
          <FormGeneratorTable
            data={invitations}
            columns={columns}
            apiEndpoint="/api/invitations/"
            loading={loading}
            pagination={true}
            pageSize={25}
            searchable={true}
            filterable={true}
            sortable={true}
            selectable={false}
            actionButtons={[
              {
                type: 'delete' as const,
                title: 'Einladung widerrufen',
              }
            ]}
            customActions={[
              {
                id: 'showUrl',
                icon: <FaLink />,
                onClick: handleShowUrl,
                title: 'Einladungs-Link anzeigen',
              }
            ]}
            hookData={{
              handleDelete: handleDeleteInvitation,
              refetch: () => fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed }),
              pagination,
            }}
            emptyMessage="Keine Einladungen gefunden"
          />
        </div>
      )}

      {/* Create Invitation Modal */}
      {showCreateModal && (
        <div className={styles.modalOverlay} onClick={() => setShowCreateModal(false)}>
          <div className={styles.modal} onClick={e => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2 className={styles.modalTitle}>Neue Einladung erstellen</h2>
              <button
                className={styles.modalClose}
                onClick={() => setShowCreateModal(false)}
              >
                ✕
              </button>
            </div>
            <div className={styles.modalContent}>
              {roles.filter(r => !r.featureInstanceId).length === 0 ? (
                <div className={styles.loadingContainer}>
                  <div className={styles.spinner} />
                  <span>Lade Rollen...</span>
                </div>
              ) : createFields.length === 0 ? (
                <div className={styles.loadingContainer}>
                  <div className={styles.spinner} />
                  <span>Lade Formular...</span>
                </div>
              ) : (
                <FormGeneratorForm
                  attributes={createFields}
                  mode="create"
                  onSubmit={handleCreateInvitation}
                  onCancel={() => setShowCreateModal(false)}
                  submitButtonText="Einladung erstellen"
                  cancelButtonText="Abbrechen"
                />
              )}
            </div>
          </div>
        </div>
      )}

      {/* URL Display Modal */}
      {showUrlModal && (
        <div className={styles.modalOverlay} onClick={() => setShowUrlModal(null)}>
          <div className={styles.modal} onClick={e => e.stopPropagation()}>
            <div className={styles.modalHeader}>
              <h2 className={styles.modalTitle}>Einladungs-Link</h2>
              <button
                className={styles.modalClose}
                onClick={() => setShowUrlModal(null)}
              >
                ✕
              </button>
            </div>
            <div className={styles.modalContent}>
              <p style={{ marginBottom: '1rem', color: 'var(--text-secondary)' }}>
                Einladung für Benutzer <strong>{showUrlModal.targetUsername}</strong>:
              </p>
              <div className={styles.urlBox}>
                <input
                  type="text"
                  readOnly
                  value={showUrlModal.inviteUrl}
                  className={styles.urlInput}
                  onClick={(e) => (e.target as HTMLInputElement).select()}
                />
                <button
                  className={styles.copyButton}
                  onClick={() => handleCopyUrl(showUrlModal.inviteUrl)}
                  title="In Zwischenablage kopieren"
                >
                  <FaCopy />
                  {copySuccess ? ' Kopiert!' : ' Kopieren'}
                </button>
              </div>
              <p style={{ marginTop: '1rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
                Dieser Link kann nur von Benutzer <strong>{showUrlModal.targetUsername}</strong> verwendet werden.
              </p>
              {showUrlModal.email && (
                <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: showUrlModal.emailSent ? 'var(--success-color)' : 'var(--text-secondary)' }}>
                  {showUrlModal.emailSent 
                    ? `✓ Email wurde an ${showUrlModal.email} gesendet`
                    : `Email-Adresse: ${showUrlModal.email} (nicht gesendet)`}
                </p>
              )}
              <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
                Gültig bis: {formatDate(showUrlModal.expiresAt)}
              </p>
            </div>
            <div className={styles.modalFooter}>
              <button
                className={styles.primaryButton}
                onClick={() => setShowUrlModal(null)}
              >
                Schliessen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdminInvitationsPage;