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>) {
  return (
    <YStack
      backgroundColor="white"
      borderRadius={16}
      borderWidth={1}
      borderColor="#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 palette: Record<typeof tone, { bg: string; text: string; border: string }> = {
    success: { bg: '#ecfdf3', text: '#047857', border: '#bbf7d0' },
    warning: { bg: '#fffbeb', text: '#92400e', border: '#fef3c7' },
    muted: { bg: '#f3f4f6', text: '#374151', border: '#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',
}: {
  label: string;
  onPress: () => void;
  tone?: 'primary' | 'ghost';
}) {
  const theme = useTheme();
  const isPrimary = tone === 'primary';
  return (
    <Pressable onPress={onPress} style={{ width: '100%' }}>
      <XStack
        height={56}
        borderRadius={14}
        alignItems="center"
        justifyContent="center"
        backgroundColor={isPrimary ? String(theme.primary?.val ?? '#007AFF') : 'white'}
        borderWidth={isPrimary ? 0 : 1}
        borderColor={isPrimary ? 'transparent' : '#e5e7eb'}
      >
        <Text fontSize="$sm" fontWeight="800" color={isPrimary ? 'white' : '#111827'}>
          {label}
        </Text>
      </XStack>
    </Pressable>
  );
}

export function KpiTile({
  icon: IconCmp,
  label,
  value,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  value: string | number;
}) {
  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="#e5f0ff" alignItems="center" justifyContent="center">
          <IconCmp size={16} color="#2563eb" />
        </XStack>
        <Text fontSize="$xs" color="#111827">
          {label}
        </Text>
      </XStack>
      <Text fontSize="$xl" fontWeight="800" color="#111827">
        {value}
      </Text>
    </MobileCard>
  );
}

export function ActionTile({
  icon: IconCmp,
  label,
  color,
  onPress,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  color: string;
  onPress: () => void;
}) {
  return (
    <Pressable onPress={onPress} style={{ width: '48%' }}>
      <YStack
        borderRadius={16}
        padding="$3"
        space="$2"
        backgroundColor={`${color}22`}
        borderWidth={1}
        borderColor={`${color}55`}
        minHeight={110}
      >
        <XStack width={38} height={38} borderRadius={12} backgroundColor={color} alignItems="center" justifyContent="center">
          <IconCmp size={18} color="white" />
        </XStack>
        <Text fontSize="$sm" fontWeight="700" color="#111827">
          {label}
        </Text>
      </YStack>
    </Pressable>
  );
}