import React, { useCallback } from 'react';
import { Badge, Box, Button, Text } from 'folds';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useForceUpdate } from '../../../hooks/useForceUpdate';
import { useInterval } from '../../../hooks/useInterval';
import { buildCryptoDiagReport, getCryptoDiagEntries } from '../../../utils/cryptoDiagLog';

// Lotus E2EE investigation kit — Crypto Diagnostics settings card.
// Mirrors the surrounding Developer Tools cards (see DevelopTools.tsx).

const REFRESH_MS = 1000;

export function CryptoDiagnostics() {
  const mx = useMatrixClient();
  // Re-render on a light interval so the live matched-entry count stays fresh
  // while the settings pane is open.
  const [, forceUpdate] = useForceUpdate();
  useInterval(forceUpdate, REFRESH_MS);

  const count = getCryptoDiagEntries().length;

  const handleDownload = useCallback(() => {
    const report = buildCryptoDiagReport(mx);
    const blob = new Blob([report], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `lotus-crypto-diag-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }, [mx]);

  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Crypto Diagnostics</Text>
      <SequenceCard
        className={SequenceCardStyle}
        variant="SurfaceVariant"
        direction="Column"
        gap="400"
      >
        <SettingTile
          title="Crypto Diagnostics — captures E2EE error signatures this session"
          description="Ring-buffers up to 200 matched console warnings/errors for the KE-1..KE-4 bug cluster. Local only — no network calls. The downloaded report includes the matched log lines as evidence."
          after={
            <Box alignItems="Center" gap="200" shrink="No">
              <Badge variant={count > 0 ? 'Critical' : 'Secondary'} fill="Solid" radii="Pill">
                <Text as="span" size="L400">
                  {count}
                </Text>
              </Badge>
              <Button
                onClick={handleDownload}
                variant="Secondary"
                fill="Soft"
                size="300"
                radii="300"
                outlined
              >
                <Text size="B300">Download report</Text>
              </Button>
            </Box>
          }
        />
      </SequenceCard>
    </Box>
  );
}