import { Image, Text, View } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { BarcodeComponent } from './BarcodeComponent';

export function ShippingLabelView({ order, sender, qrString, satchelLabel = 'A5', isTest = false }) {
  const raw = String(order?.original_address || order?.address || '');
  const parts = raw.split(',').map(p => p.trim()).filter(Boolean);
  const addr = {
    building: parts[0] || '',
    street:   parts[1] || parts[0] || '',
    suburb:   parts[2] || '',
    city:     parts[3] || '',
    postcode: String(order?.postcode || ''),
    country:  String(order?.country || 'NZ'),
  };
  const date = new Date().toLocaleDateString('en-NZ', { day: '2-digit', month: '2-digit', year: 'numeric' });
  const safeQr = qrString || '||||||||';
  const trackingNum = isTest
    ? '00794210392730860225'
    : String(order?.tracking_number || order?.consignment_id || order?.id || 'PENDING');
  const orderRef = String(order?.id || '').toUpperCase();
  const orderNum = String(order?.name || '').replace(/^#/, '');

  return (
    <View style={{ width: 580, backgroundColor: '#fff', borderWidth: 1, borderColor: '#000' }}>

      {/* Header: Afrihair logo (left) + black block (right) */}
      <View style={{ flexDirection: 'row', height: 110, borderBottomWidth: 1, borderColor: '#000' }}>
        <View style={{ flex: 1.8, padding: 10, justifyContent: 'center', backgroundColor: '#fff' }}>
          <Image
            //source={require('../../app/assets/images/AfrihairLogo.png')}
            source={require('../../assets/images/AfrihairLogo.png')}
            style={{ width: '100%', height: 85, resizeMode: 'contain' }}
          />
        </View>
        <View style={{ flex: 1.2, backgroundColor: '#000' }} />
      </View>

      {/* Tracking number + barcode */}
      <View style={{ paddingVertical: 10, paddingHorizontal: 15, borderBottomWidth: 1, borderColor: '#000', alignItems: 'center' }}>
        <Text style={{ fontSize: 16, letterSpacing: 1, color: '#000', marginBottom: 8, fontWeight: '500' }}>{trackingNum}</Text>
        <BarcodeComponent value={trackingNum} height={60} />
      </View>

      {/* Recipient (left) + Ref / Order # / QR code (right) */}
      <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderColor: '#000', minHeight: 170 }}>
        <View style={{ flex: 1.8, padding: 12 }}>
          <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#000', marginBottom: 4 }}>
            {String(order?.customer || '')}
          </Text>
          {addr.building && addr.building !== addr.street ? (
            <Text style={{ fontSize: 11, color: '#000', marginBottom: 2 }}>{addr.building}</Text>
          ) : null}
          <Text style={{ fontSize: 11, color: '#000', marginBottom: 2 }}>{addr.street}</Text>
          <Text style={{ fontSize: 11, color: '#000', marginBottom: 6 }}>
            {[addr.suburb, addr.suburb !== addr.city ? addr.city : null, addr.postcode].filter(Boolean).join(', ')}
          </Text>
          {order?.phone ? (
            <Text style={{ fontSize: 14, fontWeight: 'bold', color: '#000', marginBottom: 4 }}>
              {String(order.phone)}
            </Text>
          ) : null}
          <Text style={{ fontSize: 10, fontWeight: 'bold', color: '#000', marginBottom: 1 }}>Special instruction:</Text>
          {order?.note ? (
            <Text style={{ fontSize: 10, color: '#000' }}>{String(order.note)}</Text>
          ) : (
            <Text style={{ fontSize: 10, color: '#000' }}>&nbsp;</Text>
          )}
        </View>
        <View style={{ flex: 1.2, padding: 10, alignItems: 'center', borderLeftWidth: 1, borderColor: '#000' }}>
          <Text style={{ fontSize: 9, fontWeight: '700', color: '#000', textAlign: 'right', marginBottom: 2 }}>
            Ref: {orderRef}
          </Text>
          <Text style={{ fontSize: 9, fontWeight: '700', color: '#000', textAlign: 'right', marginBottom: 6 }}>
            Order #: {orderNum}
          </Text>
          <QRCode value={safeQr} size={100} />
        </View>
      </View>

      {/* Sender (left) + CourierIT logo (right) */}
      <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderColor: '#000', padding: 12, alignItems: 'center' }}>
        <View style={{ flex: 1.8 }}>
          <Text style={{ fontSize: 10, fontWeight: 'bold', color: '#000', marginBottom: 3 }}>Sender:</Text>
          <Text style={{ fontSize: 10, color: '#000', marginBottom: 1 }}>{String(sender?.company || 'Afrihair Ltd')}</Text>
          {sender?.contactName ? (
            <Text style={{ fontSize: 10, color: '#000', marginBottom: 1 }}>{String(sender.contactName)}</Text>
          ) : null}
          <Text style={{ fontSize: 10, color: '#000', marginBottom: 1 }}>{String(sender?.streetAddress || '247 Cuba Street')}</Text>
          <Text style={{ fontSize: 10, color: '#000' }}>
            {`${sender?.city || 'Palmerston North'} ${sender?.postCode || '4410'}`.trim()}
          </Text>
        </View>
        <View style={{ flex: 1.2, alignItems: 'center', justifyContent: 'center' }}>
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <View style={{ width: 42, height: 42, borderRadius: 21, borderWidth: 2.5, borderColor: '#000', justifyContent: 'center', alignItems: 'center', marginRight: 5 }}>
              <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: '#000' }} />
            </View>
            <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#000' }}>Courierit</Text>
          </View>
        </View>
      </View>

      {/* Footer */}
      <View style={{ padding: 10, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
        <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>Satchel Size: {satchelLabel}</Text>
        <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>{date}</Text>
        <Text style={{ fontSize: 12, fontWeight: 'bold', color: '#000' }}>1 of 1</Text>
      </View>

    </View>
  );
}
