fotospiel-app/resources/js/admin/mobile/components/Primitives.tsx

import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { useAdminTheme } from '../theme';

export function MobileCard({
  children,
  className,
  ...rest
}: React.ComponentProps<typeof YStack>) {
  const { surface, border, shadow } = useAdminTheme();
  return (
    <YStack
      className={['admin-fade-up', className].filter(Boolean).join(' ')}
      backgroundColor={surface}
      borderRadius={18}
      borderWidth={1}
      borderColor={border}
      shadowColor={shadow}
      shadowOpacity={0.08}
      shadowRadius={14}
      shadowOffset={{ width: 0, height: 10 }}
      padding="$3.5"
      space="$2"
      {...rest}
    >
      {children}
    </YStack>
  );
}

export function PillBadge({
  tone = 'muted',
  children,
}: {
  tone?: 'success' | 'warning' | 'danger' | 'muted';
  children: React.ReactNode;
}) {
  const { theme } = useAdminTheme();
  const palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
    success: {
      bg: String(theme.backgroundStrong?.val ?? '#ecfdf3'),
      text: String(theme.green10?.val ?? '#047857'),
      border: String(theme.green6?.val ?? '#bbf7d0'),
    },
    warning: {
      bg: String(theme.yellow3?.val ?? '#fffbeb'),
      text: String(theme.yellow11?.val ?? '#92400e'),
      border: String(theme.yellow6?.val ?? '#fef3c7'),
    },
    danger: {
      bg: String(theme.red3?.val ?? '#FEE2E2'),
      text: String(theme.red11?.val ?? '#B91C1C'),
      border: String(theme.red6?.val ?? '#FCA5A5'),
    },
    muted: {
      bg: String(theme.gray3?.val ?? '#f3f4f6'),
      text: String(theme.gray11?.val ?? '#374151'),
      border: String(theme.gray6?.val ?? '#e5e7eb'),
    },
  };
  const colors = palette[tone] ?? palette.muted;
  return (
    <XStack
      alignItems="center"
      paddingHorizontal="$3"
      paddingVertical="$1.5"
      borderRadius={999}
      borderWidth={1}
      backgroundColor={colors.bg}
      borderColor={colors.border}
    >
      <Text fontSize="$xs" fontWeight="700" color={colors.text}>
        {children}
      </Text>
    </XStack>
  );
}

export function CTAButton({
  label,
  onPress,
  tone = 'primary',
  fullWidth = true,
  disabled = false,
  loading = false,
  style,
  iconLeft,
  iconRight,
}: {
  label: string;
  onPress: () => void;
  tone?: 'primary' | 'ghost' | 'danger';
  fullWidth?: boolean;
  disabled?: boolean;
  loading?: boolean;
  style?: any;
  iconLeft?: React.ReactNode;
  iconRight?: React.ReactNode;
}) {
  const { primary, surface, border, text, danger } = useAdminTheme();
  const isPrimary = tone === 'primary';
  const isDanger = tone === 'danger';
  const isDisabled = disabled || loading;
  const backgroundColor = isDanger ? danger : isPrimary ? primary : surface;
  const borderColor = isPrimary || isDanger ? 'transparent' : border;
  const labelColor = isPrimary || isDanger ? 'white' : text;
  return (
    <Pressable
      onPress={isDisabled ? undefined : onPress}
      disabled={isDisabled}
      style={{
        width: fullWidth ? '100%' : undefined,
        flex: fullWidth ? undefined : 1,
        opacity: isDisabled ? 0.6 : 1,
        ...style,
      }}
    >
      <XStack
        height={52}
        borderRadius={16}
        alignItems="center"
        justifyContent="center"
        backgroundColor={backgroundColor}
        borderWidth={isPrimary || isDanger ? 0 : 1}
        borderColor={borderColor}
        space="$2"
      >
        {iconLeft}
        <Text fontSize="$sm" fontWeight="800" color={labelColor}>
          {label}
        </Text>
        {iconRight}
      </XStack>
    </Pressable>
  );
}

export function KpiTile({
  icon: IconCmp,
  label,
  value,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  value: string | number;
}) {
  const { accentSoft, primary, text } = useAdminTheme();
  return (
    <MobileCard borderRadius={14} padding="$3" width="32%" minWidth={110} alignItems="flex-start">
      <XStack alignItems="center" space="$2">
        <XStack
          width={32}
          height={32}
          borderRadius={12}
          backgroundColor={accentSoft}
          alignItems="center"
          justifyContent="center"
        >
          <IconCmp size={16} color={primary} />
        </XStack>
        <Text fontSize="$xs" color={text}>
          {label}
        </Text>
      </XStack>
      <Text fontSize="$xl" fontWeight="800" color={text}>
        {value}
      </Text>
    </MobileCard>
  );
}

export function SkeletonCard({ height = 80 }: { height?: number }) {
  return (
    <MobileCard className="mobile-skeleton" height={height} />
  );
}

export function ActionTile({
  icon: IconCmp,
  label,
  color,
  onPress,
  disabled = false,
  delayMs = 0,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  color: string;
  onPress?: () => void;
  disabled?: boolean;
  delayMs?: number;
}) {
  const { textStrong } = useAdminTheme();
  const backgroundColor = `${color}18`;
  const borderColor = `${color}40`;
  const shadowColor = `${color}2b`;
  const iconShadow = `${color}55`;
  const tileStyle = {
    ...(delayMs ? { animationDelay: `${delayMs}ms` } : {}),
    backgroundImage: `linear-gradient(135deg, ${backgroundColor}, ${color}0f)`,
    boxShadow: `0 10px 24px ${shadowColor}`,
  };
  return (
    <Pressable
      onPress={disabled ? undefined : onPress}
      style={{ width: '48%', marginBottom: 12, opacity: disabled ? 0.5 : 1 }}
      disabled={disabled}
    >
      <YStack
        className="admin-fade-up"
        style={tileStyle}
        borderRadius={16}
        padding="$3"
        space="$2.5"
        backgroundColor={backgroundColor}
        borderWidth={1}
        borderColor={borderColor}
        minHeight={110}
        alignItems="center"
        justifyContent="center"
      >
        <XStack
          width={36}
          height={36}
          borderRadius={12}
          backgroundColor={color}
          alignItems="center"
          justifyContent="center"
          style={{ boxShadow: `0 6px 14px ${iconShadow}` }}
        >
          <IconCmp size={16} color="white" />
        </XStack>
        <Text fontSize="$sm" fontWeight="700" color={textStrong} textAlign="center">
          {label}
        </Text>
      </YStack>
    </Pressable>
  );
}

export function FloatingActionButton({
  onPress,
  label,
  icon: IconCmp,
}: {
  onPress: () => void;
  label: string;
  icon: React.ComponentType<{ size?: number; color?: string }>;
}) {
  const { primary, shadow } = useAdminTheme();
  const [pressed, setPressed] = React.useState(false);
  return (
    <Pressable
      onPress={onPress}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      onPointerLeave={() => setPressed(false)}
      style={{
        position: 'fixed',
        right: 18,
        bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)',
        zIndex: 60,
        transform: pressed ? 'scale(0.96)' : 'scale(1)',
        opacity: pressed ? 0.92 : 1,
        transition: 'transform 140ms ease, opacity 140ms ease',
      }}
      aria-label={label}
    >
      <XStack
        height={56}
        paddingHorizontal="$4"
        borderRadius={999}
        alignItems="center"
        justifyContent="center"
        space="$2"
        backgroundColor={primary}
        shadowColor={shadow}
        shadowOpacity={0.2}
        shadowRadius={16}
        shadowOffset={{ width: 0, height: 8 }}
      >
        <IconCmp size={18} color="white" />
        <Text fontSize="$sm" fontWeight="800" color="white">
          {label}
        </Text>
      </XStack>
    </Pressable>
  );
}