import React from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Box,
  config,
  Dialog,
  Header,
  Icon,
  IconButton,
  Icons,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Text,
} from 'folds';
import { useAtom } from 'jotai';
import { callSummaryViewAtom } from '../../state/callSummary';
import { useModalStyle } from '../../hooks/useModalStyle';
import { stopPropagation } from '../../utils/keyboard';

/**
 * [Gitea #253] The post-call "Details" card: opened from the call-ended toast,
 * shows who was in the call, connection quality and whose side it was on,
 * network numbers and your own activity (technical wording).
 */
export function CallSummaryDialog() {
  const [view, setView] = useAtom(callSummaryViewAtom);
  const modalStyle = useModalStyle(400);
  if (!view) return null;
  const close = () => setView(undefined);
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: close,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Dialog
            variant="Surface"
            role="dialog"
            aria-modal="true"
            aria-labelledby="call-summary-title"
            style={modalStyle}
          >
            <Header
              variant="Surface"
              size="500"
              style={{
                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
                borderBottomWidth: config.borderWidth.B300,
              }}
            >
              <Box grow="Yes" alignItems="Center" gap="200">
                <Icon src={Icons.Phone} size="100" />
                <Text id="call-summary-title" size="H4" truncate>
                  Call summary · {view.roomName}
                </Text>
              </Box>
              <IconButton size="300" radii="300" onClick={close} aria-label="Close">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
            <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
              {view.sections.map((section) => (
                <Box key={section.title} direction="Column" gap="100">
                  <Text size="L400">{section.title}</Text>
                  {section.lines.map((line) => (
                    <Text key={line} size="T300" style={{ fontVariantNumeric: 'tabular-nums' }}>
                      {line}
                    </Text>
                  ))}
                </Box>
              ))}
            </Box>
          </Dialog>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}