'use client';

import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
import {Icon} from '@astryxdesign/core/Icon';
import {Item} from '@astryxdesign/core/Item';
import {HStack, VStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {useSession} from '@/features/auth/providers/SessionProvider';
import {BrandLogo} from '@/shared/components/brand/BrandLogo';
import {APP_ENVIRONMENT, APP_NAME, APP_VERSION} from '@/shared/utils/appInfo';

/**
 * About, opened from the account menu's Help panel.
 *
 * Everything on it is read from somewhere real — the version from
 * package.json, the environment from the build, the identity from the session.
 * Nothing is a placeholder, because the one job of an About dialog is to be
 * quotable in a support ticket.
 */
export function AboutDialog({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) {
  const {user} = useSession();

  return (
    <Dialog
      isOpen={isOpen}
      onOpenChange={(open) => (open ? undefined : onClose())}
      purpose="info"
      width={420}
      aria-label={`About ${APP_NAME}`}
    >
      <VStack gap={4} width="100%">
        <DialogHeader
          title={`About ${APP_NAME}`}
          onOpenChange={(open) => (open ? undefined : onClose())}
        />

        <HStack paddingInline={2} paddingBlock={2}>
          <BrandLogo height={28} alt="" />
        </HStack>

        <VStack gap={0.5} width="100%">
          <Item
            label="Version"
            density="balanced"
            endContent={<Text type="supporting">{APP_VERSION}</Text>}
          />
          <Item
            label="Environment"
            density="balanced"
            endContent={<Text type="supporting">{APP_ENVIRONMENT}</Text>}
          />
          <Item
            label="Signed in as"
            density="balanced"
            endContent={
              <Text type="supporting">{user?.email ?? 'Not signed in'}</Text>
            }
          />
          {user ? (
            <Item
              label="Organisation"
              density="balanced"
              endContent={<Text type="supporting">{user.organisation}</Text>}
            />
          ) : null}
        </VStack>

        <Item
          label="loyaly.ai"
          density="balanced"
          href="https://loyaly.ai"
          target="_blank"
          endContent={
            <Icon icon="externalLink" size="sm" color="secondary" />
          }
        />
      </VStack>
    </Dialog>
  );
}
