import { Product } from '../../utils/product';
import { useState, useMemo } from 'react';
import Offcanvas from '../../components/Offcanvas';
import IconX from '../../components/Icon/IconX';
import AddProductPanel from './AddProduct';
import Swal from 'sweetalert2';

export type SalesOrder = {
  id: string;
  date: string;
  customerName: string;
  amount: number;
  status: string;
  qty: number;
  channel: Channel;
};


interface Props {
  product: Product;
  isOpen: boolean;
  onClose: () => void;
  setMode: (m: "add" | "edit") => void;
  setEditProduct: (p: Product) => void;
  setOpenAddProduct: (v: boolean) => void;
}
/* ── Channel pill colours ───────────────────────────────── */
export type Channel = "instagram" | "web" | "whatsapp";

const statusDot: Record<string, string> = {
  Active: 'bg-emerald-500',
  Inactive: 'bg-slate-300',
};

const stockStatusStyles: Record<string, string> = {
  'In Stock': 'bg-emerald-50 text-emerald-700',
  'Low Stock': 'bg-amber-50 text-amber-700',
  'Out of Stock': 'bg-rose-50 text-rose-700',
};

const formatCurrency = (value?: number) =>
  value != null ? `₹${value.toLocaleString('en-IN')}` : '—';

const formatDate = (value?: string) => {
  if (!value) return '—';
  const d = new Date(value);
  if (isNaN(d.getTime())) return value;
  return d.toLocaleDateString('en-IN', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
  });
};


const ProfileTab = ({ product }: { product: Product & Record<string, any> }) => {
  const [mainImage, setMainImage] = useState(product.image);

  const variants = product.variants as
    | {
      id: string;
      color: string;
      price: number;
      salePrice?: number;
      stockStatus: string;
      sku: string;
      status: string;
      image?: string;
      stock: { instagram: number, web: number, whatsapp: number },
    }[]
    | undefined;

  const hasVariants = Array.isArray(variants) && variants.length > 0;

  const allImages = useMemo(() => {
    const images = [product.image];
    if (product.thumbnail && !images.includes(product.thumbnail)) images.push(product.thumbnail);
    if (hasVariants) {
        variants!.forEach(v => {
            if (v.image && !images.includes(v.image)) {
                images.push(v.image);
            }
        });
    }
    return images;
  }, [product, hasVariants, variants]);

  const handleLightbox = () => {
    Swal.fire({
      html: `
        <div class="relative flex flex-col items-center justify-center">
          <div class="overflow-hidden rounded-lg flex items-center justify-center max-h-[75vh]">
            <img id="swal-custom-image" src="${mainImage}" alt="${product.name}" class="transition-transform duration-200 object-contain max-h-[75vh]" style="transform: scale(1);" />
          </div>
          <div class="flex gap-4 mt-6">
            <button id="swal-zoom-out" class="p-2.5 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer backdrop-blur-sm">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </button>
            <button id="swal-zoom-in" class="p-2.5 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer backdrop-blur-sm">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </button>
          </div>
        </div>
      `,
      showConfirmButton: false,
      width: 'auto',
      padding: '1em',
      background: 'transparent',
      backdrop: `rgba(0,0,0,0.85)`,
      customClass: {
        container: '!z-[99999]',
        htmlContainer: '!m-0', // Remove default swal margin
      },
      didOpen: () => {
        let currentScale = 1;
        const img = document.getElementById('swal-custom-image');
        const btnIn = document.getElementById('swal-zoom-in');
        const btnOut = document.getElementById('swal-zoom-out');

        btnIn?.addEventListener('click', () => {
          currentScale = Math.min(currentScale + 0.3, 4); // Max zoom 4x
          if (img) img.style.transform = `scale(${currentScale})`;
        });
        
        btnOut?.addEventListener('click', () => {
          currentScale = Math.max(currentScale - 0.3, 0.4); // Min zoom 0.4x
          if (img) img.style.transform = `scale(${currentScale})`;
        });
      }
    });
  };

  const regular = product.regularPrice ?? product.price;
  const sale = product.salePrice;
  const discountPct = sale ? Math.round(((regular - sale) / regular) * 100) : 0;

  return (
    <div className="space-y-5">
      {/* ── Hero + Title/Price side-by-side ─────────────────── */}
      <div className="relative rounded-xl bg-gradient-to-br from-[#FBF6ED] via-[#F6EFE1] to-[#F1E4CC] overflow-hidden p-4">
        <div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-[#C9974A]/15 blur-3xl" />
        <div className="absolute -bottom-10 -left-10 h-32 w-32 rounded-full bg-[#7A2E1D]/10 blur-3xl" />

        <div className="relative flex gap-4">
          {/* IMAGE */}
          <div className="flex-shrink-0 w-24">
            <div 
              className="relative h-24 w-24 rounded-xl bg-white shadow-[0_8px_20px_-8px_rgba(59,47,40,0.3)] ring-1 ring-white/60 p-2 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-[#C9974A] transition-all"
              onClick={handleLightbox}
            >
              {discountPct > 0 && (
                <span className="absolute -top-2 -left-2 bg-[#7A2E1D] text-white text-[9px] font-bold uppercase px-1.5 py-0.5 rounded-full shadow-sm">
                  -{discountPct}%
                </span>
              )}
              <img
                src={mainImage}
                alt={product.name}
                className="h-full w-full object-contain"
              />
            </div>
            {allImages.length > 1 && (
              <div className="flex flex-wrap gap-1 mt-2 justify-center">
                {allImages.map((src, i) => (
                  <button
                    key={i}
                    type="button"
                    onClick={() => setMainImage(src)}
                    className={`h-6 w-6 rounded-md bg-white p-0.5 transition-all ${
                      mainImage === src
                        ? 'ring-2 ring-[#C9974A]'
                        : 'ring-1 ring-white/80 opacity-70 hover:opacity-100'
                    }`}
                  >
                    <img src={src} alt="" className="h-full w-full object-contain rounded-sm" />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* TITLE + PRICE */}
          <div className="flex-1 min-w-0 py-0.5">
            <div className="flex items-center justify-between gap-2">
              <p className="text-[9px] font-semibold uppercase tracking-[0.15em] text-[#C9974A] truncate">
                {product.category} {product.brand ? `· ${product.brand}` : ''}
              </p>
              <span
                className={`flex-shrink-0 text-[9px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full ${stockStatusStyles[product.stockStatus] ?? 'bg-slate-100 text-slate-500'
                  }`}
              >
                {product.stockStatus}
              </span>
            </div>

            <h2 className="text-base font-bold text-[#3B2F28] mt-1 tracking-tight truncate">
              {product.name}
            </h2>

            <div className="flex items-center gap-1.5 mt-1">
              <span className={`w-1.5 h-1.5 rounded-full ${statusDot[product.status] ?? 'bg-slate-300'}`} />
              <span className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                {product.status}
              </span>
              <span className="text-slate-300">•</span>
              <span className="text-[10px] font-mono text-slate-500">SKU {product.sku}</span>
            </div>

            <div className="flex items-baseline gap-2 mt-2.5">
              {sale ? (
                <>
                  <span className="text-xl font-extrabold text-[#7A2E1D] tracking-tight">
                    {formatCurrency(sale)}
                  </span>
                  <span className="text-sm font-medium text-slate-400 line-through">
                    {formatCurrency(regular)}
                  </span>
                  <span className="text-[11px] font-semibold text-emerald-600">
                    Save {formatCurrency(regular - sale)}
                  </span>
                </>
              ) : (
                <span className="text-xl font-extrabold text-[#3B2F28] tracking-tight">
                  {formatCurrency(regular)}
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* ── Description ─────────────────── */}
      {product.description && (
        <div>
          <h4 className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-1.5">
            About this piece
          </h4>
          <p className="text-xs text-[#3B2F28]/80 leading-relaxed">
            {product.description}
          </p>
        </div>
      )}

      {/* ── Product Classification ─────────────────── */}
      <div className="pt-4 border-t border-[#ECE2D2]">
        <h3 className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-3">
          Specifications
        </h3>
        <dl className="grid grid-cols-2 gap-y-3 gap-x-6 text-xs">
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Category
            </dt>
            <dd className="font-semibold text-[#3B2F28]">{product.category}</dd>
          </div>
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Product Type
            </dt>
            <dd className="font-semibold text-[#3B2F28]">
              {product.productType || (product.variant === 'variable' || hasVariants ? 'Variation Product' : 'Single Product')}
            </dd>
          </div>
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Brand
            </dt>
            <dd className="font-semibold text-[#3B2F28]">{product.brand ?? '—'}</dd>
          </div>
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Product Code
            </dt>
            <dd className="font-semibold text-[#3B2F28] font-mono">{product.sku}</dd>
          </div>
        </dl>
      </div>

      {/* ── Attributes ─────────────────── */}
      {Array.isArray(product.attributes) && product.attributes.length > 0 && (
        <div className="pt-4 border-t border-[#ECE2D2]">
          <h4 className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-2.5">
            Attributes
          </h4>
          <div className="flex flex-wrap gap-1.5">
            {product.attributes.map((attr: { label: string; value: string }, i: number) => (
              <span
                key={i}
                className="inline-flex items-center gap-1 text-[11px] font-medium text-[#3B2F28] bg-[#FBF6ED] border border-[#ECE2D2] rounded-full px-2.5 py-1"
              >
                <span className="text-slate-500 font-semibold">{attr.label}:</span>
                {attr.value}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* ── Variants ─────────────────── */}
      {hasVariants && (
        <div className="pt-4 border-t border-[#ECE2D2]">
          <div className="flex items-center justify-between mb-2.5">
            <h3 className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500">
              Available Variants
            </h3>
            <span className="text-[10px] font-semibold text-slate-400">{variants!.length} options</span>
          </div>
          <div className="space-y-1.5">
            {variants!.map((v) => (
              <div
                key={v.id}
                className="flex items-center gap-3 rounded-lg border border-[#ECE2D2] px-3 py-2 hover:border-[#C9974A]/40 hover:bg-[#FBF6ED]/50 transition-colors"
              >
                {v.image && (
                  <img
                    src={v.image}
                    className="h-8 w-8 rounded-md object-cover flex-shrink-0 ring-1 ring-[#ECE2D2]"
                  />
                )}
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-1.5">
                    <span className="text-xs font-semibold text-[#3B2F28]">{v.color}</span>
                    <span className={`w-1 h-1 rounded-full ${statusDot[v.status] ?? 'bg-slate-300'}`} />
                  </div>
                  <p className="text-[10px] font-mono text-slate-400">{v.sku}</p>
                </div>
                <div className="text-right flex-shrink-0">
                  <p className="text-xs font-bold text-[#3B2F28]">
                    {v.salePrice ? formatCurrency(v.salePrice) : formatCurrency(v.price)}
                  </p>
                  <span
                    className={`inline-block mt-0.5 text-[8px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded-full ${stockStatusStyles[v.stockStatus] ?? 'bg-slate-100 text-slate-500'
                      }`}
                  >
                    {v.stock.instagram + v.stock.web + v.stock.whatsapp} · {v.stockStatus}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Audit Trail ─────────────────── */}
      <div className="pt-4 pb-0.5 border-t border-[#ECE2D2]">
        <h4 className="text-[9px] font-semibold uppercase tracking-[0.15em] text-slate-500 mb-2.5">
          Audit Trail
        </h4>
        <dl className="grid grid-cols-3 gap-3 text-xs">
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Created By
            </dt>
            <dd className="font-semibold text-[#3B2F28]">{product.createdBy ?? '—'}</dd>
          </div>
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Created At
            </dt>
            <dd className="font-semibold text-[#3B2F28]">{formatDate(product.createdAt)}</dd>
          </div>
          <div>
            <dt className="text-[9px] font-semibold text-slate-400 uppercase tracking-wide mb-0.5">
              Last Updated
            </dt>
            <dd className="font-semibold text-[#3B2F28]">{formatDate(product.updatedAt)}</dd>
          </div>
        </dl>
      </div>
    </div>
  );
};


const ViewInventory = ({ product, isOpen, onClose }: Props) => {
  const [openAddProduct, setOpenAddProduct] = useState(false);
  const [mode, setMode] = useState<"add" | "edit">("add");
  const [editProduct, setEditProduct] = useState<Product | null>(null);


  const header = (
    <div className='flex justify-between items-center gap-2 border-b'>
      <h2 className="text-base font-bold text-primary mt-0.5 line-clamp-1">View Product</h2>
      <button onClick={onClose}
        className="p-1.5 rounded-full hover:bg-amber-800 text-amber-600 hover:text-white transition-all cursor-pointer">
        <IconX />
      </button>
    </div>
  );


  return (
    <>
      <Offcanvas
        isOpen={isOpen}
        onClose={onClose}
        width={472}
        header={header}
      >
        <ProfileTab product={product} />
      </Offcanvas>

      <AddProductPanel
        open={openAddProduct}
        setOpen={setOpenAddProduct}
        mode={mode}
        editData={editProduct}
      />
    </>
  );
};

export default ViewInventory;