import React from 'react';
import { Boxes } from 'lucide-react';
import { useCRM } from '../context/CRMContext';

const Inventory: React.FC = () => {
    const { inventory } = useCRM();

    return (
        <div className="glass-card rounded-2xl border border-white/5 shadow-sm overflow-hidden animate-in fade-in duration-500">
            <div className="p-6 bg-white/[0.02] border-b border-white/5 flex justify-between items-center">
                <div>
                    <h2 className="text-xl font-bold text-white tracking-tight">Estoque & Armazenamento</h2>
                    <p className="text-xs text-slate-500 tracking-wide mt-1">Visão geral dos ativos em custódia.</p>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-6">
                {inventory.length > 0 ? inventory.map((item, idx) => (
                    <div key={idx} className="p-5 rounded-xl border border-white/5 bg-black/20 group hover:bg-[#0F1115] hover:border-indigo-500/30 transition-all relative overflow-hidden">
                        <div className="absolute top-0 right-0 p-2 opacity-50">
                            <Boxes size={48} className="text-white/5" strokeWidth={1} />
                        </div>

                        <div className="flex justify-between items-start mb-3 relative z-10">
                            <span className="text-[10px] font-mono text-slate-500 border border-white/10 px-1.5 py-0.5 rounded">{item.sku}</span>
                            <span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-[10px] font-bold tracking-tight">QTD: {item.quantity}</span>
                        </div>

                        <h4 className="text-sm font-bold text-white mb-4 leading-tight h-10 overflow-hidden line-clamp-2 relative z-10" title={item.name}>{item.name}</h4>

                        <div className="space-y-2 mb-4 relative z-10 bg-black/20 p-3 rounded-lg border border-white/5">
                            <div className="flex justify-between text-[10px] font-bold uppercase text-slate-500">
                                <span>Custo Base</span>
                                <span className="text-slate-300 font-mono">R$ {item.avgCostBRL.toFixed(2)}</span>
                            </div>
                            <div className="flex justify-between text-[10px] font-bold uppercase text-slate-500">
                                <span>Preço Alvo</span>
                                <span className="text-emerald-400 font-mono">R$ {item.marketPriceBRL.toFixed(2)}</span>
                            </div>
                        </div>

                        <button className="w-full py-2 bg-white/5 border border-white/10 rounded-lg text-[10px] font-bold text-slate-400 group-hover:bg-indigo-600 group-hover:text-white group-hover:border-indigo-500 transition-all uppercase tracking-wider relative z-10">
                            Lançar Venda
                        </button>
                    </div>
                )) : (
                    <div className="col-span-full py-40 text-center opacity-30">
                        <Boxes size={64} className="mx-auto mb-4 text-white" strokeWidth={1} />
                        <p className="text-xs font-mono uppercase tracking-widest text-slate-500">Nenhum item em estoque</p>
                    </div>
                )}
            </div>
        </div>
    );
};

export default Inventory;