"use client";

import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Container } from "@/components/container";
import { DemoBadge } from "@/components/dashboard/demo-badge";
import { useLanguage } from "@/lib/i18n/context";
import type { ProductCardView } from "@/lib/product-data/view-models";

function formatPrice(price: number, currency: string, locale: "en" | "es"): string {
  return new Intl.NumberFormat(locale === "es" ? "es-US" : "en-US", {
    style: "currency",
    currency,
    maximumFractionDigits: 2,
  }).format(price);
}

export function AdminProductsTable({ products, total }: { products: ProductCardView[]; total: number }) {
  const { t, locale } = useLanguage();
  const p = t.admin.products;

  return (
    <div className="admin-page py-8">
      <Container className="flex flex-col gap-4">
        <p className="admin-page-intro text-sm text-muted-foreground">{p.totalCount.replace("{count}", String(total))}</p>
        <div className="admin-table-frame overflow-x-auto">
          <table className="admin-data-table w-full min-w-[760px] text-left text-sm">
            <colgroup>
              <col style={{ width: "38%" }} />
              <col style={{ width: "23%" }} />
              <col style={{ width: "14%" }} />
              <col style={{ width: "12%" }} />
              <col style={{ width: "13%" }} />
            </colgroup>
            <thead>
              <tr className="border-b border-border text-xs text-muted-foreground">
                <th scope="col" className="whitespace-nowrap p-3 font-medium">
                  {p.name}
                </th>
                <th scope="col" className="whitespace-nowrap p-3 font-medium">
                  {p.category}
                </th>
                <th scope="col" className="whitespace-nowrap p-3 font-medium">
                  {p.price}
                </th>
                <th scope="col" className="whitespace-nowrap p-3 text-right font-medium">
                  {p.opportunity}
                </th>
                <th scope="col" className="whitespace-nowrap p-3 font-medium">
                  {p.status}
                </th>
              </tr>
            </thead>
            <tbody>
              {products.map((product) => (
                <tr key={product.id} className="border-b border-border last:border-0">
                  <td className="p-3">
                    <Link href={`/dashboard/products/${product.id}`} className="font-medium text-foreground hover:text-primary">
                      {product.canonicalName}
                    </Link>
                  </td>
                  <td className="truncate p-3 text-muted-foreground">{product.category}</td>
                  <td className="whitespace-nowrap p-3 text-foreground">
                    {product.currentPrice !== null ? formatPrice(product.currentPrice, product.currency, locale) : "—"}
                  </td>
                  <td className="whitespace-nowrap p-3 text-right tabular-nums text-foreground">{product.score ? product.score.opportunityScore : "—"}</td>
                  <td className="whitespace-nowrap p-3">
                    <div className="flex flex-wrap items-center gap-1.5">
                      <Badge variant="outline">{p.active}</Badge>
                      {product.isDemo && <DemoBadge />}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Container>
    </div>
  );
}