Yaltopia-Tickets-App/app/proforma/[id].tsx

import React from "react";
import { View, ScrollView, Pressable } from "react-native";
import { useLocalSearchParams, router, Stack } from "expo-router";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  ArrowLeft,
  DraftingCompass,
  Clock,
  Tag,
  Send,
  ExternalLink,
  ChevronRight,
  CheckCircle2,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";

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 (
    <ScreenWrapper className="bg-background">
      <Stack.Screen options={{ headerShown: false }} />

      <View className="px-6 pt-4 flex-row justify-between items-center">
        <Pressable
          onPress={() => router.back()}
          className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
        >
          <ArrowLeft color="#0f172a" size={20} />
        </Pressable>
        <Text variant="h4" className="text-foreground font-semibold">
          Proforma
        </Text>
        <Pressable className="h-9 w-9 rounded-[6px] bg-card items-center justify-center border border-border">
          <ExternalLink className="text-foreground" color="#000" size={17} />
        </Pressable>
      </View>
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 16, paddingBottom: 120 }}
        showsVerticalScrollIndicator={false}
      >
        <Card className=" overflow-hidden rounded-[6px] border-0 bg-primary">
          <View className="p-5">
            <View className="flex-row items-center justify-between mb-3">
              <View className="bg-white/20 p-1.5 rounded-[6px]">
                <DraftingCompass color="white" size={16} strokeWidth={2.5} />
              </View>
              <View className="bg-amber-500/20 px-3 py-1 rounded-[6px] border border-white/10">
                <Text className={`text-[10px] font-bold text-white`}>
                  Open Request
                </Text>
              </View>
            </View>

            <Text variant="small" className="text-white/70 mb-0.5">
              Target Package
            </Text>
            <Text variant="h3" className="text-white font-bold mb-3">
              Marketing Landing Page
            </Text>

            <View className="flex-row items-center gap-3 border-t border-white/40 pt-3">
              <View className="flex-row items-center gap-1.5">
                <Text className="text-white/90 text-xs font-semibold">
                  Expires in 5 days
                </Text>
              </View>
              <View className="h-3 w-[1px] bg-white/60" />
              <Text className="text-white/90 text-xs font-semibold">
                REQ-{id || "002"}
              </Text>
            </View>
          </View>
        </Card>

        <Card className="bg-card rounded-[6px] mb-4">
          <View className="p-4">
            <View className="flex-row items-center gap-2">
              <Text variant="small" className="font-semibold">
                Line Items
              </Text>
            </View>

            {MOCK_ITEMS.map((item, i) => (
              <View
                key={i}
                className={`flex-row justify-between py-3 ${i < MOCK_ITEMS.length - 1 ? "border-b border-border/40" : ""}`}
              >
                <View className="flex-1 pr-4">
                  <Text
                    variant="p"
                    className="text-foreground font-semibold text-sm"
                  >
                    {item.description}
                  </Text>
                  <Text variant="muted" className="text-[10px] mt-0.5">
                    {item.qty} × ${item.unitPrice.toLocaleString()}
                  </Text>
                </View>
                <Text variant="p" className="text-foreground font-bold text-sm">
                  ${item.total.toLocaleString()}
                </Text>
              </View>
            ))}

            <View className="mt-3 pt-3 border-t border-border/40 gap-2">
              <View className="flex-row justify-between">
                <Text
                  variant="p"
                  className="text-foreground font-semibold text-sm"
                >
                  Subtotal
                </Text>
                <Text variant="p" className="text-foreground font-bold text-sm">
                  ${MOCK_SUBTOTAL.toLocaleString()}
                </Text>
              </View>
              <View className="flex-row justify-between">
                <Text
                  variant="p"
                  className="text-foreground font-semibold text-sm"
                >
                  Tax (10%)
                </Text>
                <Text variant="p" className="text-foreground font-bold text-sm">
                  ${MOCK_TAX.toLocaleString()}
                </Text>
              </View>
              <View className="flex-row justify-between items-center mt-1">
                <Text variant="p" className="text-foreground font-semibold">
                  Estimated Total
                </Text>
                <Text
                  variant="h4"
                  className="text-foreground font-bold tracking-tight"
                >
                  ${MOCK_TOTAL.toLocaleString()}
                </Text>
              </View>
            </View>
          </View>
        </Card>

        <Text variant="h4" className="text-foreground mb-2">
          Recent Submissions
        </Text>

        <Card className="bg-card rounded-[6px] mb-6">
          <Pressable className="flex-row items-center p-3">
            <View className="bg-secondary h-9 w-9 rounded-[6px] items-center justify-center mr-3 border border-border/50">
              <CheckCircle2 className="text-muted-foreground" size={16} />
            </View>
            <View className="flex-1 mt-[-10px]">
              <Text
                variant="p"
                className="text-foreground font-semibold text-sm"
              >
                Vendor A — $1,450
              </Text>
              <Text variant="muted" className="text-xs mt-0.5">
                Submitted 2 hours ago
              </Text>
            </View>
            <ChevronRight className="text-muted-foreground/50" size={16} />
          </Pressable>
        </Card>

        <View className="flex-row gap-3">
          <Button
            className="flex-1 h-11 rounded-[6px] bg-primary"
            onPress={() => {}}
          >
            <Send color="#ffffff" size={14} strokeWidth={2.5} />
            <Text className="ml-2 text-white font-bold text-[11px] uppercase tracking-widest">
              Share
            </Text>
          </Button>
          <Button
            className="flex-1 h-11 rounded-[6px] bg-card border border-border"
            onPress={() => router.back()}
          >
            <Text className="text-foreground font-semibold text-[11px] uppercase tracking-widest">
              Back
            </Text>
          </Button>
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}