import { View, ScrollView } from 'react-native';
import { router } from 'expo-router';
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';
import { ScanLine, Link2, CheckCircle2, Wallet, ChevronRight } from '@/lib/icons';

const PRIMARY = '#ea580c';

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-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <Text className="text-muted-foreground mb-5 text-base">
        Match payment SMS (e.g. bank or Telebirr) to invoices for quick reconciliation.
      </Text>

      <Button className="mb-5 min-h-12 rounded-xl bg-primary">
        <ScanLine color="#ffffff" size={20} strokeWidth={2} />
        <Text className="ml-2 text-primary-foreground font-medium">Scan SMS now</Text>
      </Button>

      <View className="mb-3 flex-row items-center gap-2">
        <Link2 color="#71717a" size={18} strokeWidth={2} />
        <Text className="text-muted-foreground text-sm font-medium">Pending match</Text>
      </View>
      {pending.map((pay) => (
        <Card key={pay.id} className="mb-2.5 overflow-hidden rounded-xl border-2 border-amber-500/30 bg-white">
          <CardContent className="flex-row items-center py-4 pl-4 pr-3">
            <View className="mr-3 rounded-xl bg-primary/10 p-2">
              <Wallet color={PRIMARY} size={22} strokeWidth={2} />
            </View>
            <View className="flex-1">
              <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" className="rounded-lg" onPress={() => router.push(`/payments/${pay.id}`)}>
              <Text className="font-medium">Match</Text>
            </Button>
          </CardContent>
        </Card>
      ))}

      <View className="mb-3 mt-6 flex-row items-center gap-2">
        <CheckCircle2 color="#059669" size={18} strokeWidth={2} />
        <Text className="text-muted-foreground text-sm font-medium">Reconciled</Text>
      </View>
      {matched.map((pay) => (
        <Card key={pay.id} className="mb-2.5 overflow-hidden rounded-xl border border-border bg-white">
          <CardContent className="flex-row items-center py-4 pl-4 pr-3">
            <View className="mr-3 rounded-xl bg-emerald-500/15 p-2">
              <CheckCircle2 color="#059669" size={22} strokeWidth={2} />
            </View>
            <View className="flex-1">
              <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.5 py-1">
              <Text className="text-xs font-medium text-emerald-700">Matched</Text>
            </View>
            <ChevronRight className="ml-2 text-muted-foreground" color="#71717a" size={20} strokeWidth={2} />
          </CardContent>
        </Card>
      ))}
    </ScrollView>
  );
}