import React from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Box,
  Icon,
  IconButton,
  Icons,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Scroll,
} from 'folds';
import { useTranslation } from 'react-i18next';
import { stopPropagation } from '../../utils/keyboard';
import * as css from './AiChatPrivacy.css';

// xAI / Google first-party policy links. Shown as plain, full URLs (no vague "learn more" wording)
// so it's obvious where the user is going and the exact retention/usage terms stay at the source.
const XAI_PRIVACY_URL = 'https://x.ai/legal/privacy-policy';
const GEMINI_TERMS_URL = 'https://ai.google.dev/gemini-api/terms';

type AiChatPrivacyProps = {
  onClose: () => void;
};

type SectionProps = {
  title: string;
  body: string;
};

function Section({ title, body }: SectionProps) {
  return (
    <Box direction="Column" gap="100">
      <span className={css.SectionTitle}>{title}</span>
      <span className={css.SectionBody}>{body}</span>
    </Box>
  );
}

type PolicyLinkProps = {
  provider: string;
  url: string;
};

// A clean, explicit provider link: the provider name on top, the full URL underneath as the
// clickable target (shown verbatim, https included, so there's no hidden destination).
function PolicyLink({ provider, url }: PolicyLinkProps) {
  return (
    <a className={css.PolicyLink} href={url} target="_blank" rel="noreferrer noopener">
      <span className={css.LinkProvider}>{provider}</span>
      <span className={css.LinkUrl}>{url}</span>
    </a>
  );
}

// The native AI chat's privacy notice — successor to the removed widget's About modal. Deliberately
// MINIMAL (the bar for a Google Play AI-data disclosure, no implementation detail): it's an AI
// assistant, replies can be wrong, the messages you send are processed by two providers (xAI's Grok
// and Google's Gemini), don't send secrets, plus links to the providers' own policies.
//
// Built as a fully self-styled card (like AuthLayout's ServerDialogCard), NOT a folds modal recipe.
// folds `Modal` (the flex-column + Scroll pattern in CreateRoomModal) is the usual maxHeight+scroll
// card, but its size tokens are fixed rems and don't give the responsive 90vw / 520px / 85vh caps
// this notice wants; an earlier folds `Dialog` attempt also clipped the body. Owning the card chrome
// here keeps the body filling the full width on every platform, with folds `Scroll` for the list.
export function AiChatPrivacy({ onClose }: AiChatPrivacyProps) {
  const { t } = useTranslation();

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <div
            className={css.DialogCard}
            role="dialog"
            aria-modal="true"
            aria-label={t('Bots.privacy.title')}
          >
            <header className={css.Header}>
              <span className={css.HeaderBadge} aria-hidden="true">
                <Icon src={Icons.ShieldLock} />
              </span>
              <div className={css.HeaderText}>
                <span className={css.HeaderTitle}>{t('Bots.privacy.title')}</span>
                <span className={css.HeaderSubtitle}>{t('Bots.privacy.subtitle')}</span>
              </div>
              <IconButton
                size="300"
                variant="Background"
                radii="300"
                onClick={onClose}
                aria-label={t('Bots.privacy.close')}
              >
                <Icon src={Icons.Cross} />
              </IconButton>
            </header>

            <Scroll
              className={css.BodyScroll}
              variant="Surface"
              direction="Vertical"
              size="300"
              hideTrack
              visibility="Hover"
            >
              <div className={css.Body}>
                <span className={css.SectionBody}>{t('Bots.privacy.intro')}</span>
                <Section
                  title={t('Bots.privacy.models_title')}
                  body={t('Bots.privacy.models_body')}
                />
                <Section
                  title={t('Bots.privacy.avoid_title')}
                  body={t('Bots.privacy.avoid_body')}
                />

                <p className={css.Consent}>{t('Bots.privacy.consent')}</p>

                <div className={css.Links}>
                  <span className={css.LearnMore}>{t('Bots.privacy.learn_more')}</span>
                  <PolicyLink provider={t('Bots.privacy.xai_link')} url={XAI_PRIVACY_URL} />
                  <PolicyLink provider={t('Bots.privacy.gemini_link')} url={GEMINI_TERMS_URL} />
                </div>
              </div>
            </Scroll>
          </div>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}
