import { StyleSheet, Text, View } from 'react-native';
import { AppButton } from '../ui/AppButton';
import { colors, radii, shadows, spacing } from '../../constants/theme';
import type { PosReconciliation } from '../../types/pos';
import { formatMoney } from '../../utils/posStock';

type Props = {
  reconciliation: PosReconciliation | null;
  onRefresh: () => void;
};

export function PosSessionDashboard({ reconciliation, onRefresh }: Props) {
  if (!reconciliation) return null;

  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <Text style={styles.title}>Session sales</Text>
        <AppButton label="Refresh" icon="refresh" variant="secondary" onPress={onRefresh} />
      </View>
      <View style={styles.grid}>
        <View style={styles.stat}>
          <Text style={styles.statValue}>{formatMoney(reconciliation.gross_sales)}</Text>
          <Text style={styles.statLabel}>Gross</Text>
        </View>
        <View style={styles.stat}>
          <Text style={styles.statValue}>{reconciliation.sales_count ?? 0}</Text>
          <Text style={styles.statLabel}>Orders</Text>
        </View>
        <View style={styles.stat}>
          <Text style={styles.statValue}>{formatMoney(reconciliation.net_sales)}</Text>
          <Text style={styles.statLabel}>Net</Text>
        </View>
      </View>
      <Text style={styles.muted}>
        Cash {formatMoney(reconciliation.cash_sales)} · Card {formatMoney(reconciliation.card_sales)} · E-wallet{' '}
        {formatMoney(reconciliation.ewallet_sales)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
    borderRadius: radii.lg,
    borderWidth: 1,
    borderColor: colors.border,
    padding: spacing.md,
    marginBottom: spacing.md,
    gap: spacing.sm,
    ...shadows.card,
  },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  title: { fontSize: 16, fontWeight: '700', color: colors.text },
  grid: { flexDirection: 'row', gap: spacing.sm },
  stat: {
    flex: 1,
    backgroundColor: colors.background,
    borderRadius: radii.md,
    padding: spacing.sm,
    alignItems: 'center',
  },
  statValue: { fontSize: 14, fontWeight: '700', color: colors.text },
  statLabel: { fontSize: 11, color: colors.textMuted, marginTop: 2 },
  muted: { fontSize: 12, color: colors.textMuted },
});