import { Badge } from "../../../../../src/components/ui/badge";
import { Button } from "../../../../../src/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../src/components/ui/table";
import { Tooltip } from "../../../../../src/components/ui/tooltip";
import { ArrowDown, ArrowUp, ArrowUpDown, Edit, Eye, Map, Trash2 } from "lucide-react";
import React from "react";

const StoreTable = React.memo(({
  stores,
  loading,
  pagination,
  sortField,
  sortOrder,
  handleSort,
  handleView,
  handleEdit,
  handleDelete,
}: any) => {
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader className="bg-gray-100 dark:bg-gray-800">
          <TableRow className="bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800">
            <TableHead
              className="w-[80px] text-center cursor-pointer hover:bg-gray-50"
              onClick={() => handleSort("createdAt")}
            >
              <div className="flex items-center justify-center gap-2">
                ID
                {sortField === "createdAt" ? (
                  sortOrder === "asc" ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
                ) : (
                  <ArrowUpDown className="h-4 w-4 text-gray-400" />
                )}
              </div>
            </TableHead>

            <TableHead
              className="w-[200px] text-center cursor-pointer hover:bg-gray-50"
              onClick={() => handleSort("name")}
            >
              <div className="flex items-center justify-center gap-2">
                Name
                {sortField === "name" ? (
                  sortOrder === "asc" ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
                ) : (
                  <ArrowUpDown className="h-4 w-4 text-gray-400" />
                )}
              </div>
            </TableHead>

            {/* <TableHead className="w-[150px] text-center">City</TableHead> */}
            {/* <TableHead className="w-[150px] text-center">State</TableHead> */}
            <TableHead className="w-[120px] text-center">Phone</TableHead>
            {/* <TableHead className="w-[120px] text-center">Flagship</TableHead> */}
            <TableHead className="w-[120px] text-center">Status</TableHead>
            <TableHead className="text-center">Action</TableHead>
          </TableRow>
        </TableHeader>

        <TableBody className={`dark:bg-[#1f2a37] ${loading ? "pointer-events-none opacity-60" : ""}`}>
          {stores.length === 0 ? (
            <TableRow className="bg-white dark:bg-gray-900">
              <TableCell colSpan={8} className="text-center py-8">
                {loading ? (
                  <div className="flex items-center justify-center">
                    <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                    <span className="ml-2">Loading...</span>
                  </div>
                ) : (
                  "No stores found"
                )}
              </TableCell>
            </TableRow>
          ) : (
            stores.map((store: any, index: number) => (
              <TableRow key={store._id} className="bg-white dark:bg-gray-900">
                <TableCell className="text-center">
                  {sortField === "createdAt" && sortOrder === "desc"
                    ? ((pagination.page - 1) * pagination.limit) + index + 1
                    : pagination.total - ((pagination.page - 1) * pagination.limit) - index
                  }
                </TableCell>

                <TableCell className="font-medium text-center">{store.name}</TableCell>
                {/* <TableCell className="text-center">{store.city}</TableCell> */}
                {/* <TableCell className="text-center">{store.state}</TableCell> */}
                <TableCell className="text-center">{store.phone}</TableCell>

                {/* <TableCell className="text-center">
                  <Badge variant={store.isFlagship ? "default" : "secondary"}>
                    {store.isFlagship ? "Yes" : "No"}
                  </Badge>
                </TableCell> */}

                <TableCell className="text-center">
                  <Badge variant={store.isActive ? "default" : "outline"}>
                    {store.isActive ? "Active" : "Inactive"}
                  </Badge>
                </TableCell>

                <TableCell className="text-center">
                  <div className="flex justify-center gap-2">
                    <Tooltip text="View In Map">
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={() => {
                                const mapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(store.address)}`;

                                window.open(mapsUrl, "_blank");
                            }}
                            >
                            <Map className="w-4 h-4" />
                        </Button>
                    </Tooltip>
                    <Tooltip text="View">
                      <Button size="sm" variant="outline" onClick={() => handleView(store)}>
                        <Eye className="w-4 h-4" />
                      </Button>
                    </Tooltip>
                    <Tooltip text="Edit">
                      <Button size="sm" variant="outline" onClick={() => handleEdit(store)}>
                        <Edit className="w-4 h-4" />
                      </Button>
                    </Tooltip>
                    <Tooltip text="Delete">
                      <Button size="sm" variant="outline" onClick={() => handleDelete(store._id)}>
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </Tooltip>                    
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
});

StoreTable.displayName = "StoreTable";
export default StoreTable;