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

const MOCK_ITEMS = [
  { description: 'Marketing Landing Page Package', qty: 1, unitPrice: 1000, total: 1000 },
  { description: 'Instagram Post Initial Design', qty: 4, unitPrice: 100, total: 400 },
];
const MOCK_SUBTOTAL = 1400;
const MOCK_TAX = 140;
const MOCK_TOTAL = 1540;

export default function ProformaDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <ScrollView className="flex-1 bg-background" contentContainerStyle={{ padding: 16, paddingBottom: 32 }}>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Proforma Request #{id ?? '—'}</CardTitle>
          <CardDescription>Marketing Landing Page Package</CardDescription>
          <Text className="text-muted-foreground mt-1 text-sm">Deadline: Sep 20, 2022 · OPEN</Text>
        </CardHeader>
        <CardContent className="gap-2">
          {MOCK_ITEMS.map((item, i) => (
            <View key={i} className="flex-row justify-between py-2">
              <Text className="text-gray-700">{item.description} × {item.qty}</Text>
              <Text className="font-medium text-gray-900">${item.total.toLocaleString()}</Text>
            </View>
          ))}
          <View className="mt-2 border-t border-border pt-2">
            <View className="flex-row justify-between">
              <Text className="text-muted-foreground">Subtotal</Text>
              <Text className="text-gray-900">${MOCK_SUBTOTAL.toLocaleString()}</Text>
            </View>
            <View className="flex-row justify-between">
              <Text className="text-muted-foreground">Tax (10%)</Text>
              <Text className="text-gray-900">${MOCK_TAX.toLocaleString()}</Text>
            </View>
            <View className="flex-row justify-between">
              <Text className="font-semibold text-gray-900">Total</Text>
              <Text className="font-semibold text-gray-900">${MOCK_TOTAL.toLocaleString()}</Text>
            </View>
          </View>
        </CardContent>
      </Card>

      <Button className="mb-3 bg-primary" onPress={() => {}}>
        <Text className="text-primary-foreground font-medium">Send to contacts</Text>
      </Button>
      <Button variant="outline" onPress={() => router.back()}>
        <Text className="font-medium">Back to list</Text>
      </Button>

      <Text className="text-muted-foreground mt-6 mb-2 text-sm">Submissions (mock)</Text>
      <Card>
        <CardContent className="py-3">
          <Text className="font-medium text-gray-900">Vendor A — $1,450</Text>
          <Text className="text-muted-foreground text-sm">Submitted Sep 15, 2022</Text>
        </CardContent>
      </Card>
    </ScrollView>
  );
}