import { View, ScrollView, Pressable } 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 { FileText, Download, ChevronRight, BarChart3 } from '@/lib/icons';
import { MOCK_REPORTS } from '@/lib/mock-data';

const PRIMARY = '#ea580c';

export default function ReportsScreen() {
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <View className="mb-4 flex-row items-center gap-2">
        <BarChart3 color="#18181b" size={22} strokeWidth={2} />
        <Text className="text-xl font-semibold text-gray-900">Reports</Text>
      </View>
      <Text className="text-muted-foreground mb-5 text-sm">
        Monthly reports and PDF exports. Generate from the web app or view here.
      </Text>

      {MOCK_REPORTS.map((r) => (
        <Card key={r.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-semibold text-gray-900">{r.title}</Text>
                <Text className="text-muted-foreground mt-0.5 text-sm">{r.period}</Text>
                <Text className="text-muted-foreground mt-0.5 text-xs">Generated {r.generatedAt}</Text>
              </View>
              <View className="flex-row items-center gap-2">
                <Pressable className="rounded-lg bg-primary/10 p-2">
                  <Download color={PRIMARY} size={18} strokeWidth={2} />
                </Pressable>
                <ChevronRight color="#71717a" size={20} strokeWidth={2} />
              </View>
            </CardContent>
          </Pressable>
        </Card>
      ))}

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