import { prisma } from "@/lib/prisma";
import { formatPrice } from "@/lib/utils";
import Link from "next/link";
import { Plus, Pencil } from "lucide-react";
import AdminProductActions from "@/components/admin/AdminProductActions";

export const dynamic = "force-dynamic";

export default async function AdminProductsPage() {
  const products = await prisma.product.findMany({ orderBy: { createdAt: "desc" } });
  const linkedCount = products.filter((p: (typeof products)[0]) => p.cjVariantId).length;

  return (
    <div className="p-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Products</h1>
          <p className="text-gray-500 mt-1">
            {products.length} total products
            <span className="mx-2 text-gray-300">•</span>
            <span className={linkedCount === 0 ? "text-amber-600 font-medium" : ""}>
              {linkedCount} linked to CJ Dropshipping
            </span>
          </p>
        </div>
        <Link href="/admin/products/new" className="btn-primary">
          <Plus className="h-4 w-4" />
          Add Product
        </Link>
      </div>

      <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-100 bg-gray-50">
                <th className="text-left px-6 py-4 font-semibold text-gray-600">Product</th>
                <th className="text-left px-6 py-4 font-semibold text-gray-600">Category</th>
                <th className="text-left px-6 py-4 font-semibold text-gray-600">Pet</th>
                <th className="text-right px-6 py-4 font-semibold text-gray-600">Price</th>
                <th className="text-right px-6 py-4 font-semibold text-gray-600">Stock</th>
                <th className="text-left px-6 py-4 font-semibold text-gray-600">CJ Fulfilment</th>
                <th className="text-center px-6 py-4 font-semibold text-gray-600">Status</th>
                <th className="text-right px-6 py-4 font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {products.map((product: (typeof products)[0]) => (
                <tr key={product.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4">
                    <div className="font-medium text-gray-900 max-w-xs truncate">{product.name}</div>
                  </td>
                  <td className="px-6 py-4 text-gray-500">{product.category}</td>
                  <td className="px-6 py-4">
                    <span className="bg-primary-50 text-primary-700 text-xs font-medium px-2 py-1 rounded-full capitalize">
                      {product.petType}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <div className="font-semibold text-gray-900">{formatPrice(product.salePrice ?? product.price)}</div>
                    {product.salePrice && (
                      <div className="text-xs text-gray-400 line-through">{formatPrice(product.price)}</div>
                    )}
                  </td>
                  <td className="px-6 py-4 text-right">
                    <span className={product.stock < 10 ? "text-red-500 font-medium" : "text-gray-700"}>
                      {product.stock}
                    </span>
                  </td>
                  <td className="px-6 py-4">
                    {product.cjVariantId ? (
                      <div>
                        <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-green-100 text-green-700">
                          Linked
                        </span>
                        <div
                          className="text-[11px] text-gray-400 font-mono mt-1 max-w-[160px] truncate"
                          title={`Product ID: ${product.cjProductId ?? "—"}\nVariant ID: ${product.cjVariantId}`}
                        >
                          {product.cjVariantId}
                        </div>
                      </div>
                    ) : (
                      <Link
                        href={`/admin/products/${product.id}/edit`}
                        className="text-xs font-medium text-gray-400 hover:text-primary-600 hover:underline"
                      >
                        Not linked — add IDs
                      </Link>
                    )}
                  </td>
                  <td className="px-6 py-4 text-center">
                    <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
                      product.active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
                    }`}>
                      {product.active ? "Active" : "Inactive"}
                    </span>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center justify-end gap-2">
                      <Link
                        href={`/admin/products/${product.id}/edit`}
                        className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
                      >
                        <Pencil className="h-4 w-4" />
                      </Link>
                      <AdminProductActions productId={product.id} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}