import React from 'react';
import { useAtom } from 'jotai';
import { useTranslation } from 'react-i18next';
import { Icon, IconButton, Icons, Text } from 'folds';
import { pendingShareAtom, type PendingShareValue } from '../../state/pendingShare';
import * as css from './ShareTargetStrip.css';

type Translator = (key: string, options?: Record<string, unknown>) => string;

// One-line description of what's queued — used as the strip's primary
// label. Mirrors the file-vs-text branching the upload board uses for
// its own cards, so the wording the user sees on the strip matches the
// cards once they land in the chat.
function describeShare(share: PendingShareValue, t: Translator): string {
  const fileCount = share.files.length;
  if (fileCount === 0 && share.text) return t('Share.share_text');
  if (fileCount === 1) {
    const f = share.files[0];
    if (f.type.startsWith('image/')) return t('Share.share_image');
    if (f.type.startsWith('video/')) return t('Share.share_video');
    if (f.type.startsWith('audio/')) return t('Share.share_audio');
    return t('Share.share_file', { name: f.name });
  }
  return t('Share.share_files', { count: fileCount });
}

// Persistent banner shown at the top of the viewport while
// `pendingShareAtom` holds a payload. Renders nothing when the atom is
// null. The user navigates to whichever chat they want — once a
// RoomInput mounts (= they entered a chat) it consumes the atom via its
// own effect, the atom flips to null, and this strip unmounts itself.
export function ShareTargetStrip() {
  const { t } = useTranslation();
  const [share, setShare] = useAtom(pendingShareAtom);
  if (!share) return null;

  return (
    <div className={css.Strip} role="status" aria-live="polite">
      <div className={css.Content}>
        <Icon size="200" src={Icons.Send} />
        <div className={css.TextBlock}>
          <Text size="T300" truncate>
            <b>{describeShare(share, t)}</b>
          </Text>
          <Text size="T200" priority="300" truncate>
            {t('Share.tap_chat_to_send')}
          </Text>
        </div>
        <IconButton
          size="300"
          radii="Pill"
          variant="Primary"
          fill="None"
          onClick={() => setShare(null)}
          aria-label={t('Share.cancel')}
        >
          <Icon src={Icons.Cross} />
        </IconButton>
      </div>
    </div>
  );
}
