import React, { useCallback } from 'react';
import { Box, Chip, Text } from 'folds';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
import { withSearchParam } from '../../../pages/pathUtils';

/**
 * On OIDC/next-gen-auth servers, profile/password/sessions are managed by the
 * authentication service — surface a deep-link to its account page (MSC2965
 * account-management URL). Renders nothing on password/legacy-SSO servers, where
 * `useAuthMetadata()` is undefined.
 */
export function OidcManageAccount() {
  const authMetadata = useAuthMetadata();
  const accountManagementActions = useAccountManagementActions();

  const open = useCallback(() => {
    const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
    if (!authUrl) return;
    window.open(
      withSearchParam(authUrl, { action: accountManagementActions.profile }),
      '_blank',
      'noopener,noreferrer',
    );
  }, [authMetadata, accountManagementActions]);

  if (!authMetadata) return null;

  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Account Management</Text>
      <SequenceCard
        className={SequenceCardStyle}
        variant="SurfaceVariant"
        direction="Column"
        gap="400"
      >
        <SettingTile
          title="Manage account"
          description="Your profile, password, and sessions are managed by your single sign-on provider."
          after={
            <Chip variant="Secondary" radii="Pill" onClick={open}>
              <Text size="T200">Open</Text>
            </Chip>
          }
        />
      </SequenceCard>
    </Box>
  );
}