import { Link } from 'expo-router';
import { Linking, Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { CustomerFlowNav } from '../components/customer-flow-nav';
import { formatCurrency, useCustomerOrder } from '../src/store/order';
import { getCustomerTheme, useCustomerTheme } from '../src/store/theme';

export default function CustomerPaymentScreen() {
  const { lastOrder, paymentIntent } = useCustomerOrder();
  const { mode } = useCustomerTheme();
  const theme = getCustomerTheme(mode);

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <CustomerFlowNav />
        <View style={[styles.hero, { backgroundColor: theme.surface }]}>
          <Text style={[styles.kicker, { color: theme.accent }]}>Pagamento</Text>
          <Text style={[styles.title, { color: theme.text }]}>Pagamento preparado a partir do pedido real.</Text>
          <Text style={[styles.body, { color: theme.textMuted }]}>
            Se o metodo for PIX, esta tela ja mostra os dados prontos para cobranca do pedido criado na API.
          </Text>
        </View>

        <View style={[styles.card, { backgroundColor: theme.surface, borderColor: theme.cardBorder }]}>
          <Text style={[styles.sectionTitle, { color: theme.text }]}>Total do pedido</Text>
          <Text style={[styles.total, { color: theme.accent }]}>{formatCurrency(lastOrder?.summary.total)}</Text>
          <Text style={[styles.row, { color: theme.textMuted }]}>Subtotal {formatCurrency(lastOrder?.summary.subtotal)}</Text>
          <Text style={[styles.row, { color: theme.textMuted }]}>Entrega {formatCurrency(lastOrder?.summary.deliveryFee)}</Text>
          {Number(lastOrder?.summary.discountAmount ?? 0) > 0 ? (
            <Text style={[styles.row, { color: '#15803D' }]}>Desconto aplicado - {formatCurrency(lastOrder?.summary.discountAmount)}</Text>
          ) : null}
        </View>

        <View style={[styles.card, { backgroundColor: theme.surface, borderColor: theme.cardBorder }]}>
          <Text style={[styles.sectionTitle, { color: theme.text }]}>Pagamento gerado</Text>
          <Text style={[styles.row, { color: theme.textMuted }]}>Metodo {paymentIntent?.paymentMethod ?? 'PIX'}</Text>
          <Text style={[styles.row, { color: theme.textMuted }]}>Provider {paymentIntent?.provider ?? 'Mercado Pago / sandbox'}</Text>
          <Text style={[styles.row, { color: theme.textMuted }]}>Modo {paymentIntent?.mode ?? 'preview'}</Text>
          {paymentIntent?.pix?.qrCodeText ? (
            <View style={[styles.pixBox, { backgroundColor: theme.surfaceMuted }]}>
              <Text style={[styles.pixCode, { color: theme.text }]}>{paymentIntent.pix.qrCodeText}</Text>
            </View>
          ) : null}
          {paymentIntent?.card?.checkoutUrl || paymentIntent?.card?.sandboxCheckoutUrl ? (
            <Pressable
              onPress={() => {
                const url = paymentIntent?.card?.checkoutUrl ?? paymentIntent?.card?.sandboxCheckoutUrl;
                if (url) {
                  void Linking.openURL(url);
                }
              }}
              style={[styles.checkoutButton, { backgroundColor: theme.accent }]}
            >
              <Text style={[styles.checkoutButtonText, { color: theme.accentText }]}>Abrir checkout do cartao</Text>
            </Pressable>
          ) : null}
        </View>

        <Link href={lastOrder ? `/order-tracking?orderId=${lastOrder.id}` : '/orders'} style={[styles.primaryButton, { backgroundColor: theme.accent, color: theme.accentText }]}>
          Acompanhar pedido
        </Link>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1 },
  content: { padding: 16, gap: 12, paddingBottom: 22 },
  hero: { borderRadius: 20, padding: 16 },
  kicker: { fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', fontWeight: '800' },
  title: { marginTop: 10, fontSize: 23, lineHeight: 27, fontWeight: '900' },
  body: { marginTop: 10, fontSize: 13, lineHeight: 19, fontWeight: '600' },
  card: { borderRadius: 18, padding: 15, borderWidth: 1 },
  sectionTitle: { fontSize: 17, fontWeight: '900' },
  total: { marginTop: 8, fontSize: 22, fontWeight: '900' },
  row: { marginTop: 8, fontSize: 13, fontWeight: '600' },
  pixBox: { marginTop: 12, borderRadius: 14, padding: 12 },
  pixCode: { fontSize: 11, lineHeight: 16, fontWeight: '700' },
  checkoutButton: { marginTop: 12, borderRadius: 999, paddingHorizontal: 14, paddingVertical: 12 },
  checkoutButtonText: { textAlign: 'center', fontSize: 12, fontWeight: '800' },
  primaryButton: { borderRadius: 999, textAlign: 'center', paddingHorizontal: 16, paddingVertical: 12, fontWeight: '800', overflow: 'hidden', marginBottom: 10 },
});