import { View, ScrollView } from 'react-native';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function ScanScreen() {
  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
      <Text className="text-muted-foreground mb-4">
        Capture paper or digital invoices with your camera. We'll extract vendor, amount, date, and line items.
      </Text>

      <Card className="mb-4 border-2 border-dashed border-border">
        <CardContent className="items-center justify-center py-16">
          <View className="mb-4 h-20 w-20 items-center justify-center rounded-full bg-primary/10">
            <Text className="text-4xl">📷</Text>
          </View>
          <Text className="mb-2 text-center text-lg font-semibold text-gray-900">Scan invoice</Text>
          <Text className="text-muted-foreground mb-4 text-center text-sm">
            Tap below to open camera and capture an invoice
          </Text>
          <Button className="bg-primary min-w-[200]">
            <Text className="text-primary-foreground font-medium">Open camera</Text>
          </Button>
        </CardContent>
      </Card>

      <Text className="text-muted-foreground mb-2 text-sm">Recent scans</Text>
      <Card className="mb-2">
        <CardContent className="py-3">
          <View className="flex-row items-center justify-between">
            <View>
              <Text className="font-medium text-gray-900">Acme Corp - Invoice #101</Text>
              <Text className="text-muted-foreground text-sm">Scanned Sep 12, 2022 · $1,240</Text>
            </View>
            <View className="rounded-full bg-amber-500/20 px-2 py-0.5">
              <Text className="text-xs font-medium text-amber-700">Pending</Text>
            </View>
          </View>
        </CardContent>
      </Card>
      <Card className="mb-2">
        <CardContent className="py-3">
          <View className="flex-row items-center justify-between">
            <View>
              <Text className="font-medium text-gray-900">Tech Supplies Ltd - Invoice #88</Text>
              <Text className="text-muted-foreground text-sm">Scanned Sep 11, 2022 · $890</Text>
            </View>
            <View className="rounded-full bg-emerald-500/20 px-2 py-0.5">
              <Text className="text-xs font-medium text-emerald-700">Saved</Text>
            </View>
          </View>
        </CardContent>
      </Card>
    </ScrollView>
  );
}