/**
 * Revisión del outbox: operaciones en conflicto o con error. Permite reintentar
 * (volver a encolar) o descartar. Los conflictos muestran el valor del servidor.
 */
import { useFocusEffect } from '@react-navigation/native';
import React, { useCallback, useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { discardOp, getProblemOps, ProblemOp, retryOp } from '../db/outbox';
import { Badge, Card, COLORS, EmptyState, PrimaryButton } from '../ui/components';

export function OutboxScreen() {
  const [ops, setOps] = useState<ProblemOp[]>([]);

  const load = useCallback(() => {
    void getProblemOps().then(setOps);
  }, []);

  useFocusEffect(load);

  const onRetry = useCallback(
    async (uuid: string) => {
      await retryOp(uuid);
      load();
    },
    [load],
  );
  const onDiscard = useCallback(
    async (uuid: string) => {
      await discardOp(uuid);
      load();
    },
    [load],
  );

  return (
    <ScrollView contentContainerStyle={styles.body}>
      {ops.length === 0 && <EmptyState text="Nada pendiente de revisión." />}
      {ops.map((o) => (
        <Card key={o.uuid} style={styles.card}>
          <View style={styles.headerRow}>
            <Text style={styles.entity}>
              {o.entity}.{o.op}
            </Text>
            <Badge
              label={o.status}
              color={o.status === 'conflict' ? COLORS.warn : COLORS.danger}
            />
          </View>
          {o.error ? <Text style={styles.error}>{o.error}</Text> : null}
          {o.server_payload ? (
            <Text style={styles.mono} numberOfLines={6}>
              Servidor: {o.server_payload}
            </Text>
          ) : null}
          <Text style={styles.mono} numberOfLines={6}>
            Local: {o.data}
          </Text>
          <View style={styles.actions}>
            <View style={{ flex: 1 }}>
              <PrimaryButton title="Reintentar" variant="ghost" onPress={() => void onRetry(o.uuid)} />
            </View>
            <View style={{ flex: 1 }}>
              <PrimaryButton title="Descartar" variant="danger" onPress={() => void onDiscard(o.uuid)} />
            </View>
          </View>
        </Card>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  body: { padding: 16, gap: 12 },
  card: { gap: 8 },
  headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  entity: { fontSize: 15, fontWeight: '700' },
  error: { color: COLORS.danger, fontSize: 13 },
  mono: { fontSize: 12, color: COLORS.muted, fontFamily: 'monospace' },
  actions: { flexDirection: 'row', gap: 8, marginTop: 4 },
});