"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Layout from "@/components/layout/layout";
import { Button } from "@/components/ui/button";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";
import { 
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Product } from "@/models/products";
import { Package, RefreshCw, ChevronDown, CheckSquare, XSquare, Boxes } from "lucide-react";
import { clientFetch } from "@/lib/api";
import { toast } from "sonner";

interface StockData {
  currentStock: number;
  stockTracking: boolean;
  lowStockThreshold?: number;
}

export default function StockManagementPage() {
  const router = useRouter();
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [editingStock, setEditingStock] = useState<Record<string, boolean>>({});
  const [stockValues, setStockValues] = useState<Record<string, number>>({});
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [selectedProducts, setSelectedProducts] = useState<string[]>([]);
  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
  const [bulkAction, setBulkAction] = useState<'enable' | 'disable' | null>(null);

  useEffect(() => {
    const authToken = document.cookie
      .split("; ")
      .find((row) => row.startsWith("Authorization="))
      ?.split("=")[1];

    if (!authToken) {
      router.push("/login");
      return;
    }

    const fetchDataAsync = async () => {
      try {
        const response = await clientFetch<Product[]>('api/products');
        const fetchedProducts = response || [];
        setProducts(fetchedProducts);
        
        // Initialize stock values
        const initialStockValues: Record<string, number> = {};
        fetchedProducts.forEach((product: Product) => {
          if (product._id) {
            initialStockValues[product._id] = product.currentStock || 0;
          }
        });
        setStockValues(initialStockValues);
        
        setLoading(false);
      } catch (error) {
        console.error("Error fetching products:", error);
        setLoading(false);
      }
    };

    fetchDataAsync();
  }, [router]);

  const handleEditStock = (productId: string) => {
    setEditingStock({
      ...editingStock,
      [productId]: true,
    });
  };

  const handleSaveStock = async (product: Product) => {
    if (!product._id) return;

    try {
      const newStockValue = stockValues[product._id] || 0;
      
      const stockData: StockData = {
        currentStock: newStockValue,
        stockTracking: product.stockTracking || false,
        lowStockThreshold: product.lowStockThreshold
      };

      await clientFetch(`api/stock/${product._id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(stockData)
      });

      // Update local products state
      setProducts(products.map(p => {
        if (p._id === product._id) {
          return {
            ...p,
            currentStock: newStockValue
          };
        }
        return p;
      }));

      setEditingStock({
        ...editingStock,
        [product._id]: false,
      });

      toast.success("Stock updated successfully");
    } catch (error) {
      console.error("Error updating stock:", error);
      toast.error("Failed to update stock");
    }
  };

  const handleStockChange = (productId: string, value: number) => {
    setStockValues({
      ...stockValues,
      [productId]: value,
    });
  };

  const handleToggleStockTracking = async (product: Product) => {
    if (!product._id) return;

    try {
      // Toggle the stock tracking status
      const newTrackingStatus = !product.stockTracking;
      
      // For enabling tracking, we need to ensure there's a stock value
      const stockData: StockData = {
        stockTracking: newTrackingStatus,
        currentStock: product.currentStock || 0,
        lowStockThreshold: product.lowStockThreshold || 10,
      };
      
      // Update stock tracking status
      await clientFetch(`api/stock/${product._id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(stockData)
      });

      // Update local state
      setProducts(products.map(p => {
        if (p._id === product._id) {
          return {
            ...p,
            stockTracking: newTrackingStatus,
            currentStock: stockData.currentStock,
            lowStockThreshold: stockData.lowStockThreshold,
          };
        }
        return p;
      }));

      toast.success(`Stock tracking ${newTrackingStatus ? 'enabled' : 'disabled'} for ${product.name}`);
    } catch (error) {
      console.error("Error toggling stock tracking:", error);
      toast.error(`Failed to ${product.stockTracking ? 'disable' : 'enable'} stock tracking`);
    }
  };

  const handleBulkAction = async (action: 'enable' | 'disable') => {
    setBulkAction(action);
    setIsConfirmDialogOpen(true);
  };

  const executeBulkAction = async () => {
    if (!bulkAction) return;

    try {
      const productsToUpdate = products.filter(p => selectedProducts.includes(p._id || ''));
      
      await Promise.all(productsToUpdate.map(async (product) => {
        if (!product._id) return;

        const stockData: StockData = {
          stockTracking: bulkAction === 'enable',
          currentStock: product.currentStock || 0,
          lowStockThreshold: product.lowStockThreshold || 10,
        };

        await clientFetch(`api/stock/${product._id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(stockData)
        });
      }));

      // Update local state
      setProducts(products.map(p => {
        if (selectedProducts.includes(p._id || '')) {
          return {
            ...p,
            stockTracking: bulkAction === 'enable',
          };
        }
        return p;
      }));

      setSelectedProducts([]);
      toast.success(`Stock tracking ${bulkAction}d for selected products`);
    } catch (error) {
      console.error(`Error ${bulkAction}ing stock tracking:`, error);
      toast.error(`Failed to ${bulkAction} stock tracking`);
    }

    setIsConfirmDialogOpen(false);
    setBulkAction(null);
  };

  const toggleSelectProduct = (productId: string) => {
    setSelectedProducts(prev => 
      prev.includes(productId)
        ? prev.filter(id => id !== productId)
        : [...prev, productId]
    );
  };

  const toggleSelectAll = () => {
    setSelectedProducts(prev => 
      prev.length === products.length
        ? []
        : products.map(p => p._id || '')
    );
  };

  const getStockStatus = (product: Product) => {
    if (!product.stockTracking) return 'Not tracked';
    if (product.currentStock === undefined) return 'Unknown';
    if (product.currentStock <= 0) return 'Out of stock';
    if (product.lowStockThreshold && product.currentStock <= product.lowStockThreshold) return 'Low stock';
    return 'In stock';
  };

  const filteredProducts = products.filter(product => {
    if (!searchTerm) return true;
    
    const searchLower = searchTerm.toLowerCase();
    return (
      product.name.toLowerCase().includes(searchLower) ||
      product.description.toLowerCase().includes(searchLower) ||
      getStockStatus(product).toLowerCase().includes(searchLower)
    );
  });

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center">
            <Boxes className="mr-2 h-6 w-6" />
            Stock Management
          </h1>
          <div className="flex items-center gap-3">
            <Input
              type="search"
              placeholder="Search products..."
              className="w-64"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            {selectedProducts.length > 0 && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" className="gap-2">
                    <Package className="h-4 w-4" />
                    Bulk Actions
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={() => handleBulkAction('enable')}>
                    <CheckSquare className="h-4 w-4 mr-2" />
                    Enable Stock Tracking
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => handleBulkAction('disable')}>
                    <XSquare className="h-4 w-4 mr-2" />
                    Disable Stock Tracking
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>
        </div>

        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <input
                    type="checkbox"
                    checked={selectedProducts.length === products.length}
                    onChange={toggleSelectAll}
                    className="rounded border-gray-300"
                  />
                </TableHead>
                <TableHead>Product</TableHead>
                <TableHead>Stock Status</TableHead>
                <TableHead>Current Stock</TableHead>
                <TableHead>Track Stock</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-8">
                    <RefreshCw className="h-6 w-6 animate-spin inline-block" />
                    <span className="ml-2">Loading products...</span>
                  </TableCell>
                </TableRow>
              ) : filteredProducts.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-8">
                    No products found
                  </TableCell>
                </TableRow>
              ) : (
                filteredProducts.map((product) => (
                  <TableRow key={product._id}>
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={selectedProducts.includes(product._id || '')}
                        onChange={() => toggleSelectProduct(product._id || '')}
                        className="rounded border-gray-300"
                      />
                    </TableCell>
                    <TableCell>{product.name}</TableCell>
                    <TableCell>{getStockStatus(product)}</TableCell>
                    <TableCell>
                      {editingStock[product._id || ''] ? (
                        <div className="flex items-center gap-2">
                          <Input
                            type="number"
                            value={stockValues[product._id || ''] || 0}
                            onChange={(e) => handleStockChange(product._id || '', parseInt(e.target.value) || 0)}
                            className="w-24"
                          />
                          <Button size="sm" onClick={() => handleSaveStock(product)}>Save</Button>
                        </div>
                      ) : (
                        <span>{product.currentStock || 0}</span>
                      )}
                    </TableCell>
                    <TableCell>
                      <Switch
                        checked={product.stockTracking || false}
                        onCheckedChange={() => handleToggleStockTracking(product)}
                      />
                    </TableCell>
                    <TableCell className="text-right">
                      {!editingStock[product._id || ''] && (
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleEditStock(product._id || '')}
                        >
                          Edit Stock
                        </Button>
                      )}
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      <AlertDialog open={isConfirmDialogOpen} onOpenChange={setIsConfirmDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirm Bulk Action</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to {bulkAction} stock tracking for {selectedProducts.length} selected products?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setBulkAction(null)}>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={executeBulkAction}>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Layout>
  );
}