import React, { useState } from "react";
import { View, ScrollView, Pressable } from "react-native";
import { Text } from "@/components/ui/text";
import { Card } from "@/components/ui/card";
import { MOCK_PROFORMA } from "@/lib/mock-data";
import { router } from "expo-router";
import {
  Plus,
  Send,
  FileText,
  ChevronRight,
  Clock,
  History,
  DraftingCompass,
} from "@/lib/icons";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { Button } from "@/components/ui/button";

export default function ProformaScreen() {
  const [activeTab, setActiveTab] = React.useState("All");

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader />
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ padding: 20, paddingBottom: 150 }}
        showsVerticalScrollIndicator={false}
      >
        <Button
          className="mb-4 h-10 rounded-[10px] bg-primary shadow-lg shadow-primary/30"
          onPress={() => router.push("/proforma/create")}
        >
          <Plus color="white" size={18} strokeWidth={2.5} />
          <Text className=" text-white text-sm font-semibold uppercase tracking-widest">
            Create Proforma
          </Text>
        </Button>

        {/* <View className="flex-row gap-4 mb-8">
          <Pressable
            onPress={() => setActiveTab("All")}
            className={`flex-1 py-3 rounded-[10px] items-center border ${activeTab === "All" ? "bg-primary border-primary" : "bg-card border-border"}`}
          >
            <DraftingCompass
              color={activeTab === "All" ? "white" : "#94a3b8"}
              size={20}
            />
            <Text
              className={`mt-1 text-[10px] font-black uppercase tracking-widest ${activeTab === "All" ? "text-white" : "text-muted-foreground"}`}
            >
              All
            </Text>
          </Pressable>
          <Pressable
            onPress={() => setActiveTab("Pending")}
            className={`flex-1 py-3 rounded-[10px] items-center border ${activeTab === "Pending" ? "bg-primary border-primary" : "bg-card border-border"}`}
          >
            <History
              color={activeTab === "Pending" ? "white" : "#94a3b8"}
              size={20}
            />
            <Text
              className={`mt-1 text-[10px] font-black uppercase tracking-widest ${activeTab === "Pending" ? "text-white" : "text-muted-foreground"}`}
            >
              Pending
            </Text>
          </Pressable>
        </View> */}

        <View className="gap-3">
          {MOCK_PROFORMA.map((item) => (
            <Pressable
              key={item.id}
              onPress={() => router.push(`/proforma/${item.id}`)}
            >
              <Card className="rounded-[6px]  bg-card overflow-hidden">
                <View className="p-3">
                  <View className="flex-row justify-between items-start">
                    <View className="bg-secondary/50 p-2 rounded-[10px]">
                      <FileText color="#000" size={18} />
                    </View>
                    <View className="bg-emerald-500/10 px-3 py-1 rounded-[6px] border border-emerald-500/20">
                      <Text className="text-emerald-600 text-[10px] font-bold uppercase tracking-tighter">
                        {item.sentCount} Shared
                      </Text>
                    </View>
                  </View>

                  <Text variant="p" className="text-foreground font-semibold">
                    {item.title}
                  </Text>
                  <Text variant="muted" className="mb-4 line-clamp-2 text-xs">
                    {item.description}
                  </Text>

                  <View className="h-[1px] bg-border mb-4 opacity-50" />

                  <View className="flex-row justify-between items-center">
                    <View className="flex-row gap-4">
                      <View className="flex-row items-center gap-1.5">
                        <Clock
                          className="text-muted-foreground"
                          color="#000"
                          size={12}
                        />
                        <Text variant="muted" className="text-xs">
                          {item.deadline}
                        </Text>
                      </View>
                    </View>

                    <View className="flex-row items-center gap-3">
                      <Pressable className="bg-secondary px-2 py-1 rounded-[6px] border border-border/50 flex-row items-center gap-1">
                        <Send color="#000" size={12} />
                        <Text variant="muted" className="text-xs">
                          Share
                        </Text>
                      </Pressable>
                    </View>
                  </View>
                </View>
              </Card>
            </Pressable>
          ))}
        </View>
      </ScrollView>
    </ScreenWrapper>
  );
}