import { View, ScrollView } from 'react-native';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { MOCK_PAYMENTS } from '@/lib/mock-data';

export default function PaymentsScreen() {
  const matched = MOCK_PAYMENTS.filter((p) => p.matched);
  const pending = MOCK_PAYMENTS.filter((p) => !p.matched);

  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
      <Text className="text-muted-foreground mb-4">
        Match payment SMS (e.g. bank or Telebirr) to invoices for quick reconciliation.
      </Text>

      <Button className="mb-4 bg-primary">
        <Text className="text-primary-foreground font-medium">Scan SMS now</Text>
      </Button>

      <Text className="text-muted-foreground mb-2 text-sm">Pending match</Text>
      {pending.map((pay) => (
        <Card key={pay.id} className="mb-2 border-amber-500/30">
          <CardContent className="py-3">
            <View className="flex-row items-center justify-between">
              <View>
                <Text className="font-semibold text-gray-900">${pay.amount.toLocaleString()}</Text>
                <Text className="text-muted-foreground text-sm">{pay.source} · {pay.date}</Text>
              </View>
              <Button variant="outline" size="sm">
                <Text className="font-medium">Match to invoice</Text>
              </Button>
            </View>
          </CardContent>
        </Card>
      ))}

      <Text className="text-muted-foreground mb-2 mt-4 text-sm">Reconciled</Text>
      {matched.map((pay) => (
        <Card key={pay.id} className="mb-2">
          <CardContent className="py-3">
            <View className="flex-row items-center justify-between">
              <View>
                <Text className="font-semibold text-gray-900">${pay.amount.toLocaleString()}</Text>
                <Text className="text-muted-foreground text-sm">
                  {pay.source} · {pay.date} {pay.reference && `· ${pay.reference}`}
                </Text>
              </View>
              <View className="rounded-full bg-emerald-500/20 px-2 py-0.5">
                <Text className="text-xs font-medium text-emerald-700">Matched</Text>
              </View>
            </View>
          </CardContent>
        </Card>
      ))}
    </ScrollView>
  );
}
