'use client';

import {Card} from '@astryxdesign/core/Card';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Avatar} from '@astryxdesign/core/Avatar';
import {ProgressBar} from '@astryxdesign/core/ProgressBar';
import {Divider} from '@astryxdesign/core/Divider';
import {HoverLift} from '@/shared/components/motion/HoverLift';
import {SectionHeader} from '@/shared/components/patterns/SectionHeader';
import {StatPair, StatRow} from '@/shared/components/patterns/StatPair';
import {ATTENDANCE} from '@/features/staff/utils/attendance';
import {useStoreName} from '@/features/stores/hooks/useStoreDirectory';
import {formatCompact, formatPct} from '@/shared/utils/format';
import type {StaffMember} from '@/features/staff/types/staff';

/**
 * One team member.
 *
 * The performance score gets a bar rather than a bare number because a score
 * out of 100 is meaningless without a sense of the scale — 68 reads very
 * differently as a filled bar than as a digit. Sales and rewards stay as
 * plain figures; they are counts, not proportions.
 */
export function StaffCard({member}: {member: StaffMember}) {
  const attendance = ATTENDANCE[member.attendance];
  // Resolved from the workspace store directory, not from a fixture — see
  // useStoreDirectory.
  const storeName = useStoreName();

  return (
    <HoverLift>
      <Card>
        <VStack gap={4} height="100%">
          <SectionHeader
            level={3}
            title={member.name}
            subtitle={
              <Text size="sm" color="secondary">
                {member.role} · {storeName(member.storeId)}
              </Text>
            }
            actions={
              <Badge variant={attendance.badge} label={attendance.label} />
            }
          />

          <HStack gap={3} vAlign="center">
            <Avatar name={member.name} size="md" tooltip={false} />
            <VStack gap={1} width="100%">
              <ProgressBar
                value={member.performanceScore}
                max={100}
                label={`Performance score ${member.performanceScore} of 100`}
                hasValueLabel={false}
              />
              <HStack hAlign="between">
                <Text size="xsm" color="secondary">
                  Performance
                </Text>
                <Text size="xsm" weight="medium">
                  {member.performanceScore}/100
                </Text>
              </HStack>
            </VStack>
          </HStack>

          <Divider />

          <StatRow>
            <StatPair label="Sales" value={formatCompact(member.salesCount)} />
            <StatPair
              label="Rewards issued"
              value={formatCompact(member.rewardsIssued)}
            />
            <StatPair
              label="Punctuality"
              value={formatPct(member.punctualityPct, 0)}
              align="end"
            />
          </StatRow>
        </VStack>
      </Card>
    </HoverLift>
  );
}
