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,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 54,
    paddingBottom: 10,
    gap: 10,
  },
  backButton: {
    width: 32,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 150,
    height: 34,
  },
  centered: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 16,
    paddingBottom: 120,
    gap: 10,
  },
  errorText: {
    color: colors.vermelho,
    fontFamily: fonts.medium,
    fontSize: 13,
    marginBottom: 8,
  },
  summaryCard: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    padding: 12,
  },
  rowBetween: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
    marginBottom: 6,
  },
  idTop: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 16,
    marginBottom: 2,
  },
  idBlock: {
    marginTop: 6,
    flex: 1,
    flexShrink: 1,
    marginRight: 8,
  },
  statusBadge: {
    flexShrink: 1,
    maxWidth: '40%',
    borderRadius: 12,
    paddingVertical: 4,
    paddingHorizontal: 6,
    backgroundColor: '#E9EDF4',
  },
  statusBadgeContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 4,
    flexShrink: 1,
  },
  statusBadgeText: {
    flexShrink: 1,
    fontSize: 11,
    fontFamily: fonts.medium,
    textAlign: 'center',
    color: '#4A6592',
  },
  statusSuccess: {
    backgroundColor: '#D8FFE3',
  },
  statusDanger: {
    backgroundColor: '#FFE2E0',
  },
  statusInfo: {
    backgroundColor: '#F3DBFF',
  },
  statusPendente: {
    backgroundColor: '#FFF6D9',
  },
  statusTextSuccess: {
    color: '#13AE45',
  },
  statusTextDanger: {
    color: '#E6463B',
  },
  statusTextInfo: {
    color: '#B138E6',
  },
  statusTextPendente: {
    color: '#C99700',
  },
  summaryImage: {
    width: '100%',
    height: 180,
    borderRadius: 12,
    marginBottom: 8,
    backgroundColor: '#E7ECF4',
  },
  destination: {
    marginTop: 16,
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 24,
    marginBottom: 2,
  },
  dateText: {
    color: '#4A6592',
    fontFamily: fonts.regular,
    fontSize: 12,
    marginBottom: 8,
  },
  refsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  smallLabel: {
    color: '#4A6592',
    fontFamily: fonts.regular,
    fontSize: 11,
  },
  smallValue: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 14,
  },
  priceRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#F3F6FC',
    borderRadius: 10,
    padding: 8,
  },
  priceLeft: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 13,
  },
  priceRight: {
    color: '#4A6592',
    fontFamily: fonts.medium,
    fontSize: 13,
  },
  sectionHeader: {
    backgroundColor: colors.branco,
    borderRadius: 14,
    paddingHorizontal: 12,
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  sectionTitle: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 16,
    marginBottom: 10,
  },
  sectionBody: {
    backgroundColor: colors.branco,
    borderRadius: 14,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginTop: -4,
    marginBottom: 2,
    gap: 8,
  },
  rowLine: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 8,
    paddingBottom: 8,
  },
  rowLineNoBorder: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: 8,
    paddingVertical: 8,
  },
  rowLabel: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 16,
  },
  rowTitle: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 13,
    flex: 1,
  },
  rowValue: {
    color: '#4A6592',
    fontFamily: fonts.light,
    fontSize: 15,
    textAlign: 'right',
    flex: 1,
  },
  priceBox: {
    marginTop: 6,
    backgroundColor: colors.azul,
    borderRadius: 12,
    padding: 10,
  },
  priceMain: {
    color: colors.branco,
    fontSize: 26,
    fontFamily: fonts.bold,
    marginBottom: 2,
  },
  priceSub: {
    color: colors.branco,
    fontSize: 12,
    fontFamily: fonts.medium,
  },
  empty: {
    marginTop: 10,
    color: '#4A6592',
    fontFamily: fonts.regular,
    fontSize: 12,
  },
  extrasList: {
    gap: 10,
  },
  extrasItem: {
    backgroundColor: colors.background_2,
    borderRadius: 10,
    padding: 10,
  },
  extrasItemText: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 13,
  },
  
  divider: {
    height: 1,
    backgroundColor: '#EDF1F7',
    marginVertical: 10,
  },
  blockBorderTop: {
    borderTopWidth: 1,
    borderTopColor: '#EDF1F7',
    paddingTop: 10,
    marginTop: 4,
  },

  refsBlock: {
    flexDirection: 'row',
    gap: 16,
    marginTop: 6,
  },
  refsCol: {
    flex: 1,
  },

  hotelRow: {
    flexDirection: 'row',
    gap: 12,
    paddingVertical: 6,
  },
  hotelImage: {
    width: 104,
    height: 126,
    borderRadius: 12,
    backgroundColor: '#E7ECF4',
  },
  hotelInfo: {
    flex: 1,
    justifyContent: 'center',
  },
  hotelStarsRow: {
    flexDirection: 'row',
    gap: 2,
    marginBottom: 2,
  },
  hotelName: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 16,
    marginBottom: 4,
  },
  hotelMetaLine: {
    fontSize: 13,
    lineHeight: 17,
    marginBottom:4,
  },
  hotelMetaLabel: {
    color: colors.azul,
    fontFamily: fonts.semiBold,
  },
  hotelMetaValue: {
    color: colors.azul,
    fontFamily: fonts.regular,
  },

  vooList: {
    gap: 10,
  },
  vooCard: {
    backgroundColor: colors.background_2,
    borderRadius: 14,
    padding: 12,
  },
  vooRouteRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  vooSideCol: {
    flex: 1,
  },
  vooSideColRight: {
    alignItems: 'flex-end',
  },
  vooCode: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 28,
    lineHeight: 32,
  },
  vooCodeRight: {
    textAlign: 'right',
  },
  vooMidCol: {
    alignItems: 'center',
    paddingHorizontal: 8,
    gap: 6,
  },
  vooDuration: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 11,
  },
  vooPathWrap: {
    width: 140,
    height: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  vooPathLine: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 1,
    backgroundColor: colors.cinza,
  },
  vooPathIcon: {
    backgroundColor: '#EDEDED',
    paddingHorizontal: 5,
  },
  vooTime: {
    color: colors.azul,
    fontFamily: fonts.light,
    fontSize: 15,
    marginTop: 2,
  },
  vooTimeRight: {
    textAlign: 'right',
  },
  vooAirport: {
    color: colors.azul,
    fontFamily: fonts.light,
    fontSize: 11,
    marginTop: 2,
    flexShrink: 1,
  },
  vooAirportRight: {
    textAlign: 'right',
  },
  vooInfoBox: {
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: colors.cinza,
    borderRadius: 10,
    paddingTop: 10,
    paddingBottom: 10,
    paddingHorizontal: 20,
    marginTop: 12,
    marginBottom: 12,
    gap: 8,
  },
  vooInfoColLeft: {
    width: '50%',
    flex: 1,
    gap: 6,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  vooInfoColRight: {
    width: '50%',
    flex: 1,
    gap: 6,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  vooInfoDate: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 14,
  },
  vooLegRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
  },
  vooLegLabel: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 14,
    letterSpacing: 0.3,
  },
  vooMetaLine: {
    fontSize: 14,
    lineHeight: 17,
  },
  vooMetaLabel: {
    color: colors.azul,
    fontFamily: fonts.semiBold,
  },
  vooMetaValue: {
    color: colors.azul,
    fontFamily: fonts.regular,
  },
  vooEscalasBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    alignSelf: 'flex-start',
    backgroundColor: '#E7ECF4',
    borderRadius: 8,
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginBottom: 10,
  },
  vooEscalasBadgeText: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 14,
  },
  vooEscalaDivider: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginVertical: 10,
  },
  vooEscalaLine: {
    flex: 1,
    height: 1,
    backgroundColor: colors.cinza,
  },
  vooEscalaChip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    backgroundColor: '#F0F3FA',
    borderRadius: 8,
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  vooEscalaChipText: {
    color: '#4A6592',
    fontFamily: fonts.medium,
    fontSize: 11,
  },
  mapaBtn: {
    backgroundColor: colors.azul,
    borderRadius: 10,
    paddingVertical: 11,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 8,
  },
  mapaBtnText: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 12,
  },
  mapaBtnIcon: {
    width: 12,
    height: 12,
  },
  passageiroHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
  },
  passageiroContainer: {
    marginVertical: 10,
  },
  passageiroSubtitle: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 14,
  },
  passageiroName: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 14,
  },
  passageiroBodyWrap: {
    overflow: 'hidden',
  },
  passageiroBodyMeasure: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  passageiroBody: {
    marginTop: 10,
    gap: 10,
  },
  twoCol: {
    flexDirection: 'row',
    gap: 10,
  },
  twoColItem: {
    flex: 1,
  },
  fieldLabel: {
    color: '#4A6592',
    fontFamily: fonts.regular,
    fontSize: 14,
    marginBottom: 4,
  },
  fieldBox: {
    backgroundColor: colors.background_2,
    borderWidth: 1,
    borderColor: colors.cinza,
    borderRadius: 10,
    paddingVertical: 9,
    paddingHorizontal: 10,
  },
  fieldBoxText: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 13,
  },
  refsField: {
    flex: 1,
  },

  extrasText: {
    color: colors.azul,
    fontFamily: fonts.regular,
    fontSize: 13,
    lineHeight: 19,
  },

  tableHeader: {
    flexDirection: 'row',
    paddingBottom: 6,
  },
  tableRow: {
    flexDirection: 'row',
    paddingVertical: 8,
  },
  tableRowLast: {
    borderBottomWidth: 0,
  },
  tableCellLeft: {
    flex: 1.2,
  },
  tableCellMid: {
    flex: 1,
    alignItems: 'flex-start',
  },
  tableCellRight: {
    flex: 1.2,
    alignItems: 'flex-end',
  },
  tableHeaderText: {
    color: colors.azul,
    fontFamily: fonts.bold,
    fontSize: 14,
  },
  tableValueText: {
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 13,
  },
  valorSection: {
    backgroundColor: colors.branco,
    borderRadius: 16,
    padding: 12,
    gap: 10,
  },
  valorInnerCard: {
    backgroundColor: colors.azul,
    borderRadius: 14,
    padding: 16,
    gap: 6,
  },
  valorAmount: {
    color: colors.branco,
    fontFamily: fonts.regular,
    fontSize: 36,
  },
  valorAmountLabel: {
    color: colors.branco,
    fontFamily: fonts.regular,
    fontSize: 16,
    opacity: 0.9,
    marginBottom: 8,
    marginTop: -10,
  },
  valorPagoLine: {
    color: colors.branco,
    fontFamily: fonts.medium,
    fontSize: 14,
    marginTop: 8,
  },
  valorProgressTrack: {
    height: 20,
    borderRadius: 10,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    marginBottom: 14,
    overflow: 'hidden',
  },
  valorProgressFill: {
    height: '100%',
    backgroundColor: colors.branco,
    borderRadius: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingRight: 4,
  },
  valorProgressDot: {
    width: 14,
    height: 14,
    borderRadius: 8,
    backgroundColor: colors.vermelho,
  },
  valorFaltaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  valorFaltaRowPago: {
    justifyContent: 'flex-start',
  },
  valorPagoStatus: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  valorFaltaLabel: {
    color: colors.branco,
    fontFamily: fonts.regular,
    fontSize: 14,
  },
  valorFaltaBadge: {
    backgroundColor: 'rgba(255, 255, 255, 0.15)',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  valorFaltaBadgeText: {
    color: colors.branco,
    fontFamily: fonts.bold,
    fontSize: 14,
  },

  documentoRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingVertical: 10,
  },
  documentoRowLast: {
    borderBottomWidth: 0,
  },
  documentoBadge: {
    backgroundColor: '#FFE2E0',
    borderRadius: 6,
    paddingVertical: 2,
    paddingHorizontal: 6,
  },
  documentoBadgeText: {
    color: '#E6463B',
    fontFamily: fonts.bold,
    fontSize: 10,
  },
  documentoName: {
    flex: 1,
    color: colors.azul,
    fontFamily: fonts.medium,
    fontSize: 13,
  },
  offlineBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: '#4A6592',
    borderRadius: 10,
    paddingVertical: 8,
    paddingHorizontal: 12,
    marginBottom: 12,
  },
  offlineBannerText: {
    color: '#ffffff',
    fontFamily: fonts.medium,
    fontSize: 12,
    flex: 1,
  },
  syncLabel: {
    textAlign: 'center',
    color: '#9AA8BE',
    fontFamily: fonts.regular,
    fontSize: 11,
    marginTop: 8,
    marginBottom: 16,
  },
});