import React from 'react';
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { useRoom } from '../../../hooks/useRoom';
import { RoomSoundboardPack, UserSoundboardPack } from '../../../components/soundboard-pack-view';

type SoundboardProps = {
  requestClose: () => void;
};

/**
 * Soundboard management page (Room/Space settings). Mirrors the Emojis &
 * Stickers page: a shared room/space pack (admin-editable, inherited by child
 * rooms like emoji packs) plus the user's personal pack. A single default room
 * pack (state key "") is used per room/space.
 */
export function Soundboard({ requestClose }: SoundboardProps) {
  const room = useRoom();

  return (
    <Page>
      <PageHeader outlined={false}>
        <Box grow="Yes" gap="200">
          <Box grow="Yes" alignItems="Center" gap="200">
            <Text as="h2" size="H3" truncate>
              Soundboard
            </Text>
          </Box>
          <Box shrink="No">
            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
        </Box>
      </PageHeader>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <Box direction="Column" gap="700">
              <Box direction="Column" gap="200">
                <Text size="L400">This room / space (shared)</Text>
                <Text size="T200" priority="300">
                  Clips here are shared with everyone, and inherited by every room under this space
                  — just like emoji/sticker packs. Only members with permission can edit.
                </Text>
                {room && <RoomSoundboardPack room={room} stateKey="" />}
              </Box>
              <Box direction="Column" gap="200">
                <Text size="L400">Personal</Text>
                <Text size="T200" priority="300">
                  Your own clips, available in every call and synced across your devices.
                </Text>
                <UserSoundboardPack />
              </Box>
            </Box>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}