'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Package,
  Plus,
  Search,
  MoreVertical,
  Edit2,
  Eye,
  X,
  Sparkles,
  ArchiveX,
  CheckCircle2,
  XCircle,
} from 'lucide-react';
import { cn, formatIDR } from '@/lib/utils';
import { useAdminProducts } from '@/hooks';
import type { Product } from '@/lib/services/product.service';
import { useUpdateProductStatus } from '@/hooks/useProducts';

import Image from 'next/image';
// ── Product card ───────────────────────────────────────────────────────
function ProductCard({
  product,
  delay,
  menuOpen,
  onMenuToggle,
  onMenuClose,
  onView,
  onEdit,
  onUpdateStatus,
}: {
  product: Product;
  delay: number;
  menuOpen: boolean;
  onMenuToggle: () => void;
  onMenuClose: () => void;
  onView: () => void;
  onEdit: () => void;
  onUpdateStatus: (id: string, newStatus: string) => void;
}) {
  const isOutOfStock = product.variants.every((v) => v.is_out_of_stock);
  const isLowStock =
    !isOutOfStock && product.variants.some((v) => v.is_low_stock);

  const priceLabel =
    product.min_price === product.max_price
      ? formatIDR(product.min_price)
      : `${formatIDR(product.min_price)} – ${formatIDR(product.max_price)}`;

  const totalStock = product.variants.reduce((acc, v) => acc + v.stock, 0);

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96, y: 10 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      transition={{ delay, duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
      className="group relative bg-white/60 backdrop-blur-md border border-gray-200 rounded-2xl hover:bg-white/90 hover:border-gray-300 hover:shadow-xl hover:shadow-black/5 transition-all duration-300 flex flex-col overflow-hidden"
    >
      {/* ── Image Section ── */}
      <div className="relative h-48 bg-gray-50 flex items-center justify-center overflow-hidden shrink-0 border-b border-gray-100">
        {product.primary_image_url ? (
          <Image
            src={product.primary_image_url}
            alt={product.name}
            className="w-full h-full object-cover grayscale-30 group-hover:grayscale-0 opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500"
            width={500}
            height={500}
          />
        ) : (
          <Package className="w-12 h-12 text-gray-300 group-hover:scale-110 transition-all duration-300" />
        )}

        {/* Status badge */}
        <div className="absolute top-3 left-3 z-10 flex gap-2">
          <span
            className={cn(
              'text-[10px] font-bold px-2.5 py-1 rounded-lg uppercase tracking-widest backdrop-blur-md border',
              product.status === 'active'
                ? 'bg-emerald-50 text-emerald-700 border-emerald-200 shadow-sm'
                : product.status === 'draft'
                  ? 'bg-amber-50 text-amber-700 border-amber-200 shadow-sm'
                  : 'bg-rose-50 text-rose-700 border-rose-200 shadow-sm'
            )}
          >
            {product.status}
          </span>
          {product.is_featured && (
            <span className="flex items-center gap-1 bg-yellow-400 text-gray-900 border border-yellow-500 text-[10px] font-bold px-2.5 py-1 rounded-lg uppercase tracking-widest shadow-sm">
              <Sparkles className="w-3 h-3" /> Unggulan
            </span>
          )}
        </div>

        {/* Out of stock overlay */}
        {isOutOfStock && (
          <div className="absolute inset-0 bg-white/50 backdrop-blur-[2px] flex items-center justify-center z-10">
            <span className="bg-rose-50 border border-rose-200 text-rose-700 text-[11px] font-black px-4 py-1.5 rounded-xl uppercase tracking-widest shadow-lg">
              Stok Habis
            </span>
          </div>
        )}

        {/* Context menu button */}
        <div className="absolute top-3 right-3 z-20">
          <button
            onClick={onMenuToggle}
            className="p-1.5 rounded-lg bg-white/80 backdrop-blur-md border border-gray-200 text-gray-600 hover:border-gray-300 hover:text-gray-900 hover:bg-white transition-all shadow-sm"
          >
            <MoreVertical className="w-4 h-4" />
          </button>

          <AnimatePresence>
            {menuOpen && (
              <>
                <div className="fixed inset-0 z-10" onClick={onMenuClose} />
                <motion.div
                  initial={{ opacity: 0, scale: 0.95, y: -4 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.95, y: -4 }}
                  transition={{ duration: 0.15 }}
                  className="absolute right-0 top-10 z-20 bg-white/90 backdrop-blur-xl border border-gray-200 shadow-xl rounded-xl py-2 min-w-[140px] overflow-hidden"
                >
                  <button
                    onClick={() => {
                      onMenuClose();
                      onView();
                    }}
                    className="w-full flex items-center gap-3 px-4 py-2.5 text-xs font-bold text-gray-600 hover:text-gray-900 hover:bg-gray-50 tracking-wide transition-colors"
                  >
                    <Eye className="w-4 h-4 text-gray-400" /> Lihat Detail
                  </button>
                  <button
                    onClick={() => {
                      onMenuClose();
                      onEdit();
                    }}
                    className="w-full flex items-center gap-3 px-4 py-2.5 text-xs font-bold text-gray-600 hover:text-gray-900 hover:bg-gray-50 tracking-wide transition-colors"
                  >
                    <Edit2 className="w-4 h-4 text-gray-400" /> Edit Produk
                  </button>
                  {/* ── TOMBOL UBAH STATUS CEPAT ── */}
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onMenuClose();
                      // Toggle: Jika aktif -> inactive, selain itu -> active
                      onUpdateStatus(
                        product.id,
                        product.status === 'active' ? 'inactive' : 'active'
                      );
                    }}
                    className="w-full flex items-center gap-3 px-4 py-2.5 text-xs font-bold text-gray-600 hover:text-gray-900 hover:bg-gray-50 tracking-wide transition-colors border-t border-gray-100 mt-1 pt-3"
                  >
                    {product.status === 'active' ? (
                      <>
                        <XCircle className="w-4 h-4 text-rose-500" /> Set
                        Nonaktif
                      </>
                    ) : (
                      <>
                        <CheckCircle2 className="w-4 h-4 text-emerald-500" />{' '}
                        Set Aktif
                      </>
                    )}
                  </button>
                </motion.div>
              </>
            )}
          </AnimatePresence>
        </div>
      </div>

      {/* ── Info Section ── */}
      <div className="p-5 flex flex-col flex-1">
        <p className="text-[10px] font-bold text-yellow-600 uppercase tracking-widest mb-1.5 truncate">
          {product.category.name}
        </p>

        <h3 className="font-bold text-gray-900 text-base tracking-wide leading-snug line-clamp-2 mb-1 group-hover:text-yellow-600 transition-colors">
          {product.name}
        </h3>
        <p className="text-[10px] font-mono font-medium text-gray-500 uppercase tracking-widest mb-4">
          SKU: {product.sku}
        </p>

        {/* Variant pills */}
        <div className="flex gap-2 flex-wrap mb-4 mt-auto">
          {product.variants.slice(0, 3).map((v) => (
            <span
              key={v.id}
              className={cn(
                'text-[9px] font-bold px-2 py-1 rounded-md uppercase tracking-widest border',
                v.is_out_of_stock
                  ? 'border-gray-200 text-gray-500 bg-gray-50'
                  : 'border-yellow-200 text-yellow-700 bg-yellow-50'
              )}
            >
              {v.name}
            </span>
          ))}
          {product.variants.length > 3 && (
            <span className="text-[9px] font-bold px-2 py-1 rounded-md border border-gray-200 text-gray-500 bg-gray-50 uppercase tracking-widest">
              +{product.variants.length - 3}
            </span>
          )}
        </div>

        {/* Price + stock row */}
        <div className="flex items-end justify-between pt-4 border-t border-gray-100">
          <div>
            <p className="text-lg font-black text-gray-900 tracking-tight">
              {priceLabel}
            </p>
            {product.total_sold > 0 && (
              <p className="text-[10px] font-bold text-gray-500 mt-0.5 uppercase tracking-widest">
                {product.total_sold.toLocaleString('id-ID')} Terjual
              </p>
            )}
          </div>
          <span
            className={cn(
              'text-[10px] font-bold border px-2.5 py-1 rounded-lg uppercase tracking-widest shadow-sm',
              isOutOfStock
                ? 'border-rose-200 bg-rose-50 text-rose-700'
                : isLowStock
                  ? 'border-amber-200 bg-amber-50 text-amber-700'
                  : 'border-emerald-200 bg-emerald-50 text-emerald-700'
            )}
          >
            {isOutOfStock
              ? 'Habis'
              : `Sisa ${totalStock.toLocaleString('id-ID')}`}
          </span>
        </div>
      </div>
    </motion.div>
  );
}

// ── Page ───────────────────────────────────────────────────────────────
export default function AdminProductsPage() {
  const router = useRouter();
  const [search, setSearch] = useState('');
  const [menuOpenId, setMenuOpenId] = useState<string | null>(null);

  const { data: products, isLoading } = useAdminProducts();
  const updateStatusMutation = useUpdateProductStatus();

  const filtered =
    products?.data.filter(
      (p) =>
        p.name.toLowerCase().includes(search.toLowerCase()) ||
        p.sku.toLowerCase().includes(search.toLowerCase())
    ) ?? [];

  return (
    <div className="min-h-screen bg-transparent text-gray-900 relative overflow-hidden pb-12">
      {/* Background Glow Blobs */}
      <div className="fixed top-0 right-0 w-[500px] h-[500px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />
      <div className="fixed bottom-0 left-0 w-[500px] h-[500px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />

      <div className="relative z-10 max-w-7xl mx-auto space-y-8">
        {/* ── Header ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 relative"
        >
          <div>
            <h2 className="text-3xl sm:text-4xl font-black text-gray-900 tracking-tight leading-none mb-2">
              Manajemen <span className="text-yellow-600">Produk</span>
            </h2>
            <p className="text-sm font-medium text-gray-500 tracking-wide">
              Kelola inventaris, harga, dan ketersediaan produk Anda.
            </p>
          </div>
          {/* Mascot decoration */}
          <div className="absolute right-40 -top-8 w-24 md:w-32 opacity-20 pointer-events-none hidden sm:block z-0">
            <Image
              src="/mascots/salta-flag-pose.avif"
              alt="Salto Mascot"
              className="w-full h-auto object-contain"
              width={500}
              height={500}
            />
          </div>
          <button
            onClick={() => router.push('/dashboard/admin/products/add')}
            className="flex items-center gap-2 px-5 py-3 rounded-xl bg-yellow-400 hover:bg-yellow-500 text-yellow-900 text-sm font-bold tracking-wide transition-all shadow-lg shadow-yellow-400/20 relative z-10"
          >
            <Plus className="w-5 h-5" />
            <span className="hidden sm:inline">Tambah Produk</span>
          </button>
        </motion.div>

        {/* ── Search Bar ── */}
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.05 }}
          className="flex items-center gap-4"
        >
          <div className="flex-1 relative bg-white/60 backdrop-blur-md border border-gray-200 rounded-xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Cari nama produk atau SKU..."
              className="w-full pl-11 pr-10 py-3.5 bg-transparent text-gray-900 text-sm font-medium placeholder:text-gray-400 focus:outline-none tracking-wide"
            />
            {search && (
              <button
                onClick={() => setSearch('')}
                className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>
          {!isLoading && search && (
            <span className="text-xs font-bold text-gray-500 uppercase tracking-widest whitespace-nowrap bg-white/60 px-4 py-3.5 rounded-xl border border-gray-200 shadow-sm">
              {filtered.length} Ditemukan
            </span>
          )}
        </motion.div>

        {/* ── Stats strip ── */}
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.08 }}
          className="grid grid-cols-2 md:grid-cols-3 gap-4"
        >
          {[
            {
              label: 'Total Produk',
              value: products?.data.length ?? 0,
              color: 'text-yellow-600',
              glow: 'rgba(250,204,21,0.15)',
            },
            {
              label: 'Stok Terbatas',
              value:
                products?.data.filter((p) =>
                  p.variants.some((v) => v.is_low_stock && !v.is_out_of_stock)
                ).length ?? 0,
              color: 'text-amber-600',
              glow: 'rgba(217,119,6,0.15)',
            },
            {
              label: 'Stok Habis',
              value:
                products?.data.filter((p) =>
                  p.variants.every((v) => v.is_out_of_stock)
                ).length ?? 0,
              color: 'text-rose-600',
              glow: 'rgba(225,29,72,0.15)',
            },
          ].map(({ label, value, color, glow }) => (
            <div
              key={label}
              className="relative border border-gray-200 bg-white/60 backdrop-blur-xl rounded-2xl px-6 py-5 overflow-hidden shadow-sm"
            >
              <div
                className="absolute -top-10 -right-10 w-24 h-24 rounded-full blur-3xl pointer-events-none"
                style={{ background: glow }}
              />
              <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">
                {label}
              </p>
              <p className={cn('text-3xl font-black tracking-tight', color)}>
                {value}
              </p>
            </div>
          ))}
        </motion.div>

        {/* ── Product grid ── */}
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.12 }}
        >
          {/* Loading */}
          {isLoading && (
            <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-6">
              {Array.from({ length: 6 }).map((_, i) => (
                <div
                  key={i}
                  className="border border-gray-100 bg-white/40 rounded-2xl animate-pulse overflow-hidden shadow-sm"
                >
                  <div className="h-48 bg-gray-100" />
                  <div className="p-6 space-y-4">
                    <div className="h-3 rounded bg-gray-200 w-1/4" />
                    <div className="h-5 rounded bg-gray-200 w-3/4" />
                    <div className="h-3 rounded bg-gray-200 w-1/3" />
                    <div className="h-6 rounded-lg bg-gray-200 w-1/2 mt-6" />
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Empty */}
          {!isLoading && filtered.length === 0 && (
            <div className="bg-white/60 backdrop-blur-xl border border-gray-200 rounded-3xl py-24 flex flex-col items-center text-center shadow-sm">
              <div className="w-20 h-20 bg-gray-50 border border-gray-100 rounded-full flex items-center justify-center mb-6">
                <ArchiveX className="w-10 h-10 text-gray-400" />
              </div>
              <p className="font-black text-gray-900 text-xl tracking-tight mb-2">
                Tidak Ada Produk Ditemukan
              </p>
              <p className="text-sm font-medium text-gray-500">
                {search
                  ? 'Coba ubah kata kunci pencarian Anda.'
                  : 'Silakan tambahkan produk pertama Anda ke dalam sistem.'}
              </p>
            </div>
          )}

          {/* Grid */}
          {!isLoading && filtered.length > 0 && (
            <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-6">
              {filtered.map((product, i) => (
                <ProductCard
                  key={product.id}
                  product={product}
                  delay={i * 0.04}
                  menuOpen={menuOpenId === product.id}
                  onMenuToggle={() =>
                    setMenuOpenId(menuOpenId === product.id ? null : product.id)
                  }
                  onMenuClose={() => setMenuOpenId(null)}
                  onView={() =>
                    router.push(`/dashboard/admin/products/${product.slug}`)
                  }
                  onEdit={() =>
                    router.push(
                      `/dashboard/admin/products/${product.slug}/edit`
                    )
                  }
                  onUpdateStatus={(id, status) =>
                    updateStatusMutation.mutate({ id, status })
                  }
                />
              ))}
            </div>
          )}
        </motion.div>
      </div>
    </div>
  );
}