import React from 'react';
import { generateFMCGDetails } from '../utils/fmcgUtils';
import { Info, ShieldCheck, Beaker, Package, BarChart } from 'lucide-react';

interface Props {
  productId: string;
  category: string;
  productName: string;
  product?: any; // We'll pass the full product object here
}

export default function FMCGHoverOverlay({ productId, category, productName, product }: Props) {
  const details = generateFMCGDetails(productId, category);

  return (
    <div className="bg-white rounded-xl border border-purple-100/50 shadow-sm flex flex-col p-5 h-full">
      
      {/* 1. The Hook (Front Panel) */}
      <div className="flex justify-between items-start mb-3 pb-2 border-b border-purple-100">
        <div>
          <h3 className="font-black text-lg text-[#662582] leading-tight">{productName}</h3>
          <p className="text-xs font-bold text-slate-500 mt-1">{details.brandName} • {details.marketingClaim}</p>
        </div>
        <div className="text-right shrink-0">
          <div className="flex items-center gap-1.5 justify-end mb-1">
            <span className="text-[10px] font-bold text-slate-500">{details.netWeight}</span>
            <div className={`w-3 h-3 rounded-sm border flex items-center justify-center ${details.isVeg ? 'border-emerald-500' : 'border-rose-500'}`}>
              <div className={`w-1.5 h-1.5 rounded-full ${details.isVeg ? 'bg-emerald-500' : 'bg-rose-500'}`} />
            </div>
          </div>
        </div>
      </div>

      {/* 2. Ingredients & Legal (Back Panel) */}
      <div className="flex-1 space-y-3">
        {product?.description && (
          <div>
            <h5 className="text-[9px] font-extrabold uppercase tracking-widest text-slate-400 flex items-center gap-1 mb-1">
              <Info size={10} /> Description
            </h5>
            <p className="text-[10px] text-slate-700 leading-relaxed font-medium line-clamp-4">{product.description}</p>
          </div>
        )}

        {(product?.nutrients?.length > 0 || !product) && (
          <div>
            <h5 className="text-[9px] font-extrabold uppercase tracking-widest text-slate-400 flex items-center gap-1 mb-1">
              <Beaker size={10} /> {product ? 'Nutritional Highlights' : 'Ingredients'}
            </h5>
            <p className="text-[10px] text-slate-700 leading-relaxed font-medium">
              {product?.nutrients?.length > 0 ? product.nutrients.join(' • ') : details.ingredients}
            </p>
            {!product && (
              <div className="mt-1.5 inline-block bg-amber-50 border border-amber-200 px-2 py-0.5 rounded text-[9px] font-bold text-amber-800">
                {details.allergens}
              </div>
            )}
          </div>
        )}

        <div>
          <h5 className="text-[9px] font-extrabold uppercase tracking-widest text-slate-400 flex items-center gap-1 mb-1">
            <ShieldCheck size={10} /> FSSAI / Storage
          </h5>
          <p className="text-[10px] text-slate-700 font-mono font-bold">Lic No. {product?.fssaiLicense || details.fssai}</p>
          <p className="text-[9px] text-slate-500 mt-0.5">{details.storage}</p>
        </div>

        {/* 3. Retail Info */}
        <div className="pt-2 mt-auto border-t border-purple-100 flex justify-between items-center">
          <div>
            <span className="text-[8px] font-extrabold uppercase tracking-widest text-slate-400 block mb-0.5">Batch No.</span>
            <span className="text-[10px] font-mono font-bold text-slate-800">{details.batchNo}</span>
          </div>
          <div className="text-right">
            <span className="text-[8px] font-extrabold uppercase tracking-widest text-slate-400 block mb-0.5">EAN / Barcode</span>
            <span className="text-[10px] font-mono font-bold text-slate-800 tracking-wider">{details.barcode}</span>
          </div>
        </div>
      </div>

    </div>
  );
}
