"use client";

import { useState } from "react";
import { 
  Warehouse, Boxes, AlertTriangle, ArrowDownToLine, ArrowUpFromLine, 
  MapPin, Clock, Search, MoreHorizontal, ShieldAlert, FileText, CheckCircle2
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table, TableBody, TableCell, TableHead, 
  TableHeader, TableRow 
} from "@/components/ui/table";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

const kpiData = [
  { title: "Total Value (DZD)", value: "145.2M", icon: Boxes, color: "text-blue-500" },
  { title: "Low Stock Items", value: "14", icon: AlertTriangle, color: "text-amber-500" },
  { title: "Out of Stock", value: "3", icon: ShieldAlert, color: "text-brand-red" },
  { title: "Incoming Deliveries", value: "5", icon: ArrowDownToLine, color: "text-emerald-500" },
  { title: "Outgoing Deliveries", value: "12", icon: ArrowUpFromLine, color: "text-purple-500" },
  { title: "Reserved Items", value: "24", icon: Warehouse, color: "text-gray-400" },
];

const mockInventory = [
  { id: "INV-001", product: "K-SHRED 5000 (Industrial)", total: 12, available: 10, reserved: 2, location: "Zone A - Aisle 1", lastMovement: "2024-03-20 14:30", status: "Healthy" },
  { id: "INV-002", product: "Plastic Shredder Mini Eco", total: 5, available: 5, reserved: 0, location: "Zone B - Aisle 3", lastMovement: "2024-03-18 09:15", status: "Low Stock" },
  { id: "INV-003", product: "Heavy Metal Crusher Titan 8000", total: 0, available: 0, reserved: 0, location: "Zone A - Aisle 2", lastMovement: "2024-02-28 16:45", status: "Out of Stock" },
  { id: "INV-004", product: "Conveyor Belt System 10m", total: 8, available: 3, reserved: 5, location: "Zone C - Aisle 1", lastMovement: "2024-03-21 11:00", status: "Healthy" },
  { id: "INV-005", product: "Magnetic Separator Pro", total: 2, available: 1, reserved: 1, location: "Zone C - Aisle 2", lastMovement: "2024-03-15 10:20", status: "Low Stock" },
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Healthy": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30 flex items-center gap-1"><CheckCircle2 className="w-3 h-3"/> Healthy</Badge>;
    case "Low Stock": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 flex items-center gap-1"><AlertTriangle className="w-3 h-3"/> Low Stock</Badge>;
    case "Out of Stock": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30 flex items-center gap-1"><ShieldAlert className="w-3 h-3"/> Out of Stock</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

export default function WarehouseManagement() {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredInventory = mockInventory.filter(item => 
    item.product.toLowerCase().includes(searchQuery.toLowerCase()) ||
    item.location.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <h2 className="text-3xl font-bold text-white tracking-tight">Warehouse & Inventory</h2>
          <p className="text-gray-400 mt-1">Monitor stock levels, incoming/outgoing shipments, and warehouse zones.</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20">
            <ArrowDownToLine className="w-4 h-4 mr-2" /> Stock Entry
          </Button>
          <Button variant="outline" className="border-purple-500/30 bg-purple-500/10 text-purple-400 hover:bg-purple-500/20">
            <ArrowUpFromLine className="w-4 h-4 mr-2" /> Stock Exit
          </Button>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
        {kpiData.map((kpi, index) => (
          <Card key={index} className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 px-4 pt-4">
              <CardTitle className="text-xs font-medium text-gray-400">
                {kpi.title}
              </CardTitle>
              <kpi.icon className={`h-4 w-4 ${kpi.color}`} />
            </CardHeader>
            <CardContent className="px-4 pb-4">
              <div className="text-xl font-bold text-white">{kpi.value}</div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        
        {/* Main Inventory Table */}
        <Card className="col-span-1 lg:col-span-3 bg-brand-charcoal/50 border-white/10 backdrop-blur-sm overflow-hidden">
          <div className="p-4 border-b border-white/10 flex items-center justify-between bg-black/20">
            <div className="relative w-full max-w-sm">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
              <Input 
                placeholder="Search products, SKUs, or locations..." 
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9 bg-black/40 border-white/10 focus-visible:ring-brand-red text-white"
              />
            </div>
            <Button variant="outline" className="border-white/10 bg-transparent text-white hover:bg-white/5">
              <FileText className="w-4 h-4 mr-2" /> Generate Report
            </Button>
          </div>
          
          <div className="overflow-x-auto">
            <Table>
              <TableHeader className="bg-black/40 hover:bg-black/40">
                <TableRow className="border-white/10 hover:bg-transparent">
                  <TableHead className="text-gray-400 font-semibold w-[300px]">Product</TableHead>
                  <TableHead className="text-gray-400 font-semibold text-center">Total</TableHead>
                  <TableHead className="text-emerald-400 font-semibold text-center">Available</TableHead>
                  <TableHead className="text-purple-400 font-semibold text-center">Reserved</TableHead>
                  <TableHead className="text-gray-400 font-semibold">Location</TableHead>
                  <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                  <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredInventory.map((item) => (
                  <TableRow key={item.id} className="border-white/5 hover:bg-white/5 transition-colors">
                    <TableCell>
                      <div className="font-semibold text-white">{item.product}</div>
                      <div className="text-xs text-gray-500">{item.id}</div>
                    </TableCell>
                    <TableCell className="text-center font-medium text-white">{item.total}</TableCell>
                    <TableCell className="text-center font-bold text-emerald-400">{item.available}</TableCell>
                    <TableCell className="text-center font-bold text-purple-400">{item.reserved}</TableCell>
                    <TableCell>
                      <div className="flex items-center text-sm text-gray-300">
                        <MapPin className="w-3 h-3 text-gray-500 mr-1" /> {item.location}
                      </div>
                      <div className="flex items-center text-xs text-gray-500 mt-1">
                        <Clock className="w-3 h-3 text-gray-500 mr-1" /> {item.lastMovement}
                      </div>
                    </TableCell>
                    <TableCell>{getStatusBadge(item.status)}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" className="h-8 w-8 p-0 text-gray-400 hover:text-white hover:bg-white/10">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="bg-brand-charcoal border-white/10 text-white">
                          <DropdownMenuLabel>Stock Actions</DropdownMenuLabel>
                          <DropdownMenuSeparator className="bg-white/10" />
                          <DropdownMenuItem className="focus:bg-white/10 cursor-pointer text-emerald-400"><ArrowDownToLine className="w-4 h-4 mr-2"/> Receive Stock</DropdownMenuItem>
                          <DropdownMenuItem className="focus:bg-white/10 cursor-pointer text-purple-400"><ArrowUpFromLine className="w-4 h-4 mr-2"/> Dispatch Stock</DropdownMenuItem>
                          <DropdownMenuItem className="focus:bg-white/10 cursor-pointer text-blue-400"><MapPin className="w-4 h-4 mr-2"/> Transfer Location</DropdownMenuItem>
                          <DropdownMenuSeparator className="bg-white/10" />
                          <DropdownMenuItem className="focus:bg-brand-red focus:text-white cursor-pointer text-brand-red"><ShieldAlert className="w-4 h-4 mr-2"/> Report Damaged</DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </Card>

        {/* Alerts Panel */}
        <div className="col-span-1 space-y-4">
          <Card className="bg-brand-red/10 border-brand-red/30 backdrop-blur-sm relative overflow-hidden">
            <div className="absolute top-0 right-0 w-16 h-16 bg-brand-red/20 rounded-bl-full flex items-start justify-end p-2">
              <ShieldAlert className="w-6 h-6 text-brand-red" />
            </div>
            <CardHeader>
              <CardTitle className="text-white flex items-center gap-2 text-lg">
                Action Required
              </CardTitle>
              <CardDescription className="text-brand-red/80 font-medium">Critical stock alerts</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="bg-black/40 border border-brand-red/20 p-3 rounded-lg">
                <h4 className="text-white font-semibold text-sm">Heavy Metal Crusher Titan 8000</h4>
                <p className="text-xs text-gray-400 mt-1">Completely out of stock since Feb 28.</p>
                <Button size="sm" className="w-full mt-3 bg-brand-red hover:bg-brand-red/90 text-white text-xs">Re-order from Supplier</Button>
              </div>
              <div className="bg-black/40 border border-amber-500/20 p-3 rounded-lg">
                <h4 className="text-white font-semibold text-sm">Magnetic Separator Pro</h4>
                <p className="text-xs text-gray-400 mt-1">Only 1 available unit remaining.</p>
                <Button size="sm" variant="outline" className="w-full mt-3 border-amber-500/50 text-amber-500 hover:bg-amber-500/10 text-xs">Review Stock</Button>
              </div>
            </CardContent>
          </Card>
        </div>
        
      </div>
    </div>
  );
}