src/pages/LowStockItems.tsx

import { useState } from "react";
import { AlertTriangle, ArrowUpDown, Plus, Search } from "lucide-react";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import StockMenu from "@/components/stock/StockMenu";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
import { ThemeToggle } from "@/components/theme/ThemeToggle";

// Example low stock data
const lowStockItems = [
  { id: 1, name: "Riz (25kg)", sku: "RIZ-25", quantity: 8, reorderPoint: 10, price: 12000, category: "Alimentation", lastUpdated: "2023-07-15" },
  { id: 4, name: "Sucre (sac 50kg)", sku: "SUCRE-50", quantity: 2, reorderPoint: 3, price: 22000, category: "Alimentation", lastUpdated: "2023-07-18" },
  { id: 5, name: "Savon (carton 24)", sku: "SAVON-24", quantity: 6, reorderPoint: 8, price: 7500, category: "Hygiène", lastUpdated: "2023-07-14" },
];

const LowStockItems = () => {
  const [search, setSearch] = useState("");
  
  const filteredItems = lowStockItems.filter(item => 
    item.name.toLowerCase().includes(search.toLowerCase()) || 
    item.sku.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <AppLayout>
      <div className="max-w-6xl mx-auto px-4">
        <div className="flex justify-between items-center">
          <Header 
            title="Stock Faible" 
            subtitle="Produits nécessitant un réapprovisionnement"
            showBackButton
          />
          <ThemeToggle />
        </div>

        <StockMenu />

        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 mb-6 flex items-center gap-3">
          <AlertTriangle className="text-red-500 h-5 w-5" />
          <div>
            <p className="text-sm font-medium">Action requise</p>
            <p className="text-xs text-muted-foreground">
              {lowStockItems.length} produit(s) sont en dessous du seuil d'alerte
            </p>
          </div>
          <Button variant="outline" size="sm" className="ml-auto">
            Commander
          </Button>
        </div>

        <div className="flex items-center justify-between mb-6">
          <div className="relative w-full md:w-auto flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
            <Input
              placeholder="Rechercher des produits..."
              className="pl-10"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </div>

        <div className="bg-card rounded-lg border shadow-sm overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Produit</TableHead>
                <TableHead>SKU</TableHead>
                <TableHead>Quantité</TableHead>
                <TableHead>Seuil d'alerte</TableHead>
                <TableHead>Prix (FCFA)</TableHead>
                <TableHead>Catégorie</TableHead>
                <TableHead>Dernière mise à jour</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredItems.length > 0 ? (
                filteredItems.map((item) => (
                  <TableRow key={item.id} className="cursor-pointer hover:bg-muted/50">
                    <TableCell className="font-medium">{item.name}</TableCell>
                    <TableCell>{item.sku}</TableCell>
                    <TableCell className="text-destructive">{item.quantity}</TableCell>
                    <TableCell>{item.reorderPoint}</TableCell>
                    <TableCell>{item.price.toLocaleString()}</TableCell>
                    <TableCell>{item.category}</TableCell>
                    <TableCell>{item.lastUpdated}</TableCell>
                    <TableCell>
                      <Button variant="outline" size="sm">Commander</Button>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={8} className="h-24 text-center">
                    Aucun produit trouvé.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
      </div>
    </AppLayout>
  );
};

export default LowStockItems;