"use client";
import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Package, Edit, ArrowLeft, AlertTriangle, MapPin } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useGetBranchQuery } from "@/redux/services/branchs.api";

type Product = {
  id: string;
  name: string;
  productCount: String;
  category: string;
  quantity: number;
  // price: number;
};

export default function InventoryManagement() {
  // const router = useRouter();
  // useEffect(() => {
  //   const token = localStorage.getItem("token");
  //   if (!token) {
  //     router.push("/");
  //   }
  // });
  const {
    data: branches,
    isLoading: isBranchesLoading,
    error: branchesError,
  } = useGetBranchQuery();

  return (
    <div className="container mx-auto p-4">
      {/* <h1 className="text-3xl font-bold mb-6">Inventory Management</h1> */}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {branches?.map((branch) => (
          <Card
            key={branch._id}
            className="cursor-pointer hover:shadow-lg transition-shadow duration-300"
          >
            <CardHeader>
              <CardTitle className="capitalize">{branch.name}</CardTitle>
              <CardDescription className="flex items-center justify-between">
                <div className="flex">
                  <MapPin className="mr-2 h-4 w-4" />
                  {branch.address}
                </div>
                {/* <div className="flex items-center gap-4">
                  <p className="text-sm text-gray-500">Products</p>
                  <p className="text-2xl font-bold">{branch.productCount}</p>
                  
                </div> */}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex justify-between items-center">
                {/* <div>
                  <p className="text-sm text-gray-500">Total Value</p>
                  <p className="text-2xl font-bold">
                    ${branch.totalValue.toLocaleString()}
                  </p>
                </div> */}
              </div>
            </CardContent>
            <CardFooter>
              <Link
                href={
                  "/inventory-management/" + branch.name.split(" ").join("-")
                }
              >
                <Button className="w-full" variant={"appVariant"}>
                  <Package className="mr-2 h-4 w-4" />
                  View Inventory
                </Button>
              </Link>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
}