'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 {ProgressBar} from '@astryxdesign/core/ProgressBar';
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, formatLyt, formatPct} from '@/shared/utils/format';
import {REWARD_STATUS} from '@/features/lyts/utils/rewardStatus';
import {daysUntil, usageRate} from '@/features/lyts/services/lytsService';
import type {Reward} from '@/features/lyts/types/reward';

/**
 * One reward.
 *
 * The progress bar is claimed-vs-redeemed, and it is the point of the card:
 * the unfilled portion is outstanding liability — LYTs a customer holds and
 * can spend at any time. A reward claimed 800 times and redeemed 150 is not a
 * popular offer, it is ₹78,000 of unbudgeted exposure.
 */
export function RewardCard({reward, nowMs}: {reward: Reward; nowMs: number}) {
  const status = REWARD_STATUS[reward.status];
  const rate = usageRate(reward.claimed, reward.used);
  const days = daysUntil(reward.expiresAt, nowMs);
  const outstanding = reward.claimed - reward.used;

  return (
    <HoverLift>
      <Card>
        <VStack gap={4} height="100%">
          <SectionHeader
            level={3}
            title={reward.name}
            subtitle={
              <HStack gap={1.5} vAlign="center">
                <Icon icon={ICONS.lyt} size="sm" color="secondary" />
                <Text size="base" weight="medium">
                  {formatLyt(reward.costLyt)}
                </Text>
              </HStack>
            }
            actions={<Badge variant={status.variant} label={status.label} />}
          />

          <VStack gap={2}>
            <ProgressBar
              value={rate}
              max={100}
              label={`Redeemed ${formatPct(rate, 0)} of claims`}
              hasValueLabel={false}
            />
            <HStack hAlign="between">
              <Text size="sm" weight="medium">
                {formatCompact(reward.used)} redeemed
              </Text>
              <Text size="sm" weight="medium">
                {formatCompact(reward.claimed)} claimed
              </Text>
            </HStack>
          </VStack>

          <Divider />

          <StatRow>
            <StatPair
              label="Outstanding"
              value={formatLyt(outstanding * reward.costLyt)}
            />
            <StatPair
              label={days === null ? 'Expires' : days < 0 ? 'Expired' : 'Expires in'}
              value={
                days === null
                  ? 'Never'
                  : days < 0
                    ? `${Math.abs(days)}d ago`
                    : `${days}d`
              }
              align="end"
            />
          </StatRow>
        </VStack>
      </Card>
    </HoverLift>
  );
}
