import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../theme/colors';
import { typography } from '../../theme/typography';
import { spacing } from '../../theme/spacing';
import type { BookingRecord } from '../../types/booking';
import {
  STATUS_LABELS,
  STATUS_COLORS,
  formatBookingTime,
  getBookingDuration,
} from '../../types/booking';

interface BookingCardProps {
  record: BookingRecord;
  onPress: (record: BookingRecord) => void;
}

type IoniconsName = React.ComponentProps<typeof Ionicons>['name'];

function getStatusIcon(status: BookingRecord['status']): IoniconsName {
  switch (status) {
    case 'PENDING':
      return 'time-outline';
    case 'CONFIRMED':
      return 'checkmark-circle-outline';
    case 'IN_PROGRESS':
      return 'play-circle-outline';
    case 'COMPLETED':
      return 'checkmark-done-circle-outline';
    case 'CANCELLED':
      return 'close-circle-outline';
    case 'NO_SHOW':
      return 'alert-circle-outline';
    default:
      return 'ellipse-outline';
  }
}

export function BookingCard({ record, onPress }: BookingCardProps): React.JSX.Element {
  const styles = createStyles();
  const statusColor = STATUS_COLORS[record.status];
  const duration = getBookingDuration(record.startAt, record.endAt);
  const isGroup = !!record.groupEventId;

  return (
    <TouchableOpacity style={styles.card} onPress={() => onPress(record)} activeOpacity={0.7}>
      <View style={[styles.timeBadge, { backgroundColor: statusColor + '15' }]}>
        <Text style={[styles.timeText, { color: statusColor }]}>
          {formatBookingTime(record.startAt, record.endAt)}
        </Text>
        <Text style={styles.durationText}>{duration} мин</Text>
      </View>

      <View style={styles.content}>
        <View style={styles.headerRow}>
          <Text style={styles.clientName} numberOfLines={1}>
            {record.clientName}
          </Text>
          {isGroup && (
            <View style={styles.groupBadge}>
              <Ionicons name="people-outline" size={12} color={colors.primary} />
              <Text style={styles.groupBadgeText}>Группа</Text>
            </View>
          )}
        </View>

        {record.service && (
          <Text style={styles.serviceName} numberOfLines={1}>
            {record.service.name}
          </Text>
        )}

        <View style={styles.footer}>
          <View style={styles.statusRow}>
            <Ionicons name={getStatusIcon(record.status)} size={14} color={statusColor} />
            <Text style={[styles.statusText, { color: statusColor }]}>
              {STATUS_LABELS[record.status]}
            </Text>
          </View>

          {record.clientPhone && <Text style={styles.phoneText}>{record.clientPhone}</Text>}
        </View>
      </View>
    </TouchableOpacity>
  );
}

const createStyles = () =>
  StyleSheet.create({
    card: {
      flexDirection: 'row',
      backgroundColor: colors.card,
      borderRadius: 12,
      padding: spacing.md,
      marginBottom: spacing.sm,
      shadowColor: colors.black,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.08,
      shadowRadius: 8,
      elevation: 3,
    },
    timeBadge: {
      borderRadius: 8,
      paddingHorizontal: spacing.sm,
      paddingVertical: spacing.xs,
      alignItems: 'center',
      justifyContent: 'center',
      minWidth: 80,
      marginRight: spacing.md,
    },
    timeText: {
      ...typography.bodySmall,
      fontWeight: '600',
    },
    durationText: {
      ...typography.caption,
      color: colors.textMuted,
      marginTop: 2,
    },
    content: {
      flex: 1,
    },
    headerRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 2,
    },
    clientName: {
      ...typography.body,
      fontWeight: '600',
      color: colors.text,
      flex: 1,
    },
    groupBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primary + '15',
      borderRadius: 4,
      paddingHorizontal: spacing.xs,
      paddingVertical: 2,
      marginLeft: spacing.xs,
    },
    groupBadgeText: {
      ...typography.caption,
      color: colors.primary,
      marginLeft: 2,
    },
    serviceName: {
      ...typography.bodySmall,
      color: colors.textSecondary,
      marginBottom: spacing.xs,
    },
    footer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    statusRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
    },
    statusText: {
      ...typography.caption,
      fontWeight: '500',
    },
    phoneText: {
      ...typography.caption,
      color: colors.textMuted,
    },
  });
