cameleer-saas/ui/src/pages/tenant/SettingsPage.tsx

import { useState } from 'react';
import { errorMessage } from '../../api/client';
import {
  Alert,
  Badge,
  Button,
  Card,
  FormField,
  Input,
  Spinner,
  useToast,
} from '@cameleer/design-system';
import {
  useTenantSettings,
  useResetServerAdminPassword,
  useTenantAuthSettings, useUpdateTenantAuthSettings,
} from '../../api/tenant-hooks';
import { MfaSection } from '../../components/account/MfaSection';
import { PasskeySection } from '../../components/account/PasskeySection';
import { useScopes } from '../../auth/useScopes';
import styles from '../../styles/platform.module.css';

function statusColor(status: string): 'success' | 'error' | 'warning' | 'auto' {
  switch (status?.toUpperCase()) {
    case 'ACTIVE': return 'success';
    case 'SUSPENDED': return 'warning';
    case 'PROVISIONING': return 'auto';
    case 'ERROR': return 'error';
    default: return 'auto';
  }
}

function AuthPolicySection() {
  const scopes = useScopes();
  const { toast } = useToast();
  const { data: authSettings } = useTenantAuthSettings();
  const updateAuth = useUpdateTenantAuthSettings();

  if (!scopes.has('tenant:manage') || !authSettings) return null;

  async function handleMfaModeChange(mode: string) {
    try {
      await updateAuth.mutateAsync({ mfaMode: mode });
      toast({ title: `MFA mode set to ${mode}`, variant: 'success' });
    } catch (err) {
      toast({ title: 'Failed to update', description: errorMessage(err), variant: 'error' });
    }
  }

  async function handlePasskeyToggle() {
    if (!authSettings) return;
    try {
      await updateAuth.mutateAsync({ passkeyEnabled: !authSettings.passkeyEnabled });
      toast({ title: authSettings.passkeyEnabled ? 'Passkeys disabled' : 'Passkeys enabled', variant: 'success' });
    } catch (err) {
      toast({ title: 'Failed to update', description: errorMessage(err), variant: 'error' });
    }
  }

  async function handlePasskeyModeChange(mode: string) {
    try {
      await updateAuth.mutateAsync({ passkeyMode: mode });
      toast({ title: `Passkey mode set to ${mode}`, variant: 'success' });
    } catch (err) {
      toast({ title: 'Failed to update', description: errorMessage(err), variant: 'error' });
    }
  }

  return (
    <Card title="Authentication Policy">
      <p className={styles.description} style={{ marginTop: 0 }}>
        Configure MFA and passkey requirements for your organization's users.
      </p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <span style={{ fontSize: '0.875rem' }}>MFA Mode</span>
        <Badge label={authSettings.mfaMode} color={authSettings.mfaMode === 'required' ? 'success' : 'auto'} />
      </div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        {['off', 'optional', 'required'].map((mode) => (
          <Button key={mode} variant={authSettings.mfaMode === mode ? 'primary' : 'secondary'}
                  onClick={() => handleMfaModeChange(mode)} loading={updateAuth.isPending} size="sm">
            {mode.charAt(0).toUpperCase() + mode.slice(1)}
          </Button>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <span style={{ fontSize: '0.875rem' }}>Passkeys</span>
        <Badge label={authSettings.passkeyEnabled ? 'Enabled' : 'Disabled'} color={authSettings.passkeyEnabled ? 'success' : 'auto'} />
      </div>
      <Button variant={authSettings.passkeyEnabled ? 'danger' : 'primary'}
              onClick={handlePasskeyToggle} loading={updateAuth.isPending} size="sm">
        {authSettings.passkeyEnabled ? 'Disable passkeys' : 'Enable passkeys'}
      </Button>
      {authSettings.passkeyEnabled && (
        <div style={{ marginTop: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <span style={{ fontSize: '0.875rem' }}>Passkey Mode</span>
            <Badge label={authSettings.passkeyMode} color={authSettings.passkeyMode === 'required' ? 'success' : 'auto'} />
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {['optional', 'preferred', 'required'].map((mode) => (
              <Button key={mode} variant={authSettings.passkeyMode === mode ? 'primary' : 'secondary'}
                      onClick={() => handlePasskeyModeChange(mode)} loading={updateAuth.isPending} size="sm">
                {mode.charAt(0).toUpperCase() + mode.slice(1)}
              </Button>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

export function SettingsPage() {
  const { data, isLoading, isError } = useTenantSettings();
  const resetServerAdmin = useResetServerAdminPassword();
  const { toast } = useToast();

  const [serverAdminPw, setServerAdminPw] = useState('');

  if (isLoading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
        <Spinner />
      </div>
    );
  }

  if (isError || !data) {
    return (
      <div style={{ padding: 24 }}>
        <Alert variant="error" title="Failed to load settings">
          Could not fetch settings. Please refresh.
        </Alert>
      </div>
    );
  }

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, overflowY: 'auto', flex: 1 }}>
      <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Settings</h1>

      {/* Card 1: Tenant Details */}
      <Card title="Tenant Details">
        <div className={styles.dividerList}>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Name</span>
            <span className={styles.kvValue}>{data.name}</span>
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Slug</span>
            <span className={styles.kvValueMono}>{data.slug}</span>
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Status</span>
            <Badge label={data.status} color={statusColor(data.status)} />
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Server Endpoint</span>
            <span className={styles.kvValueMono}>{data.serverEndpoint ?? '—'}</span>
          </div>
          <div className={styles.kvRow}>
            <span className={styles.kvLabel}>Created</span>
            <span className={styles.kvValue}>{new Date(data.createdAt).toLocaleDateString()}</span>
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--border)', marginTop: 16, paddingTop: 16 }}>
          <p className={styles.description} style={{ margin: '0 0 12px' }}>
            Reset the built-in admin password for your server dashboard (local login at <code>/login?local</code>).
          </p>
          <form
            onSubmit={async (e) => {
              e.preventDefault();
              if (serverAdminPw.length < 8) {
                toast({ title: 'Password must be at least 8 characters', variant: 'error' });
                return;
              }
              try {
                await resetServerAdmin.mutateAsync(serverAdminPw);
                toast({ title: 'Server admin password reset successfully', variant: 'success' });
                setServerAdminPw('');
              } catch (err) {
                toast({ title: 'Failed to reset server admin password', description: errorMessage(err), variant: 'error' });
              }
            }}
            style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}
          >
            <div style={{ flex: 1 }}>
            <FormField label="Server admin password" htmlFor="server-admin-pw">
              <Input
                id="server-admin-pw"
                type="password"
                value={serverAdminPw}
                onChange={(e) => setServerAdminPw(e.target.value)}
                placeholder="Enter new admin password"
                required
                minLength={8}
              />
            </FormField>
            </div>
            <Button type="submit" variant="primary" loading={resetServerAdmin.isPending}>
              Reset
            </Button>
          </form>
        </div>
      </Card>

      {/* Card 2: Multi-Factor Authentication (MFA + Passkeys combined) */}
      <Card title="Multi-Factor Authentication">
        <MfaSection bare />
        <div style={{ borderTop: '1px solid var(--border)', marginTop: 16, paddingTop: 16 }}>
          <h3 style={{ margin: '0 0 8px', fontSize: '0.875rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>
            Passkeys
          </h3>
          <PasskeySection bare />
        </div>
      </Card>

      {/* Card 3: Authentication Policy (org-wide settings) */}
      <AuthPolicySection />
    </div>
  );
}