import CircleCheckIcon from '@/assets/icons/circle-check-solid.svg';
import { colors } from '@/assets/styles/colors';
import { ReservaData } from '@/assets/types';
import styles from '@/styles/screens/reserva/detail.styles';
import { Text, View } from 'react-native';

type Props = {
  reserva: ReservaData;
};

const formatEuro = (value: string) => {
  const n = parseFloat(value || '0');
  return `€${n.toLocaleString('pt-PT', {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  })}`;
};

export function ValorReservaCard({ reserva }: Props) {
  const total = parseFloat(reserva.precoTotalFinal || '0');
  const pago = parseFloat(reserva.valorPago || '0');
  const emFalta = parseFloat(reserva.valorAPagar || '0');
  const isFullyPaid = emFalta <= 0;
  const percent = isFullyPaid
    ? 100
    : total > 0
      ? Math.min(100, Math.max(0, (pago / total) * 100))
      : 0;

  return (
    <View style={styles.valorSection}>
      <Text style={styles.sectionTitle}>Valor da Reserva</Text>

      <View style={styles.valorInnerCard}>
        <Text style={styles.valorAmount}>{formatEuro(reserva.precoTotalFinal)}</Text>
        <Text style={styles.valorAmountLabel}>Valor Total</Text>

        <Text style={styles.valorPagoLine}>Pago {formatEuro(reserva.valorPago)}</Text>

        <View style={styles.valorProgressTrack}>
          {percent > 0 && (
            <View
              style={[
                styles.valorProgressFill,
                { width: `${percent}%`, minWidth: 14 },
              ]}>
              <View style={styles.valorProgressDot} />
            </View>
          )}
        </View>

        <View style={[styles.valorFaltaRow, isFullyPaid && styles.valorFaltaRowPago]}>
          {isFullyPaid ? (
            <View style={styles.valorPagoStatus}>
              <CircleCheckIcon width={18} height={18} fill={colors.success} />
              <Text style={styles.valorFaltaLabel}>Pago</Text>
            </View>
          ) : (
            <>
              <Text style={styles.valorFaltaLabel}>Em Falta</Text>
              <View style={styles.valorFaltaBadge}>
                <Text style={styles.valorFaltaBadgeText}>
                  {formatEuro(reserva.valorAPagar)}
                </Text>
              </View>
            </>
          )}
        </View>
      </View>
    </View>
  );
}