import { colors } from '@/assets/styles/colors';
import { fonts } from '@/assets/styles/fonts';
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background_1,
  },
  centered: {
    flex: 1,
    backgroundColor: colors.background_1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 16,
    paddingTop: 14,
    paddingBottom: 120,
  },
  logo: {
    width: 165,
    height: 36,
    alignSelf: 'center',
    marginBottom: 14,
  },
  statsRow: {
    flexDirection: 'row',
    gap: 8,
    marginBottom: 18,
  },
  statCard: {
    flex: 1,
    backgroundColor: colors.branco,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    paddingHorizontal: 6,
    minHeight: 82,
  },
  statCardPrimary: {
    backgroundColor: colors.azul,
  },
  statIconEmViagemWrap: {
    width: 38,
    height: 38,
    backgroundColor: colors.branco,
    borderRadius: 19,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 5,
  },
  statIcon: {
    width: 38,
    height: 38,
    marginBottom: 5,
  },
  statLabel: {
    fontSize: 14,
    color: colors.azul,
    fontFamily: fonts.regular,
    marginBottom: 2,
    textAlign: 'center',
  },
  statValue: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.medium,
    lineHeight: 32,
  },
  statLabelPrimary: {
    fontSize: 14,
    color: colors.branco,
    fontFamily: fonts.regular,
    marginBottom: 2,
    textAlign: 'center',
  },
  statValuePrimary: {
    fontSize: 24,
    color: colors.branco,
    fontFamily: fonts.medium,
    lineHeight: 32,
  },
  sectionTitle: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.bold,
    marginBottom: 12,
  },
  card: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    padding: 10,
    flexDirection: 'row',
    gap: 10,
    marginBottom: 12,
    alignItems: 'stretch',
  },
  cardImage: {
    width: 100,
    height: 120,
    borderRadius: 14,
    backgroundColor: '#E7ECF4',
  },
  cardContent: {
    flex: 1,
    justifyContent: 'space-between',
    height: 100,
  },
  arrowWrap: {
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    paddingLeft: 2,
  },
  cardTopRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 8,
  },
  refText: {
    flex: 1,
    flexShrink: 1,
    fontSize: 12,
    color: '#4A6592',
    fontFamily: fonts.regular,
    marginRight: 4,
  },
  destination: {
    fontSize: 24,
    color: colors.azul,
    fontFamily: fonts.bold,
    lineHeight: 35,
    marginTop: 2,
    marginBottom: 2,
  },
  meta: {
    fontSize: 11,
    color: '#4A6592',
    fontFamily: fonts.regular,
  },
  dateRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    marginTop: 2,
  },
  dateIcon: {
    width: 12,
    height: 12,
    tintColor: '#4A6592',
  },
  statusBadge: {
    flexShrink: 1,
    maxWidth: '60%',
    borderRadius: 12,
    paddingVertical: 4,
    paddingHorizontal: 6,
    backgroundColor: '#E9EDF4',
  },
  statusBadgeContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4,
    flexShrink: 1,
  },
  statusText: {
    flexShrink: 1,
    fontSize: 12,
    fontFamily: fonts.medium,
    textAlign: 'center',
  },
  statusSuccess: {
    backgroundColor: '#D8FFE3', // verde
  },
  statusDanger: {
    backgroundColor: '#FFE2E0', // vermelho
  },
  statusInfo: {
    backgroundColor: '#F3DBFF', // roxo
  },
  statusPendente: {
    backgroundColor: '#FFF6D9',
  },
  statusTextSuccess: {
    color: '#13AE45',
  },
  statusTextDanger: {
    color: '#E6463B',
  },
  statusTextInfo: {
    color: '#B138E6',
  },
  statusTextPendente: {
    color: '#C99700',
  },
  offlineBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: '#4A6592',
    borderRadius: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
    marginBottom: 12,
  },
  offlineBannerText: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 12,
    flex: 1,
  },
  errorText: {
    fontSize: 14,
    color: colors.vermelho,
    fontFamily: fonts.medium,
    marginBottom: 10,
  },
  emptyText: {
    fontSize: 14,
    color: '#4A6592',
    fontFamily: fonts.medium,
  },
});