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 { Camera, FileText, ChevronRight } from '@/lib/icons';

const PRIMARY = '#ea580c';

export default function ScanScreen() {
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <Text className="text-muted-foreground mb-5 text-base">
        Capture paper or digital invoices with your camera. We'll extract vendor, amount, date, and line items.
      </Text>

      <Card className="mb-5 overflow-hidden rounded-2xl border-2 border-dashed border-border bg-white">
        <CardContent className="items-center justify-center py-14">
          <View className="mb-5 h-24 w-24 items-center justify-center rounded-full bg-primary/10">
            <Camera color={PRIMARY} size={40} strokeWidth={2} />
          </View>
          <Text className="mb-2 text-center text-lg font-semibold text-gray-900">Scan invoice</Text>
          <Text className="text-muted-foreground mb-6 text-center text-sm">
            Tap below to open camera and capture an invoice
          </Text>
          <Button className="min-h-12 rounded-xl bg-primary px-8">
            <Camera color="#ffffff" size={20} strokeWidth={2} />
            <Text className="ml-2 text-primary-foreground font-medium">Open camera</Text>
          </Button>
        </CardContent>
      </Card>

      <View className="mb-3 flex-row items-center gap-2">
        <FileText color="#71717a" size={18} strokeWidth={2} />
        <Text className="text-muted-foreground text-sm font-medium">Recent scans</Text>
      </View>
      <Card 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="flex-1">
            <Text className="font-medium text-gray-900">Acme Corp - Invoice #101</Text>
            <Text className="text-muted-foreground mt-0.5 text-sm">Scanned Sep 12, 2022 · $1,240</Text>
          </View>
          <View className="rounded-full bg-amber-500/20 px-2.5 py-1">
            <Text className="text-xs font-medium text-amber-700">Pending</Text>
          </View>
          <ChevronRight className="ml-2 text-muted-foreground" color="#71717a" size={20} strokeWidth={2} />
        </CardContent>
      </Card>
      <Card 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="flex-1">
            <Text className="font-medium text-gray-900">Tech Supplies Ltd - Invoice #88</Text>
            <Text className="text-muted-foreground mt-0.5 text-sm">Scanned Sep 11, 2022 · $890</Text>
          </View>
          <View className="rounded-full bg-emerald-500/20 px-2.5 py-1">
            <Text className="text-xs font-medium text-emerald-700">Saved</Text>
          </View>
          <ChevronRight className="ml-2 text-muted-foreground" color="#71717a" size={20} strokeWidth={2} />
        </CardContent>
      </Card>
    </ScrollView>
  );
}