tfm_ainventory/frontend/components/InventoryTable.tsx

'use client';

import { useState } from 'react';
import { Item } from '@/lib/db';
import { ChevronRight, ChevronDown, Layers, Package } from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

interface InventoryTableProps {
  items: Item[];
  categories: string[];
  expandedCategory: string | null;
  onExpandCategory: (category: string | null) => void;
  onItemClick: (item: Item) => void;
  onEditCategory?: (category: string) => void;
  categoriesList?: any[];
}

export default function InventoryTable({
  items,
  categories,
  expandedCategory,
  onExpandCategory,
  onItemClick,
  onEditCategory,
  categoriesList = []
}: InventoryTableProps) {
  if (categories.length === 0) {
    return (
      <div className="py-2 lg:py-3 xl:py-40 text-center text-secondary">
        <Package size={48} className="mx-auto mb-4 opacity-10" />
        <p className="font-medium">No results found</p>
      </div>
    );
  }

  return (
    <section className="space-y-3">
      {categories.map(cat => {
        const categoryItems = items.filter(i => i.category === cat);
        return (
          <div key={cat} className="bg-surface/50 border border-slate-800/50 rounded-3xl overflow-hidden transition-all duration-300">
            <div
              className="w-full p-4 md:p-5 lg:p-6 xl:p-8 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
              onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary transition-colors">
                  <Layers size={20} />
                </div>
                <div className="text-left">
                  <h3 className="card-title text-base sm:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl">{cat}</h3>
                  <p className="card-subtitle tracking-tight">
                    {categoryItems.length} Item types in stock
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                {expandedCategory === cat ? <ChevronDown size={20} className="text-primary" /> : <ChevronRight size={20} className="text-secondary" />}
                {onEditCategory && (
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onEditCategory(cat);
                    }}
                    className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
                  >
                    <EditIcon size={16} />
                  </button>
                )}
              </div>
            </div>

            {expandedCategory === cat && (
              <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
                <div className="h-px bg-slate-800/50 mb-4 mx-2" />
                {categoryItems.map(item => (
                  <div
                    key={item.id}
                    onClick={() => onItemClick(item)}
                    className="bg-background/40 border border-slate-800/50 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
                  >
                    <div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
                      <div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
                        <Package size={14} />
                      </div>
                      <div className="truncate">
                        <h4 className="card-title truncate">{item.name}</h4>
                        <p className="card-subtitle mt-0 lowercase opacity-80 truncate">{item.specs}</p>
                      </div>
                    </div>
                    <div className="text-right shrink-0">
                      <span className={cn(
                        "text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black",
                        item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
                      )}>
                        {item.quantity}
                      </span>
                      <p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-muted font-bold tracking-tight">Stock</p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </section>
  );
}

// EditIcon component (lucide-react equivalent)
function EditIcon({ size = 24 }: { size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
    </svg>
  );
}