'use client';

import {Card} from '@astryxdesign/core/Card';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {SectionHeader} from '@/shared/components/patterns/SectionHeader';
import {Badge} from '@astryxdesign/core/Badge';
import {Button} from '@astryxdesign/core/Button';
import {Divider} from '@astryxdesign/core/Divider';
import {Icon} from '@astryxdesign/core/Icon';
import {HoverLift} from '@/shared/components/motion/HoverLift';
import {StatPair, StatRow} from '@/shared/components/patterns/StatPair';
import {ICONS} from '@/shared/utils/icons';
import {formatCompact, formatInrCompact, formatPct} from '@/shared/utils/format';
import type {Store, StoreStatus} from '@/features/stores/types/store';

/**
 * Status is the one thing on this card allowed colour, because it is the one
 * thing that can require action. A closed or under-maintenance store is why a
 * merchant opened this page; its visitor count is context.
 */
const STATUS: Record<
  StoreStatus,
  {label: string; variant: 'success' | 'warning' | 'error' | 'neutral'}
> = {
  open: {label: 'Open', variant: 'success'},
  maintenance: {label: 'Maintenance', variant: 'warning'},
  closed: {label: 'Closed', variant: 'error'},
};

export function StoreCard({store}: {store: Store}) {
  const status = STATUS[store.status];

  return (
    <HoverLift>
      <Card>
        <VStack gap={4} height="100%">
          <SectionHeader
            level={3}
            title={store.name}
            subtitle={
              <HStack gap={1.5} vAlign="center">
                <Icon icon={ICONS.staff} size="xsm" color="secondary" />
                <Text size="sm" color="secondary">
                  {store.staffCount} staff
                </Text>
              </HStack>
            }
            actions={<Badge variant={status.variant} label={status.label} />}
          />

          <Divider />

          <StatRow>
            <StatPair label="Visitors" value={formatCompact(store.visitors)} />
            <StatPair
              label="Purchases"
              value={formatCompact(store.purchases)}
            />
          </StatRow>
          <StatRow>
            <StatPair
              label="Revenue"
              value={formatInrCompact(store.revenueInr)}
            />
            <StatPair
              label="Conversion"
              value={formatPct(store.conversionPct)}
            />
          </StatRow>

          <Button
            variant="secondary"
            size="sm"
            label="Open dashboard"
            href={`/stores/${store.id}`}
          />
        </VStack>
      </Card>
    </HoverLift>
  );
}
