src/pages/StockManagement.tsx

import { useState } from "react";
import { Plus, Search, Filter, ArrowUpDown, AlertTriangle, TrendingUp, TrendingDown } 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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";
import { ThemeToggle } from "@/components/theme/ThemeToggle";

// Define the stock item type to ensure type safety
interface StockItem {
  id: number;
  name: string;
  sku: string;
  quantity: number;
  price: number;
  category: string;
  lastUpdated: string;
  trend?: 'up' | 'down' | 'stable';
  demand?: 'high' | 'medium' | 'low';
  reorderPoint?: number;
}

// Example initial stock data tailored for informal commerce in Africa
const initialStock: StockItem[] = [
  { id: 1, name: "Riz (25kg)", sku: "RIZ-25", quantity: 15, price: 12000, category: "Alimentation", lastUpdated: "2023-07-15", trend: 'up', demand: 'high', reorderPoint: 10 },
  { id: 2, name: "Lait en poudre (carton)", sku: "LAIT-C", quantity: 8, price: 15000, category: "Alimentation", lastUpdated: "2023-07-10", trend: 'stable', demand: 'medium', reorderPoint: 5 },
  { id: 3, name: "Huile de palme (bidon 5L)", sku: "HUILE-5L", quantity: 23, price: 4500, category: "Alimentation", lastUpdated: "2023-07-12", trend: 'down', demand: 'medium', reorderPoint: 15 },
  { id: 4, name: "Sucre (sac 50kg)", sku: "SUCRE-50", quantity: 5, price: 22000, category: "Alimentation", lastUpdated: "2023-07-18", trend: 'up', demand: 'high', reorderPoint: 3 },
  { id: 5, name: "Savon (carton 24)", sku: "SAVON-24", quantity: 12, price: 7500, category: "Hygiène", lastUpdated: "2023-07-14", trend: 'stable', demand: 'medium', reorderPoint: 8 },
  { id: 6, name: "Farine de blé (sac 25kg)", sku: "FARINE-25", quantity: 7, price: 11000, category: "Alimentation", lastUpdated: "2023-07-16", trend: 'down', demand: 'low', reorderPoint: 5 },
];

const stockFormSchema = z.object({
  name: z.string().min(1, "Le nom est requis"),
  sku: z.string().min(1, "SKU est requis"),
  quantity: z.number().min(0, "La quantité doit être 0 ou plus"),
  price: z.number().min(0, "Le prix doit être 0 ou plus"),
  category: z.string().min(1, "La catégorie est requise"),
  reorderPoint: z.number().min(0, "Le point de réapprovisionnement doit être 0 ou plus"),
});

type StockFormValues = z.infer<typeof stockFormSchema>;

const StockManagement = () => {
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [search, setSearch] = useState("");
  const [stock, setStock] = useState<StockItem[]>(initialStock);
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  const form = useForm<StockFormValues>({
    resolver: zodResolver(stockFormSchema),
    defaultValues: {
      name: "",
      sku: "",
      quantity: 0,
      price: 0,
      category: "",
      reorderPoint: 5,
    },
  });

  const onSubmit = (values: StockFormValues) => {
    // Create a new item with explicit typing to ensure all required properties are present
    const newItem: StockItem = {
      id: stock.length + 1,
      name: values.name,
      sku: values.sku,
      quantity: values.quantity,
      price: values.price,
      category: values.category,
      lastUpdated: new Date().toISOString().split("T")[0],
      trend: 'stable',
      demand: 'medium',
      reorderPoint: values.reorderPoint,
    };
    
    setStock([...stock, newItem]);
    toast.success("Produit ajouté à l'inventaire");
    setIsAddDialogOpen(false);
    form.reset();
  };

  const categories = ["all", ...Array.from(new Set(stock.map(item => item.category)))];

  const filteredStock = stock.filter(item => 
    (selectedCategory === "all" || item.category === selectedCategory) &&
    (item.name.toLowerCase().includes(search.toLowerCase()) || 
    item.sku.toLowerCase().includes(search.toLowerCase()))
  );

  const lowStockItems = stock.filter(item => item.quantity <= (item.reorderPoint || 5));

  return (
    <AppLayout>
      <div className="max-w-6xl mx-auto px-4">
        <div className="flex justify-between items-center">
          <Header 
            title="Gestion des Stocks" 
            subtitle="Suivez votre inventaire et gérez les niveaux de stock"
          />
          <ThemeToggle />
        </div>

        {/* Add Stock Menu */}
        <StockMenu />

        {lowStockItems.length > 0 && (
          <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6 flex items-center gap-3">
            <AlertTriangle className="text-yellow-500 h-5 w-5" />
            <div>
              <p className="text-sm font-medium">Alerte de stock faible</p>
              <p className="text-xs text-muted-foreground">
                {lowStockItems.length} produit(s) nécessitent un réapprovisionnement
              </p>
            </div>
            <Button variant="outline" size="sm" className="ml-auto">
              Voir tous
            </Button>
          </div>
        )}

        <div className="flex items-center justify-between mb-6 flex-col md:flex-row gap-4">
          <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 className="flex gap-2 w-full md:w-auto justify-end">
            <select 
              className="bg-background dark:bg-violet-darker border border-input rounded-md h-9 px-3 text-sm"
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
            >
              {categories.map(category => (
                <option key={category} value={category}>
                  {category === "all" ? "Toutes les catégories" : category}
                </option>
              ))}
            </select>
            
            <Button onClick={() => setIsAddDialogOpen(true)}>
              <Plus size={16} className="mr-1" />
              Ajouter
            </Button>
          </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>Prix (FCFA)</TableHead>
                <TableHead>Catégorie</TableHead>
                <TableHead>Tendance</TableHead>
                <TableHead>Dernière mise à jour</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredStock.length > 0 ? (
                filteredStock.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={
                      item.quantity <= (item.reorderPoint || 5) ? "text-destructive" : 
                      item.quantity <= (item.reorderPoint || 5) * 2 ? "text-yellow-500" : ""
                    }>
                      {item.quantity}
                    </TableCell>
                    <TableCell>{item.price.toLocaleString()}</TableCell>
                    <TableCell>{item.category}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        {item.trend === 'up' && <TrendingUp size={16} className="text-green-500 mr-1" />}
                        {item.trend === 'down' && <TrendingDown size={16} className="text-red-500 mr-1" />}
                        {item.demand === 'high' && <span className="text-xs text-green-500 font-medium">Forte demande</span>}
                        {item.demand === 'medium' && <span className="text-xs text-amber-500 font-medium">Demande moyenne</span>}
                        {item.demand === 'low' && <span className="text-xs text-blue-500 font-medium">Faible demande</span>}
                      </div>
                    </TableCell>
                    <TableCell>{item.lastUpdated}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={7} className="h-24 text-center">
                    Aucun produit trouvé.
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Ajouter un nouveau produit</DialogTitle>
            </DialogHeader>
            
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 pt-4">
                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Nom du produit</FormLabel>
                      <FormControl>
                        <Input placeholder="Entrez le nom du produit" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                
                <FormField
                  control={form.control}
                  name="sku"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>SKU</FormLabel>
                      <FormControl>
                        <Input placeholder="Entrez le SKU" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                
                <div className="flex gap-4">
                  <FormField
                    control={form.control}
                    name="quantity"
                    render={({ field }) => (
                      <FormItem className="flex-1">
                        <FormLabel>Quantité</FormLabel>
                        <FormControl>
                          <Input 
                            type="number" 
                            placeholder="0" 
                            {...field} 
                            onChange={e => field.onChange(parseInt(e.target.value) || 0)} 
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  
                  <FormField
                    control={form.control}
                    name="price"
                    render={({ field }) => (
                      <FormItem className="flex-1">
                        <FormLabel>Prix (FCFA)</FormLabel>
                        <FormControl>
                          <Input 
                            type="number" 
                            step="1" 
                            placeholder="0"
                            {...field}
                            onChange={e => field.onChange(parseFloat(e.target.value) || 0)} 
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                
                <FormField
                  control={form.control}
                  name="category"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Catégorie</FormLabel>
                      <FormControl>
                        <Input placeholder="Entrez la catégorie" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                
                <FormField
                  control={form.control}
                  name="reorderPoint"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Seuil d'alerte</FormLabel>
                      <FormControl>
                        <Input 
                          type="number" 
                          placeholder="5" 
                          {...field} 
                          onChange={e => field.onChange(parseInt(e.target.value) || 0)} 
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                
                <DialogFooter className="pt-4">
                  <Button type="submit">Ajouter le produit</Button>
                </DialogFooter>
              </form>
            </Form>
          </DialogContent>
        </Dialog>
      </div>
    </AppLayout>
  );
};

export default StockManagement;