import React, { useEffect, useState } from 'react';
import {
  View, Text, FlatList, TouchableOpacity, TextInput,
  StyleSheet, Alert, Vibration,
} from 'react-native';
import { useQuery } from 'react-query';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import api from '../api/client';
import { useSyncStore } from '../store/sync';
import { printReceipt } from '../native/printer';

export default function POSScreen() {
  const [query, setQuery] = useState('');
  const [cart, setCart] = useState<any[]>([]);
  const [customer, setCustomer] = useState<any>(null);
  const { enqueueSale, online } = useSyncStore();

  const { data: products, refetch } = useQuery(
    ['products', query],
    async () => (await api.get('/products', { params: { q: query } })).data.data || [],
    { enabled: query.length > 0 }
  );

  const addToCart = (p: any) => {
    Vibration.vibrate(20);
    setCart(prev => {
      const existing = prev.find(i => i.product_id === p.id);
      if (existing) return prev.map(i => i.product_id === p.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { product_id: p.id, name: p.name, price: p.price, qty: 1 }];
    });
  };

  const total = cart.reduce((s, i) => s + i.price * i.qty, 0);

  const checkout = async () => {
    if (!cart.length) return Alert.alert('Cart empty');
    const payload = {
      items: cart.map(i => ({ product_id: i.product_id, qty: i.qty })),
      customer_id: customer?.id || null,
      payment_method: 'cash',
      paid: total,
    };

    if (!online) {
      await enqueueSale({ payload });
      Alert.alert('Offline', 'Sale queued. Will sync automatically.');
      setCart([]);
      return;
    }

    try {
      const res = await api.post('/sales', payload);
      await printReceipt(res.data.sale);
      setCart([]);
      Alert.alert('Success', `Invoice ${res.data.sale.invoice_no}`);
    } catch (err: any) {
      Alert.alert('Error', err.response?.data?.message || 'Checkout failed');
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TextInput
          placeholder="Scan or search..."
          value={query}
          onChangeText={setQuery}
          onSubmitEditing={() => refetch()}
          style={styles.input}
        />
        <TouchableOpacity style={styles.scanBtn}>
          <Icon name="barcode-scan" size={24} color="#fff" />
        </TouchableOpacity>
      </View>

      <FlatList
        data={products || []}
        numColumns={2}
        keyExtractor={(item) => String(item.id)}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.productCard} onPress={() => addToCart(item)}>
            <Text style={styles.productName} numberOfLines={2}>{item.name}</Text>
            <Text style={styles.productPrice}>${Number(item.price).toFixed(2)}</Text>
            <Text style={styles.productStock}>Stock: {item.stock_qty}</Text>
          </TouchableOpacity>
        )}
        contentContainerStyle={{ padding: 8 }}
      />

      <View style={styles.cartBar}>
        <View>
          <Text style={styles.cartInfo}>{cart.length} items · ${total.toFixed(2)}</Text>
          {!online && <Text style={styles.offline}>⚡ Offline mode</Text>}
        </View>
        <TouchableOpacity style={styles.checkoutBtn} onPress={checkout}>
          <Text style={styles.checkoutText}>Charge</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f5f7fb' },
  header: { flexDirection: 'row', padding: 8, backgroundColor: '#fff' },
  input: { flex: 1, backgroundColor: '#f0f2f6', borderRadius: 8, paddingHorizontal: 12, height: 44 },
  scanBtn: { backgroundColor: '#0d6efd', padding: 12, borderRadius: 8, marginLeft: 8 },
  productCard: { flex: 1, margin: 4, padding: 12, backgroundColor: '#fff', borderRadius: 8 },
  productName: { fontWeight: '600', marginBottom: 6 },
  productPrice: { color: '#0d6efd', fontWeight: 'bold', fontSize: 16 },
  productStock: { fontSize: 12, color: '#666' },
  cartBar: { flexDirection: 'row', padding: 16, backgroundColor: '#fff', alignItems: 'center' },
  cartInfo: { fontSize: 16, fontWeight: '600' },
  offline: { color: '#f39c12', fontSize: 12 },
  checkoutBtn: { backgroundColor: '#198754', padding: 16, borderRadius: 8, marginLeft: 'auto' },
  checkoutText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});