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 { useTheme } from '@tamagui/core';

export function MobileCard({ children, ...rest }: React.ComponentProps<typeof YStack>) {
  const theme = useTheme();
  return (
    <YStack
      backgroundColor={String(theme.surface?.val ?? 'white')}
      borderRadius={16}
      borderWidth={1}
      borderColor={String(theme.borderColor?.val ?? '#e5e7eb')}
      shadowColor="#0f172a"
      shadowOpacity={0.06}
      shadowRadius={12}
      shadowOffset={{ width: 0, height: 8 }}
      padding="$3.5"
      space="$2"
      {...rest}
    >
      {children}
    </YStack>
  );
}

export function PillBadge({
  tone = 'muted',
  children,
}: {
  tone?: 'success' | 'warning' | 'muted';
  children: React.ReactNode;
}) {
  const theme = useTheme();
  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'),
    },
    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,
}: {
  label: string;
  onPress: () => void;
  tone?: 'primary' | 'ghost';
  fullWidth?: boolean;
  disabled?: boolean;
  loading?: boolean;
}) {
  const theme = useTheme();
  const isPrimary = tone === 'primary';
  const isDisabled = disabled || loading;
  return (
    <Pressable
      onPress={isDisabled ? undefined : onPress}
      disabled={isDisabled}
      style={{
        width: fullWidth ? '100%' : undefined,
        flex: fullWidth ? undefined : 1,
        opacity: isDisabled ? 0.6 : 1,
      }}
    >
      <XStack
        height={56}
        borderRadius={14}
        alignItems="center"
        justifyContent="center"
        backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : String(theme.surface?.val ?? 'white')}
        borderWidth={isPrimary ? 0 : 1}
        borderColor={isPrimary ? 'transparent' : String(theme.borderColor?.val ?? '#e5e7eb')}
      >
        <Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : String(theme.color?.val ?? '#111827')}>
          {label}
        </Text>
      </XStack>
    </Pressable>
  );
}

export function KpiTile({
  icon: IconCmp,
  label,
  value,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  value: string | number;
}) {
  const theme = useTheme();
  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={String(theme.blue3?.val ?? '#e5f0ff')}
          alignItems="center"
          justifyContent="center"
        >
          <IconCmp size={16} color={String(theme.primary?.val ?? '#2563eb')} />
        </XStack>
        <Text fontSize="$xs" color={String(theme.color?.val ?? '#111827')}>
          {label}
        </Text>
      </XStack>
      <Text fontSize="$xl" fontWeight="800" color={String(theme.color?.val ?? '#111827')}>
        {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,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  color: string;
  onPress?: () => void;
  disabled?: boolean;
}) {
  const theme = useTheme();
  const text = String(theme.color12?.val ?? theme.color?.val ?? '#f8fafc');
  return (
    <Pressable
      onPress={disabled ? undefined : onPress}
      style={{ width: '48%', marginBottom: 12, opacity: disabled ? 0.5 : 1 }}
      disabled={disabled}
    >
      <YStack
        borderRadius={16}
        padding="$3"
        space="$2.5"
        backgroundColor={`${color}22`}
        borderWidth={1}
        borderColor={`${color}55`}
        minHeight={110}
        alignItems="center"
        justifyContent="center"
      >
        <XStack width={34} height={34} borderRadius={12} backgroundColor={color} alignItems="center" justifyContent="center">
          <IconCmp size={16} color="white" />
        </XStack>
        <Text fontSize="$sm" fontWeight="700" color={text} 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 theme = useTheme();
  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={String(theme.primary?.val ?? '#007AFF')}
        shadowColor="#0f172a"
        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>
  );
}