import React from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Text, Button, Chip, color, config, toRem } from 'folds';
import { SettingTile } from '../../../components/setting-tile';
import VojoSVG from '../../../../../public/res/svg/vojo.svg';
import { clearCacheAndReload } from '../../../../client/initMatrix';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { copyToClipboard } from '../../../utils/dom';
import { SettingsPage } from '../SettingsPage';
import { SettingsSection } from '../SettingsSection';
import { Mono } from '../styles.css';

type AboutProps = {
  requestClose: () => void;
};
export function About({ requestClose }: AboutProps) {
  const { t } = useTranslation();
  const mx = useMatrixClient();
  const domain = mx.getDomain() ?? 'vojo.chat';
  const version = __APP_VERSION__;

  return (
    <SettingsPage title={t('Settings.about_title')} requestClose={requestClose}>
      {/* Brand hero — centered logo tile, wordmark, tagline, and a copyable
          Fleet-tinted version chip. Deliberately not the stock logo-left row. */}
      <Box direction="Column" alignItems="Center" gap="300" style={{ paddingTop: toRem(8) }}>
        <Box
          alignItems="Center"
          justifyContent="Center"
          shrink="No"
          style={{
            width: toRem(88),
            height: toRem(88),
            borderRadius: toRem(22),
            backgroundColor: color.Background.Container,
            border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
          }}
        >
          <img src={VojoSVG} alt="Vojo" style={{ width: toRem(62), height: toRem(62) }} />
        </Box>
        <Box direction="Column" alignItems="Center" gap="100">
          <Text size="H2">Vojo</Text>
          <Text size="T300" priority="400" align="Center">
            {t('Settings.about_tagline')}
          </Text>
        </Box>
        <Chip
          variant="Primary"
          fill="Soft"
          radii="Pill"
          onClick={() => copyToClipboard(version)}
          aria-label={t('Settings.copy')}
        >
          <Text as="span" size="T200" className={Mono}>
            {version}
          </Text>
        </Chip>
      </Box>

      {/* Connection strip — the Dawn canon's mono status bar. A green "online"
          dot plus the real homeserver this session is connected to. */}
      <Box
        alignItems="Center"
        gap="200"
        style={{
          padding: `${config.space.S300} ${config.space.S400}`,
          backgroundColor: color.Background.Container,
          border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
          borderRadius: config.radii.R400,
        }}
      >
        <span
          aria-hidden
          style={{
            width: toRem(7),
            height: toRem(7),
            borderRadius: '50%',
            backgroundColor: color.Success.Main,
            flexShrink: 0,
          }}
        />
        <Text as="span" size="T200" priority="400">
          {t('Settings.about_connected')}
        </Text>
        <Text as="span" size="T200" className={Mono}>
          {domain}
        </Text>
      </Box>

      {/* Actions — privacy policy + cache reset, in the shared grouped panel. */}
      <SettingsSection>
        <SettingTile
          title={t('Settings.privacy_policy_title')}
          description={t('Settings.privacy_policy_desc')}
          after={
            <Button
              as="a"
              href="https://vojo.chat/privacy"
              target="_blank"
              rel="noopener noreferrer"
              variant="Secondary"
              fill="Soft"
              size="300"
              radii="300"
              outlined
            >
              <Text size="B300">{t('Settings.privacy_policy_open')}</Text>
            </Button>
          }
        />
        <SettingTile
          title={t('Settings.clear_cache_title')}
          description={t('Settings.clear_cache_desc')}
          after={
            <Button
              onClick={() => clearCacheAndReload(mx)}
              variant="Secondary"
              fill="Soft"
              size="300"
              radii="300"
              outlined
            >
              <Text size="B300">{t('Settings.clear_cache')}</Text>
            </Button>
          }
        />
      </SettingsSection>

      {/* Compact open-source attribution — Twemoji art & Material sounds are
          CC-BY 4.0 and matrix-js-sdk is Apache 2.0, all of which require
          attribution, so one quiet line stays in place of the old credits. */}
      <Text size="T200" priority="400" align="Center" style={{ opacity: 0.55 }}>
        {t('Settings.about_credits')}
      </Text>
    </SettingsPage>
  );
}
