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 { ADMIN_GRADIENTS, useAdminTheme } from '../theme';
import { withAlpha } from './colors';

export function MobileCard({
  children,
  className,
  style,
  ...rest
}: React.ComponentProps<typeof YStack>) {
  const { surface, border, shadow, glassSurface, glassBorder, glassShadow } = useAdminTheme();
  return (
    <YStack
      className={['admin-fade-up', className].filter(Boolean).join(' ')}
      backgroundColor={glassSurface ?? surface}
      borderRadius={20}
      borderWidth={2}
      borderColor={glassBorder ?? border}
      shadowColor={glassShadow ?? shadow}
      shadowOpacity={0.16}
      shadowRadius={16}
      shadowOffset={{ width: 0, height: 10 }}
      padding="$3.5"
      space="$2"
      style={{
        ...style,
      }}
      {...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, glassSurfaceStrong } = useAdminTheme();
  const isPrimary = tone === 'primary';
  const isDanger = tone === 'danger';
  const isDisabled = disabled || loading;
  const backgroundColor = isDanger ? danger : isPrimary ? primary : glassSurfaceStrong ?? surface;
  const borderColor = isPrimary || isDanger ? 'transparent' : border;
  const labelColor = isPrimary || isDanger ? 'white' : text;
  const primaryStyle = isPrimary
    ? {
        boxShadow: `0 18px 28px ${withAlpha(primary, 0.4)}`,
      }
    : undefined;
  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={18}
        alignItems="center"
        justifyContent="center"
        backgroundColor={backgroundColor}
        borderWidth={isPrimary || isDanger ? 0 : 2}
        borderColor={borderColor}
        space="$2"
        style={primaryStyle}
      >
        {iconLeft}
        <Text fontSize="$sm" fontWeight="800" color={labelColor}>
          {label}
        </Text>
        {iconRight}
      </XStack>
    </Pressable>
  );
}

export function KpiTile({
  icon: IconCmp,
  label,
  value,
  note,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  value: string | number;
  note?: string;
}) {
  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>
      {note ? (
        <Text fontSize="$xs" color={text} opacity={0.7}>
          {note}
        </Text>
      ) : null}
    </MobileCard>
  );
}

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

export function ActionTile({
  icon: IconCmp,
  label,
  note,
  noteTone = 'muted',
  color,
  onPress,
  disabled = false,
  variant = 'grid',
  delayMs = 0,
}: {
  icon: React.ComponentType<{ size?: number; color?: string }>;
  label: string;
  note?: string;
  noteTone?: 'warning' | 'muted';
  color: string;
  onPress?: () => void;
  disabled?: boolean;
  variant?: 'grid' | 'cluster';
  delayMs?: number;
}) {
  const { textStrong, glassSurface, muted, warningText } = useAdminTheme();
  const noteColor = noteTone === 'warning' ? warningText : muted;
  const isCluster = variant === 'cluster';
  const backgroundColor = withAlpha(color, 0.12);
  const borderColor = withAlpha(color, 0.4);
  const shadowColor = withAlpha(color, 0.35);
  const iconShadow = withAlpha(color, 0.5);
  const tileStyle = {
    ...(delayMs ? { animationDelay: `${delayMs}ms` } : {}),
    backgroundImage: `linear-gradient(135deg, ${backgroundColor}, ${withAlpha(color, 0.08)})`,
    boxShadow: isCluster ? `0 12px 18px ${shadowColor}` : `0 20px 30px ${shadowColor}`,
  };
  return (
    <Pressable
      onPress={disabled ? undefined : onPress}
      style={{
        width: isCluster ? '100%' : '48%',
        flex: isCluster ? 1 : undefined,
        marginBottom: isCluster ? 0 : 12,
        opacity: disabled ? 0.5 : 1,
      }}
      disabled={disabled}
    >
      <YStack
        className="admin-fade-up"
        style={tileStyle}
        borderRadius={isCluster ? 14 : 16}
        padding="$3"
        space="$2.5"
        backgroundColor={glassSurface ?? backgroundColor}
        borderWidth={2}
        borderColor={borderColor}
        minHeight={120}
        alignItems="center"
        justifyContent="center"
      >
        <XStack
          width={44}
          height={44}
          borderRadius={14}
          backgroundColor={color}
          alignItems="center"
          justifyContent="center"
          style={{ boxShadow: `0 6px 14px ${iconShadow}` }}
        >
          <IconCmp size={18} color="white" />
        </XStack>
        <Text fontSize="$sm" fontWeight="800" color={textStrong} textAlign="center">
          {label}
        </Text>
        {note ? (
          <Text fontSize="$xs" fontWeight="700" color={noteColor} textAlign="center">
            {note}
          </Text>
        ) : null}
      </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>
  );
}