import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Edit,
  Trash,
  AlertTriangle,
  CheckCircle,
  AlertCircle,
  Calculator,
  Copy,
  PackageX,
  Archive
} from "lucide-react";
import { Button } from "@/components/ui/button";
import React, { useState, useEffect } from "react";
import { Product } from "@/models/products";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { motion, AnimatePresence } from "framer-motion";

const getProductImageUrl = (product: Product) => {
  if (!product.image) return null;
  if (typeof product.image === 'string' && product.image.startsWith('http')) return product.image;
  // Use the API endpoint to serve the image
  return `${process.env.NEXT_PUBLIC_API_URL}/products/${product._id}/image`;
};

interface ProductTableProps {
  products: Product[];
  loading: boolean;
  onEdit: (product: Product) => void;
  onClone?: (product: Product) => void;
  onDelete: (productId: string) => void;
  onToggleEnabled: (productId: string, enabled: boolean) => void;
  onProfitAnalysis?: (productId: string, productName: string) => void;
  getCategoryNameById: (categoryId: string) => string;
}

const ProductTable = ({
  products,
  loading,
  onEdit,
  onClone,
  onDelete,
  onToggleEnabled,
  onProfitAnalysis,
  getCategoryNameById,
}: ProductTableProps) => {
  // Separate enabled and disabled products
  const enabledProducts = products.filter((p) => p.enabled !== false);
  const disabledProducts = products.filter((p) => p.enabled === false);

  const sortByCategory = (productList: Product[]) => {
    return [...productList].sort((a, b) => {
      const categoryNameA = getCategoryNameById(a.category);
      const categoryNameB = getCategoryNameById(b.category);
      return categoryNameA.localeCompare(categoryNameB);
    });
  };

  const sortedEnabledProducts = sortByCategory(enabledProducts);
  const sortedDisabledProducts = sortByCategory(disabledProducts);

  const getStockIcon = (product: Product) => {
    if (!product.stockTracking) return null;

    if (product.stockStatus === "out_of_stock") {
      return <AlertTriangle className="h-4 w-4 text-red-500" />;
    } else if (product.stockStatus === "low_stock") {
      return <AlertCircle className="h-4 w-4 text-amber-500" />;
    } else {
      return <CheckCircle className="h-4 w-4 text-green-500" />;
    }
  };

  const renderProductRow = (product: Product, index: number, isDisabled: boolean = false) => (
    <motion.tr
      key={product._id}
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.2, delay: index * 0.05 }}
      className={`group hover:bg-muted/40 border-b border-border/50 transition-colors ${isDisabled ? "opacity-60 bg-muted/20" : ""}`}
    >
      <TableCell className="font-medium">
        <div className="flex items-center gap-2">
          <div className="h-8 w-8 rounded bg-muted/50 flex items-center justify-center text-muted-foreground overflow-hidden relative">
            {getProductImageUrl(product) ? (
              <img
                src={getProductImageUrl(product)!}
                alt={product.name}
                className="h-full w-full object-cover"
              />
            ) : (
              <span className="text-xs font-bold">{product.name.charAt(0).toUpperCase()}</span>
            )}
          </div>
          <div>
            <div className="truncate max-w-[180px]">{product.name}</div>
            <div className="sm:hidden text-xs text-muted-foreground">
              {getCategoryNameById(product.category)}
            </div>
          </div>
        </div>
      </TableCell>
      <TableCell className="hidden sm:table-cell text-center">
        <Badge variant="outline" className="font-normal bg-background/50">
          {getCategoryNameById(product.category)}
        </Badge>
      </TableCell>
      <TableCell className="hidden md:table-cell text-center text-muted-foreground text-sm">
        {product.unitType}
      </TableCell>
      <TableCell className="text-center">
        {product.stockTracking ? (
          <div className="flex items-center justify-center gap-1.5">
            {getStockIcon(product)}
            <span className={`text-sm font-medium ${product.stockStatus === 'out_of_stock' ? 'text-destructive' :
              product.stockStatus === 'low_stock' ? 'text-amber-500' : 'text-foreground'
              }`}>
              {product.currentStock !== undefined ? product.currentStock : 0}
            </span>
          </div>
        ) : (
          <Badge variant="secondary" className="text-[10px] h-5 px-1.5 text-muted-foreground bg-muted/50">
            Unlimited
          </Badge>
        )}
      </TableCell>
      <TableCell className="hidden lg:table-cell text-center">
        <Switch
          checked={product.enabled !== false}
          onCheckedChange={(checked) =>
            onToggleEnabled(product._id as string, checked)
          }
          className="data-[state=checked]:bg-primary"
        />
      </TableCell>
      <TableCell className="text-right">
        <div className="flex items-center justify-end gap-1">
          {onProfitAnalysis && (
            <Button
              variant="ghost"
              size="icon"
              onClick={() =>
                onProfitAnalysis(product._id as string, product.name)
              }
              className="h-8 w-8 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10"
              title="Profit Analysis"
            >
              <Calculator className="h-4 w-4" />
            </Button>
          )}
          {onClone && (
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onClone(product)}
              className="h-8 w-8 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10"
              title="Clone Listing"
            >
              <Copy className="h-4 w-4" />
            </Button>
          )}
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onEdit(product)}
            className="h-8 w-8 text-muted-foreground hover:text-foreground"
            title="Edit Product"
          >
            <Edit className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onDelete(product._id as string)}
            className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
            title="Delete Product"
          >
            <Trash className="h-4 w-4" />
          </Button>
        </div>
      </TableCell>
    </motion.tr>
  );

  const [searchQuery, setSearchQuery] = useState("");
  // Browser detection
  const [isFirefox, setIsFirefox] = useState(false);

  useEffect(() => {
    const ua = navigator.userAgent.toLowerCase();
    setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
  }, []);

  const renderTableHeader = () => (
    <TableHeader className="bg-muted/50 sticky top-0 z-10">
      <TableRow className="hover:bg-transparent border-border/50">
        <TableHead className="w-[200px]">Product</TableHead>
        <TableHead className="hidden sm:table-cell text-center">
          Category
        </TableHead>
        <TableHead className="hidden md:table-cell text-center">Unit</TableHead>
        <TableHead className="text-center">Stock</TableHead>
        <TableHead className="hidden lg:table-cell text-center">
          Enabled
        </TableHead>
        <TableHead className="text-right pr-6">Actions</TableHead>
      </TableRow>
    </TableHeader>
  );

  return (
    <div className="space-y-8">
      {/* Enabled Products Table */}
      <Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
        <CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.02]">
          <CardTitle className="text-lg font-bold flex items-center gap-3 text-white">
            <div className="p-2 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
              <CheckCircle className="h-5 w-5 text-indigo-400" />
            </div>
            Active Products
            <Badge variant="secondary" className="ml-2 bg-indigo-500/10 text-indigo-300 border-indigo-500/20 hover:bg-indigo-500/20">
              {sortedEnabledProducts.length}
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="max-h-[600px] overflow-auto">
            <Table>
              {renderTableHeader()}
              <TableBody>
                {isFirefox ? (
                  loading ? (
                    <TableRow>
                      <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                        <div className="flex flex-col items-center gap-2">
                          <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
                          <span>Loading products...</span>
                        </div>
                      </TableCell>
                    </TableRow>
                  ) : sortedEnabledProducts.length > 0 ? (
                    sortedEnabledProducts.map((product, index) => renderProductRow(product, index))
                  ) : (
                    <TableRow>
                      <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                        <div className="flex flex-col items-center justify-center gap-2">
                          <PackageX className="h-8 w-8 opacity-20" />
                          <p>No active products found</p>
                        </div>
                      </TableCell>
                    </TableRow>
                  )
                ) : (
                  <AnimatePresence>
                    {loading ? (
                      <TableRow>
                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                          <div className="flex flex-col items-center gap-2">
                            <div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
                            <span>Loading products...</span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ) : sortedEnabledProducts.length > 0 ? (
                      sortedEnabledProducts.map((product, index) => renderProductRow(product, index))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
                          <div className="flex flex-col items-center justify-center gap-2">
                            <PackageX className="h-8 w-8 opacity-20" />
                            <p>No active products found</p>
                          </div>
                        </TableCell>
                      </TableRow>
                    )}
                  </AnimatePresence>
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* Disabled Products Section */}
      {!loading && disabledProducts.length > 0 && (
        <Card className="border-white/5 bg-black/20 backdrop-blur-sm shadow-none overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
          <CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.01]">
            <CardTitle className="text-lg font-medium flex items-center gap-2 text-zinc-400">
              <Archive className="h-5 w-5" />
              Archived / Disabled
              <Badge variant="outline" className="ml-2 border-white/10 text-zinc-500">
                {sortedDisabledProducts.length}
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <div className="max-h-[400px] overflow-auto">
              <Table>
                {renderTableHeader()}
                <TableBody>
                  <AnimatePresence>
                    {sortedDisabledProducts.map((product, index) =>
                      renderProductRow(product, index, true),
                    )}
                  </AnimatePresence>
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );

};

export default ProductTable;