import { View, ScrollView, Pressable } from 'react-native';
import { Text } from '@/components/ui/text';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
import { MOCK_PROFORMA } from '@/lib/mock-data';
import { router } from 'expo-router';
import { Plus, Send, FileText, ChevronRight, Calendar } from '@/lib/icons';

const PRIMARY = '#ea580c';

export default function ProformaScreen() {
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <Text className="text-muted-foreground mb-5 text-base">
        Create or select proforma requests and share with contacts via email or SMS.
      </Text>

      <Button className="mb-5 min-h-12 rounded-xl bg-primary" onPress={() => {}}>
        <Plus color="#ffffff" size={20} strokeWidth={2} />
        <Text className="ml-2 text-primary-foreground font-medium">Create new proforma</Text>
      </Button>

      <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">Your proforma requests</Text>
      </View>
      {MOCK_PROFORMA.map((pf) => (
        <Pressable key={pf.id} onPress={() => router.push(`/proforma/${pf.id}`)}>
          <Card className="mb-3 overflow-hidden rounded-xl border border-border bg-white">
            <CardHeader className="pb-2">
              <CardTitle className="text-base">{pf.title}</CardTitle>
              <CardDescription className="mt-0.5">{pf.description}</CardDescription>
              <View className="mt-2 flex-row items-center gap-1.5">
                <Calendar color="#71717a" size={14} strokeWidth={2} />
                <Text className="text-muted-foreground text-xs">Deadline {pf.deadline} · {pf.itemCount} items</Text>
              </View>
            </CardHeader>
            <CardFooter className="flex-row items-center justify-between border-t border-border pt-3">
              <Text className="text-muted-foreground text-sm">Sent to {pf.sentCount} contacts</Text>
              <View className="flex-row items-center gap-1.5">
                <Send color={PRIMARY} size={16} strokeWidth={2} />
                <Text className="text-primary font-medium text-sm">Send to contacts</Text>
                <ChevronRight color="#a1a1aa" size={18} strokeWidth={2} />
              </View>
            </CardFooter>
          </Card>
        </Pressable>
      ))}
    </ScrollView>
  );
}
