import { View, ScrollView, Pressable } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { FileText, ChevronRight, FolderOpen, Upload } from "@/lib/icons";
import { MOCK_DOCUMENTS } from "@/lib/mock-data";

const PRIMARY = "#ea580c";

export default function DocumentsScreen() {
  const nav = useSirouRouter<AppRoutes>();
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <View className="mb-4 flex-row items-center gap-2">
        <FolderOpen color="#18181b" size={22} strokeWidth={2} />
        <Text className="text-xl font-semibold text-gray-900">Documents</Text>
      </View>
      <Text className="text-muted-foreground mb-5 text-sm">
        Uploaded invoices, scans, and attachments. Synced with your account.
      </Text>

      <Button
        variant="outline"
        className="mb-5 min-h-12 rounded-xl border-border"
        onPress={() => {}}
      >
        <Upload color={PRIMARY} size={20} strokeWidth={2} />
        <Text className="ml-2 font-medium text-gray-700">Upload document</Text>
      </Button>

      {MOCK_DOCUMENTS.map((d) => (
        <Card
          key={d.id}
          className="mb-2.5 overflow-hidden rounded-xl border border-border bg-white"
        >
          <Pressable>
            <CardContent className="flex-row items-center py-4 pl-4 pr-3">
              <View className="mr-3 rounded-xl bg-primary/10 p-2">
                <FileText color={PRIMARY} size={22} strokeWidth={2} />
              </View>
              <View className="flex-1">
                <Text className="font-medium text-gray-900" numberOfLines={1}>
                  {d.name}
                </Text>
                <Text className="text-muted-foreground mt-0.5 text-sm">
                  {d.size} · {d.uploadedAt}
                </Text>
              </View>
              <ChevronRight color="#71717a" size={20} strokeWidth={2} />
            </CardContent>
          </Pressable>
        </Card>
      ))}

      <Button
        variant="outline"
        className="mt-4 rounded-xl border-border"
        onPress={() => nav.back()}
      >
        <Text className="font-medium">Back</Text>
      </Button>
    </ScrollView>
  );
}