import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { colors } from '../../theme/colors';
import { typography } from '../../theme/typography';
import { spacing } from '../../theme/spacing';
import type { Sale, SaleStatus } from '../../types/sale';
import { STATUS_LABELS, getStatusColor } from '../../types/sale';

interface SaleCardProps {
  sale: Sale;
  onPress: (sale: Sale) => void;
}

function formatAmount(amount: number): string {
  return amount.toLocaleString('ru-RU') + ' \u20BD';
}

function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  });
}

function getStatusBadgeStyle(status: SaleStatus): { bg: string; text: string } {
  switch (status) {
    case 'PENDING':
      return { bg: '#FFF3E0', text: getStatusColor(status) };
    case 'PAID':
      return { bg: '#E8F5E9', text: getStatusColor(status) };
    case 'CANCELLED':
      return { bg: '#FFEBEE', text: getStatusColor(status) };
    case 'REFUNDED':
      return { bg: '#F3F4F6', text: getStatusColor(status) };
    default:
      return { bg: '#F3F4F6', text: colors.textMuted };
  }
}

export function SaleCard({ sale, onPress }: SaleCardProps): React.JSX.Element {
  const styles = createStyles();
  const clientName = `${sale.client.lastName} ${sale.client.firstName}`;
  const trainerName = `${sale.trainer.firstName} ${sale.trainer.lastName}`;
  const serviceName = sale.service?.name || sale.package?.name || null;
  const badgeStyle = getStatusBadgeStyle(sale.status);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => onPress(sale)}
      activeOpacity={0.7}
    >
      <View style={styles.amountSection}>
        <Text style={styles.amountText}>{formatAmount(sale.amount)}</Text>
      </View>

      <View style={styles.infoSection}>
        <View style={styles.topRow}>
          <View style={styles.clientInfo}>
            <Text style={styles.clientName} numberOfLines={1}>
              {clientName}
            </Text>
            {serviceName && (
              <Text style={styles.serviceName} numberOfLines={1}>
                {serviceName}
              </Text>
            )}
            <Text style={styles.trainerName} numberOfLines={1}>
              {trainerName}
            </Text>
          </View>

          <View style={styles.rightColumn}>
            <View style={[styles.badge, { backgroundColor: badgeStyle.bg }]}>
              <Text style={[styles.badgeText, { color: badgeStyle.text }]}>
                {STATUS_LABELS[sale.status]}
              </Text>
            </View>
            <Text style={styles.date}>{formatDate(sale.createdAt)}</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const createStyles = () => StyleSheet.create({
  container: {
    backgroundColor: colors.card,
    borderRadius: 12,
    marginBottom: spacing.md,
    overflow: 'hidden',
    shadowColor: colors.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 3,
  },
  amountSection: {
    backgroundColor: colors.salesCard,
    paddingVertical: spacing.md,
    paddingHorizontal: spacing.lg,
  },
  amountText: {
    ...typography.subtitle,
    fontWeight: '700',
    color: colors.white,
  },
  infoSection: {
    padding: spacing.lg,
  },
  topRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  clientInfo: {
    flex: 1,
    marginRight: spacing.sm,
  },
  clientName: {
    ...typography.body,
    fontWeight: '600',
    color: colors.text,
  },
  serviceName: {
    ...typography.bodySmall,
    color: colors.textSecondary,
    marginTop: 2,
  },
  trainerName: {
    ...typography.caption,
    color: colors.textMuted,
    marginTop: 2,
  },
  rightColumn: {
    alignItems: 'flex-end',
  },
  badge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: 8,
    marginBottom: spacing.xs,
  },
  badgeText: {
    ...typography.caption,
    fontWeight: '600',
  },
  date: {
    ...typography.caption,
    color: colors.textMuted,
  },
});
