/**
 * AdminDemoConfigPage
 *
 * SysAdmin page for managing demo configurations.
 * Lists available demo configs with Load / Remove actions.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { FaPlay, FaTrash, FaSync, FaCubes, FaCopy, FaKey } from 'react-icons/fa';
import api from '../../api';
import styles from './Admin.module.css';
import demoStyles from './AdminDemoConfigPage.module.css';
import { useLanguage } from '../../providers/language/LanguageContext';
import { useConfirm } from '../../hooks/useConfirm';

interface _DemoCredential {
  role?: string;
  username?: string;
  email?: string;
  password?: string;
}

interface _DemoConfig {
  code: string;
  label: string;
  description: string;
  credentials?: _DemoCredential[];
}

interface _ActionResult {
  code: string;
  action: 'load' | 'remove';
  status: 'ok' | 'error';
  summary?: Record<string, unknown>;
  credentials?: _DemoCredential[];
  error?: string;
}

export const AdminDemoConfigPage: React.FC = () => {
  const { t } = useLanguage();
  const { confirm, ConfirmDialog } = useConfirm();
  const [configs, setConfigs] = useState<_DemoConfig[]>([]);
  const [loading, setLoading] = useState(false);
  const [actionInProgress, setActionInProgress] = useState<string | null>(null);
  const [lastResult, setLastResult] = useState<_ActionResult | null>(null);
  const [error, setError] = useState<string | null>(null);

  const _fetchConfigs = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await api.get('/api/admin/demo-config');
      setConfigs(response.data.configs || []);
    } catch (err: any) {
      setError(err.response?.data?.detail || t('Error loading demo configs'));
    } finally {
      setLoading(false);
    }
  }, [t]);

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

  const _handleLoad = async (code: string) => {
    if (actionInProgress) return;
    setActionInProgress(code);
    setLastResult(null);
    try {
      const response = await api.post(`/api/admin/demo-config/${code}/load`);
      const summary = (response.data?.summary || {}) as Record<string, unknown>;
      const credsFromSummary = Array.isArray(summary.credentials)
        ? (summary.credentials as _DemoCredential[])
        : undefined;
      const credsFromConfig = configs.find((c) => c.code === code)?.credentials;
      setLastResult({
        code,
        action: 'load',
        status: 'ok',
        summary,
        credentials: credsFromSummary ?? credsFromConfig,
      });
    } catch (err: any) {
      setLastResult({ code, action: 'load', status: 'error', error: err.response?.data?.detail || String(err) });
    } finally {
      setActionInProgress(null);
    }
  };

  const _handleRemove = async (code: string) => {
    if (actionInProgress) return;
    const ok = await confirm(
      t('Alle Demo-Daten für diese Konfiguration wirklich entfernen?'),
      { confirmLabel: t('Entfernen'), cancelLabel: t('Abbrechen'), variant: 'danger' },
    );
    if (!ok) return;
    setActionInProgress(code);
    setLastResult(null);
    try {
      const response = await api.post(`/api/admin/demo-config/${code}/remove`);
      setLastResult({ code, action: 'remove', status: 'ok', summary: response.data.summary });
    } catch (err: any) {
      setLastResult({ code, action: 'remove', status: 'error', error: err.response?.data?.detail || String(err) });
    } finally {
      setActionInProgress(null);
    }
  };

  return (
    <div className={styles.adminPage}>
      <div className={styles.pageHeader}>
        <div>
          <h1 className={styles.pageTitle}>{t('Demo-Konfigurationen')}</h1>
          <p className={styles.pageSubtitle}>{t('Demo-Umgebungen für Präsentationen und Tests laden oder entfernen.')}</p>
        </div>
        <div className={styles.headerActions}>
          <button className={styles.secondaryButton} onClick={_fetchConfigs} disabled={loading}>
            <FaSync /> {t('Aktualisieren')}
          </button>
        </div>
      </div>

      {error && <div className={demoStyles.errorBanner}>{error}</div>}

      {lastResult && (
        <div className={lastResult.status === 'ok' ? demoStyles.successBanner : demoStyles.errorBanner}>
          <strong>{lastResult.action === 'load' ? t('Geladen') : t('Entfernt')}:</strong>{' '}
          {lastResult.status === 'ok' ? (
            <_SummaryDisplay summary={lastResult.summary} />
          ) : (
            <span>{lastResult.error}</span>
          )}
          {lastResult.status === 'ok' && lastResult.action === 'load' && lastResult.credentials && lastResult.credentials.length > 0 && (
            <_CredentialsBox credentials={lastResult.credentials} />
          )}
        </div>
      )}

      {loading && configs.length === 0 ? (
        <div className={demoStyles.loadingState}>{t('Lade…')}</div>
      ) : configs.length === 0 ? (
        <div className={demoStyles.emptyState}>{t('Keine Demo-Konfigurationen gefunden.')}</div>
      ) : (
        <div className={demoStyles.configGrid}>
          {configs.map((cfg) => (
            <div key={cfg.code} className={demoStyles.configCard}>
              <div className={demoStyles.cardIcon}><FaCubes /></div>
              <div className={demoStyles.cardContent}>
                <h3 className={demoStyles.cardTitle}>{cfg.label}</h3>
                <p className={demoStyles.cardDescription}>{cfg.description}</p>
                <span className={demoStyles.cardCode}>{cfg.code}</span>
                {cfg.credentials && cfg.credentials.length > 0 && (
                  <_CredentialsBox credentials={cfg.credentials} compact />
                )}
              </div>
              <div className={demoStyles.cardActions}>
                <button
                  className={demoStyles.loadButton}
                  onClick={() => _handleLoad(cfg.code)}
                  disabled={actionInProgress !== null}
                >
                  {actionInProgress === cfg.code ? <FaSync className={demoStyles.spin} /> : <FaPlay />}
                  {t('Laden')}
                </button>
                <button
                  className={demoStyles.removeButton}
                  onClick={() => _handleRemove(cfg.code)}
                  disabled={actionInProgress !== null}
                >
                  <FaTrash />
                  {t('Entfernen')}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      <ConfirmDialog />
    </div>
  );
};

const _SummaryDisplay: React.FC<{ summary?: Record<string, unknown> }> = ({ summary }) => {
  const { t } = useLanguage();
  if (!summary) return null;
  // Skip the credentials block here -- it gets its own copyable widget below.
  const sections = Object.entries(summary)
    .filter(([key]) => key !== 'credentials')
    .filter(([, v]) => Array.isArray(v) && (v as unknown[]).length > 0);
  if (sections.length === 0) return <span>{t('Abgeschlossen (keine Änderungen)')}</span>;
  return (
    <span>
      {sections.map(([key, items]) => (
        <span key={key} style={{ marginRight: 12 }}>
          <strong>{key}:</strong> {(items as string[]).length}
        </span>
      ))}
    </span>
  );
};

const _CredentialsBox: React.FC<{ credentials: _DemoCredential[]; compact?: boolean }> = ({ credentials, compact }) => {
  const { t } = useLanguage();
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  const _copy = async (key: string, value: string) => {
    try {
      await navigator.clipboard.writeText(value);
      setCopiedKey(key);
      window.setTimeout(() => setCopiedKey((prev) => (prev === key ? null : prev)), 1500);
    } catch {
      // ignore clipboard failures (no permission, http, ...)
    }
  };

  return (
    <div className={compact ? demoStyles.credentialsBoxCompact : demoStyles.credentialsBox}>
      <div className={demoStyles.credentialsHeader}>
        <FaKey />
        <span>{t('Login-Daten')}</span>
      </div>
      {credentials.map((cred, idx) => {
        // Login uses the USERNAME (the email is just informational metadata
        // about the demo user -- the auth flow keys off `username`).
        const loginValue = cred.username || '';
        const pwd = cred.password || '';
        const rowKey = `${idx}-${loginValue}`;
        return (
          <div key={rowKey} className={demoStyles.credentialsRow}>
            {cred.role && <div className={demoStyles.credentialsRole}>{cred.role}</div>}
            <div className={demoStyles.credentialsField}>
              <span className={demoStyles.credentialsLabel}>{t('Login')}:</span>
              <code>{loginValue}</code>
              <button
                type="button"
                className={demoStyles.copyButton}
                onClick={() => _copy(`${rowKey}-login`, loginValue)}
                disabled={!loginValue}
                title={t('Login kopieren')}
              >
                <FaCopy />
                {copiedKey === `${rowKey}-login` ? ` ${t('kopiert')}` : ''}
              </button>
            </div>
            <div className={demoStyles.credentialsField}>
              <span className={demoStyles.credentialsLabel}>{t('Passwort')}:</span>
              <code>{pwd}</code>
              <button
                type="button"
                className={demoStyles.copyButton}
                onClick={() => _copy(`${rowKey}-pwd`, pwd)}
                disabled={!pwd}
                title={t('Passwort kopieren')}
              >
                <FaCopy />
                {copiedKey === `${rowKey}-pwd` ? ` ${t('kopiert')}` : ''}
              </button>
            </div>
            {cred.email && (
              <div className={demoStyles.credentialsField}>
                <span className={demoStyles.credentialsLabel}>{t('E-Mail')}:</span>
                <code>{cred.email}</code>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};
