import { Modal, ScrollView, Share, StyleSheet, Text, View } from 'react-native';
import * as Clipboard from 'expo-clipboard';
import { AppButton } from '../ui/AppButton';
import { colors, radii, spacing } from '../../constants/theme';
import type { PosReceiptData } from '../../types/pos';
import { buildReceiptText } from '../../utils/posReceipt';
import { formatMoney } from '../../utils/posStock';

type Props = {
  visible: boolean;
  receipt: PosReceiptData | null;
  clinicName?: string;
  onClose: () => void;
};

export function PosReceiptModal({ visible, receipt, clinicName = 'Clinic', onClose }: Props) {
  if (!receipt) return null;

  const order = receipt.order;

  async function shareReceipt() {
    const text = buildReceiptText(receipt!, clinicName);
    try {
      await Share.share({ message: text, title: `Receipt ${order.order_number}` });
    } catch {
      await Clipboard.setStringAsync(text);
    }
  }

  async function copyReceipt() {
    await Clipboard.setStringAsync(buildReceiptText(receipt!, clinicName));
  }

  return (
    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
      <View style={styles.modal}>
        <Text style={styles.title}>Receipt</Text>
        <ScrollView style={styles.scroll}>
          <Text style={styles.clinic}>{clinicName}</Text>
          <Text style={styles.subtitle}>Official receipt</Text>
          <Text style={styles.line}>Order: {order.order_number}</Text>
          {order.customer_display ? <Text style={styles.line}>Customer: {order.customer_display}</Text> : null}
          {order.patient_display ? <Text style={styles.line}>Patient: {order.patient_display}</Text> : null}
          <View style={styles.divider} />
          {(receipt.lines || []).map((line) => (
            <View key={line.id} style={styles.itemRow}>
              <Text style={styles.itemName}>{line.name}</Text>
              <Text style={styles.itemQty}>
                {line.quantity} × {formatMoney(line.unit_price)} = {formatMoney(line.line_total)}
              </Text>
            </View>
          ))}
          <View style={styles.divider} />
          <Text style={styles.line}>Subtotal: {formatMoney(order.subtotal)}</Text>
          {Number(order.discount) > 0 ? (
            <Text style={styles.line}>
              {order.discount_type === 'senior_citizen'
                ? 'Senior Citizen discount (20%)'
                : order.discount_type === 'pwd'
                  ? 'PWD discount (20%)'
                  : 'Discount'}: -{formatMoney(order.discount)}
            </Text>
          ) : null}
          {order.sc_pwd_id_number ? (
            <Text style={styles.line}>
              {order.sc_pwd_type === 'pwd' || order.discount_type === 'pwd' ? 'PWD ID' : 'Senior Citizen ID'}: {order.sc_pwd_id_number}
            </Text>
          ) : null}
          <Text style={styles.line}>
            {order.sc_pwd_type || order.discount_type === 'senior_citizen' || order.discount_type === 'pwd'
              ? 'VAT (exempt)'
              : 'Tax'}: {formatMoney(order.tax_amount)}
          </Text>
          <Text style={styles.total}>Total: {formatMoney(order.total)}</Text>
          {(receipt.payments || []).map((p) => (
            <Text key={p.id} style={styles.line}>
              {p.payment_mode}: {formatMoney(p.amount)}
            </Text>
          ))}
          <Text style={styles.muted}>{new Date().toLocaleString()}</Text>
        </ScrollView>
        <View style={styles.actions}>
          <AppButton label="Share" icon="share" onPress={shareReceipt} />
          <AppButton label="Copy" icon="copy" variant="secondary" onPress={copyReceipt} />
          <AppButton label="Close" icon="close" variant="secondary" onPress={onClose} />
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modal: { flex: 1, backgroundColor: colors.background, padding: spacing.lg },
  title: { fontSize: 20, fontWeight: '700', color: colors.text, marginBottom: spacing.md },
  scroll: { flex: 1 },
  clinic: { fontSize: 18, fontWeight: '700', textAlign: 'center', color: colors.text },
  subtitle: { textAlign: 'center', color: colors.textMuted, marginBottom: spacing.md },
  line: { fontSize: 14, color: colors.text, marginBottom: 4 },
  itemRow: { marginBottom: spacing.sm },
  itemName: { fontWeight: '600', color: colors.text },
  itemQty: { fontSize: 13, color: colors.textMuted },
  divider: { height: 1, backgroundColor: colors.border, marginVertical: spacing.sm },
  total: { fontSize: 16, fontWeight: '700', color: colors.primary, marginVertical: spacing.sm },
  muted: { fontSize: 12, color: colors.textMuted, marginTop: spacing.md },
  actions: { gap: spacing.sm, paddingTop: spacing.md },
});