"use client";

import { useState } from "react";
import { 
  Package, Plus, Search, MoreHorizontal, Image as ImageIcon,
  FileText, Copy, Archive, Zap, Scale, Video
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";

const mockProducts = [
  {
    id: "PRD-001",
    sku: "KSH-5000",
    name: "K-SHRED 5000 (Industrial)",
    category: "Industrial Shredders",
    brand: "K CREATION",
    model: "2024 Pro",
    capacity: "5000 kg/h",
    power: "75 kW",
    price: "2,500,000 DZD",
    stock: 12,
    status: "Active",
    image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2000&auto=format&fit=crop"
  },
  {
    id: "PRD-002",
    sku: "KPL-2000",
    name: "Plastic Shredder Mini",
    category: "Plastic Shredders",
    brand: "K CREATION",
    model: "Eco 2000",
    capacity: "2000 kg/h",
    power: "30 kW",
    price: "850,000 DZD",
    stock: 5,
    status: "Low Stock",
    image: "https://images.unsplash.com/photo-1530124566582-a618bc2615dc?q=80&w=2000&auto=format&fit=crop"
  },
  {
    id: "PRD-003",
    sku: "KMT-8000",
    name: "Heavy Metal Crusher",
    category: "Metal Shredders",
    brand: "K CREATION",
    model: "Titan 8000",
    capacity: "8000 kg/h",
    power: "120 kW",
    price: "4,200,000 DZD",
    stock: 0,
    status: "Out of Stock",
    image: "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2000&auto=format&fit=crop"
  }
];

const categories = [
  "Industrial Shredders",
  "Plastic Shredders",
  "Paper Shredders",
  "Cardboard Shredders",
  "Metal Shredders",
  "Waste Recycling Systems",
  "Spare Parts"
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Active": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Active</Badge>;
    case "Low Stock": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30">Low Stock</Badge>;
    case "Out of Stock": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Out of Stock</Badge>;
    case "Archived": return <Badge className="bg-gray-500/20 text-gray-400 border-gray-500/30">Archived</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

export default function ProductsCatalog() {
  const [activeTab, setActiveTab] = useState("catalog");
  const [searchQuery, setSearchQuery] = useState("");

  const filteredProducts = mockProducts.filter(p => 
    p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    p.sku.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">Products Catalog</h2>
          <p className="text-gray-400 mt-1">Manage industrial equipment, systems, and spare parts.</p>
        </div>
        <Button 
          className="bg-brand-red hover:bg-brand-red/90 text-white font-semibold"
          onClick={() => setActiveTab("add-product")}
        >
          <Plus className="w-4 h-4 mr-2" /> Add Product
        </Button>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-brand-charcoal border border-white/10 p-1">
          <TabsTrigger value="catalog" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Catalog Grid</TabsTrigger>
          <TabsTrigger value="add-product" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Add New Product</TabsTrigger>
        </TabsList>

        {/* CATALOG GRID TAB */}
        <TabsContent value="catalog" className="mt-6 space-y-6">
          <div className="flex items-center gap-4">
            <div className="relative w-full max-w-md">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
              <Input 
                placeholder="Search products by name or SKU..." 
                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>
            <Select>
              <SelectTrigger className="w-[200px] bg-brand-charcoal border-white/10 text-white">
                <SelectValue placeholder="All Categories" />
              </SelectTrigger>
              <SelectContent className="bg-brand-charcoal border-white/10 text-white">
                {categories.map(c => (
                  <SelectItem key={c} value={c} className="focus:bg-white/10 focus:text-white cursor-pointer">{c}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {filteredProducts.map((product) => (
              <Card key={product.id} className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm overflow-hidden flex flex-col group">
                <div className="relative h-48 w-full overflow-hidden bg-black/50">
                  <img 
                    src={product.image} 
                    alt={product.name}
                    className="w-full h-full object-cover opacity-70 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500 grayscale group-hover:grayscale-0"
                  />
                  <div className="absolute top-2 right-2">
                    {getStatusBadge(product.status)}
                  </div>
                  <div className="absolute top-2 left-2">
                    <Badge className="bg-black/60 text-white border-white/10 backdrop-blur-md">{product.sku}</Badge>
                  </div>
                </div>
                
                <CardHeader className="pb-2">
                  <div className="text-xs text-brand-red font-bold uppercase tracking-wider mb-1">{product.category}</div>
                  <CardTitle className="text-white text-lg">{product.name}</CardTitle>
                </CardHeader>
                
                <CardContent className="flex-1 pb-4 space-y-4">
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-gray-400 flex items-center gap-1"><Zap className="w-3 h-3"/> Power</span>
                    <span className="text-white font-medium">{product.power}</span>
                  </div>
                  <div className="flex justify-between items-center text-sm">
                    <span className="text-gray-400 flex items-center gap-1"><Scale className="w-3 h-3"/> Capacity</span>
                    <span className="text-white font-medium">{product.capacity}</span>
                  </div>
                  <div className="flex justify-between items-center text-sm border-t border-white/10 pt-2">
                    <span className="text-gray-400">Stock</span>
                    <span className="text-white font-bold">{product.stock} units</span>
                  </div>
                </CardContent>
                
                <CardFooter className="pt-0 flex items-center justify-between border-t border-white/10 bg-black/20 p-4 mt-auto">
                  <span className="text-brand-red font-black text-lg">{product.price}</span>
                  <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">
                      <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><FileText className="w-4 h-4 mr-2"/> Edit Specifications</DropdownMenuItem>
                      <DropdownMenuItem className="focus:bg-white/10 cursor-pointer"><Copy className="w-4 h-4 mr-2"/> Duplicate Product</DropdownMenuItem>
                      <DropdownMenuSeparator className="bg-white/10" />
                      <DropdownMenuItem className="focus:bg-brand-red focus:text-white cursor-pointer text-brand-red"><Archive className="w-4 h-4 mr-2"/> Archive Product</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </CardFooter>
              </Card>
            ))}
          </div>
        </TabsContent>

        {/* ADD PRODUCT TAB */}
        <TabsContent value="add-product" className="mt-6">
          <Card className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm max-w-5xl">
            <CardHeader>
              <CardTitle className="text-white">Add New Product</CardTitle>
              <CardDescription className="text-gray-400">Enter technical specifications and upload product media.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-8">
              
              {/* Basic Info */}
              <div>
                <h3 className="text-lg font-semibold text-white mb-4 border-b border-white/10 pb-2">Basic Information</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label className="text-gray-300">Product Name</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. Heavy Duty Metal Shredder" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">SKU / Model Number</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. KMT-8000" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">Category</Label>
                    <Select>
                      <SelectTrigger className="bg-black/40 border-white/10 text-white focus:ring-brand-red">
                        <SelectValue placeholder="Select Category" />
                      </SelectTrigger>
                      <SelectContent className="bg-brand-charcoal border-white/10 text-white">
                        {categories.map(c => (
                          <SelectItem key={c} value={c} className="focus:bg-white/10 focus:text-white cursor-pointer">{c}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">Base Price (DZD)</Label>
                    <Input type="number" className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="0.00" />
                  </div>
                  <div className="space-y-2 md:col-span-2">
                    <Label className="text-gray-300">Product Description</Label>
                    <Textarea className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red resize-none h-24" placeholder="Detailed marketing description..." />
                  </div>
                </div>
              </div>

              {/* Technical Specs */}
              <div>
                <h3 className="text-lg font-semibold text-white mb-4 border-b border-white/10 pb-2 flex items-center gap-2">
                  <Zap className="w-5 h-5 text-brand-red" /> Technical Specifications
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label className="text-gray-300">Processing Capacity</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. 5000 kg/h" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">Motor Power</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. 75 kW" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">Voltage</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. 380V / 50Hz" />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-gray-300">Total Weight</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. 2500 kg" />
                  </div>
                  <div className="space-y-2 md:col-span-2">
                    <Label className="text-gray-300">Machine Dimensions (L x W x H)</Label>
                    <Input className="bg-black/40 border-white/10 text-white focus-visible:ring-brand-red" placeholder="e.g. 3500 x 1800 x 2200 mm" />
                  </div>
                </div>
              </div>

              {/* Media Uploads */}
              <div>
                <h3 className="text-lg font-semibold text-white mb-4 border-b border-white/10 pb-2">Media & Documents</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Button variant="outline" className="h-32 border-dashed border-2 border-white/20 bg-black/20 text-gray-400 hover:text-white hover:border-brand-red hover:bg-brand-red/10 flex flex-col gap-2">
                    <ImageIcon className="w-8 h-8" />
                    <span>Upload Images</span>
                  </Button>
                  <Button variant="outline" className="h-32 border-dashed border-2 border-white/20 bg-black/20 text-gray-400 hover:text-white hover:border-blue-500 hover:bg-blue-500/10 flex flex-col gap-2">
                    <FileText className="w-8 h-8" />
                    <span>Upload Datasheet (PDF)</span>
                  </Button>
                  <Button variant="outline" className="h-32 border-dashed border-2 border-white/20 bg-black/20 text-gray-400 hover:text-white hover:border-purple-500 hover:bg-purple-500/10 flex flex-col gap-2">
                    <Video className="w-8 h-8" />
                    <span>Upload Video Demo</span>
                  </Button>
                </div>
              </div>

              <div className="flex justify-end gap-4 pt-4 border-t border-white/10">
                <Button variant="ghost" className="text-gray-400 hover:text-white">Cancel</Button>
                <Button className="bg-brand-red hover:bg-brand-red/90 text-white font-bold px-8">
                  Save Product
                </Button>
              </div>

            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}