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 { Training, TrainingStatus } from '../../types/training';
import { STATUS_LABELS } from '../../types/training';

interface TrainingCardProps {
  training: Training;
  onPress: (training: Training) => void;
}

function getStatusColor(status: TrainingStatus): string {
  switch (status) {
    case 'PLANNED':
      return colors.warning;
    case 'CONFIRMED':
      return colors.success;
    case 'COMPLETED':
      return colors.success;
    case 'CANCELLED':
      return colors.error;
    case 'NO_SHOW':
      return colors.error;
    default:
      return colors.textMuted;
  }
}

function formatTimeRange(startTime: string, endTime: string): string {
  const start = startTime.substring(0, 5);
  const end = endTime.substring(0, 5);
  return `${start} - ${end}`;
}

function getClientDisplayName(training: Training): string {
  if (training.client) {
    const { firstName, lastName } = training.client;
    return `${lastName} ${firstName}`;
  }
  return 'Клиент';
}

export function TrainingCard({
  training,
  onPress,
}: TrainingCardProps): React.JSX.Element {
  const styles = createStyles();
  const statusColor = getStatusColor(training.status);
  const statusLabel = STATUS_LABELS[training.status];
  const timeRange = formatTimeRange(training.startTime, training.endTime);
  const clientName = getClientDisplayName(training);
  const serviceName = training.service?.name || 'Тренировка';

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => onPress(training)}
      activeOpacity={0.7}
    >
      <View style={[styles.timeBadge, { borderLeftColor: statusColor }]}>
        <Text style={styles.timeText}>{timeRange}</Text>
      </View>

      <View style={styles.content}>
        <Text style={styles.clientName} numberOfLines={1}>
          {clientName}
        </Text>
        <Text style={styles.serviceName} numberOfLines={1}>
          {serviceName}
        </Text>
        {training.room && (
          <Text style={styles.roomName} numberOfLines={1}>
            {training.room.name}
          </Text>
        )}
      </View>

      <View style={[styles.statusBadge, { backgroundColor: statusColor }]}>
        <Text style={styles.statusText}>{statusLabel}</Text>
      </View>
    </TouchableOpacity>
  );
}

const createStyles = () => StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.card,
    borderRadius: 12,
    padding: spacing.lg,
    marginBottom: spacing.sm,
    shadowColor: colors.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 3,
  },
  timeBadge: {
    borderLeftWidth: 3,
    paddingLeft: spacing.sm,
    marginRight: spacing.md,
  },
  timeText: {
    ...typography.bodySmall,
    fontWeight: '600',
    color: colors.text,
  },
  content: {
    flex: 1,
    marginRight: spacing.sm,
  },
  clientName: {
    ...typography.body,
    fontWeight: '600',
    color: colors.text,
  },
  serviceName: {
    ...typography.bodySmall,
    color: colors.textSecondary,
    marginTop: 2,
  },
  roomName: {
    ...typography.caption,
    color: colors.textMuted,
    marginTop: 2,
  },
  statusBadge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
    borderRadius: 8,
  },
  statusText: {
    ...typography.caption,
    color: colors.white,
    fontWeight: '600',
  },
});
