import { Modal, Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { useApp } from '../context/AppContext';
import { ShippingLabelView } from './ShippingLabelView';

export function LabelPreviewModal() {
  const {
    labelPreviewVisible,
    setLabelPreviewVisible,
    labelPrintData,
    setLabelPrintData,
  } = useApp();

  return (
    <Modal
      visible={labelPreviewVisible}
      animationType="slide"
      onRequestClose={() => {
        setLabelPreviewVisible(false);
        setLabelPrintData(null);
      }}
    >
      <View style={{ flex: 1, backgroundColor: '#f0f0f0' }}>
        <View style={{
          backgroundColor: '#8e44ad',
          paddingTop: Platform.OS === 'android' ? 40 : 56,
          paddingBottom: 14,
          paddingHorizontal: 16,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>Label Preview</Text>
          <TouchableOpacity onPress={() => { setLabelPreviewVisible(false); setLabelPrintData(null); }}>
            <Text style={{ color: '#fff', fontSize: 16, fontWeight: '600' }}>✕ Close</Text>
          </TouchableOpacity>
        </View>
        <ScrollView contentContainerStyle={{ padding: 12 }}>
          {labelPrintData ? (
            <ShippingLabelView {...labelPrintData} />
          ) : (
            <Text style={{ color: '#888', textAlign: 'center', marginTop: 40 }}>Loading…</Text>
          )}
        </ScrollView>
      </View>
    </Modal>
  );
}
