import React from 'react';
import Link from 'next/link';
import { Product } from '@/types';
import { Zap, Shield, Check, ShoppingCart } from 'lucide-react';

interface ProductCardProps {
  product: Product;
}

export default function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-lg transition flex flex-col justify-between">
      <div>
        {/* Product Badge & Image Placeholder */}
        <div className="relative bg-slate-100 aspect-video flex items-center justify-center p-6 border-b border-slate-100">
          <div className="flex flex-col items-center text-slate-400">
            <Zap className="w-12 h-12 text-emerald-500 mb-1" />
            <span className="text-xs font-mono font-medium">{product.voltage} {product.capacity_ah ? `${product.capacity_ah}Ah` : ''}</span>
          </div>

          <div className="absolute top-3 left-3 flex flex-col gap-1">
            <span className="bg-emerald-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full uppercase">
              {product.chemistry}
            </span>
          </div>

          <div className="absolute top-3 right-3">
            <span className="bg-slate-900/80 text-white text-[10px] font-semibold px-2 py-0.5 rounded-full flex items-center gap-1">
              <Shield className="w-3 h-3 text-emerald-400" />
              {product.warranty_months}M Warranty
            </span>
          </div>
        </div>

        {/* Product Details */}
        <div className="p-4">
          <div className="text-[11px] font-semibold text-emerald-600 uppercase tracking-wide">
            {product.brand_name || 'Voltix Energy'}
          </div>
          <Link href={`/products/${product.slug}`}>
            <h3 className="font-bold text-slate-900 text-sm mt-1 hover:text-emerald-600 line-clamp-2">
              {product.name}
            </h3>
          </Link>

          {/* Quick Specs Pill Grid */}
          <div className="mt-3 grid grid-cols-2 gap-1.5 text-[11px] text-slate-600 bg-slate-50 p-2 rounded-lg">
            <div>
              <span className="text-slate-400">Nominal:</span> <strong className="text-slate-800">{product.voltage}</strong>
            </div>
            <div>
              <span className="text-slate-400">Capacity:</span> <strong className="text-slate-800">{product.capacity_ah || '--'} Ah</strong>
            </div>
            <div>
              <span className="text-slate-400">Energy:</span> <strong className="text-slate-800">{product.nominal_energy_kwh || '--'} kWh</strong>
            </div>
            <div>
              <span className="text-slate-400">Stock:</span> <strong className={product.stock > 0 ? "text-emerald-600" : "text-rose-600"}>{product.stock > 0 ? `${product.stock} in stock` : 'Out of stock'}</strong>
            </div>
          </div>
        </div>
      </div>

      {/* Pricing & CTA */}
      <div className="p-4 pt-0">
        <div className="flex items-baseline space-x-2 my-3">
          <span className="text-xl font-extrabold text-slate-900">
            ₹{Number(product.final_price).toLocaleString('en-IN')}
          </span>
          {product.discount_price && Number(product.discount_price) < Number(product.price) && (
            <span className="text-xs text-slate-400 line-through">
              ₹{Number(product.price).toLocaleString('en-IN')}
            </span>
          )}
        </div>

        <div className="flex items-center gap-2">
          <Link
            href={`/products/${product.slug}`}
            className="flex-1 text-center bg-slate-900 hover:bg-slate-800 text-white text-xs font-semibold py-2.5 rounded-lg transition"
          >
            Technical Specs
          </Link>
          <button
            title="Add to cart"
            className="bg-emerald-50 hover:bg-emerald-100 text-emerald-700 p-2.5 rounded-lg border border-emerald-200 transition"
          >
            <ShoppingCart className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}