"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { CalendarDays, MoreVertical, Package, Search, SlidersHorizontal } from "lucide-react";
import Link from "next/link";

type ProductRow = {
  id: string;
  image: string;
  productName: string;
  category: string;
  unitPrice: string;
  inStock: number;
  discount: string;
  totalValue: string;
  barcode: string;
};

type ProductsPageBodyProps = {
  app: string;
};

const PRODUCT_ROWS: ProductRow[] = [
  {
    id: "1",
    image: "🎧",
    productName: "Earphones",
    category: "Gadgets",
    unitPrice: "$ 1,200",
    inStock: 8,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
  {
    id: "2",
    image: "🕹️",
    productName: "Joystick",
    category: "Games Station",
    unitPrice: "$ 120",
    inStock: 12,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
  {
    id: "3",
    image: "⌚",
    productName: "Smart Watch",
    category: "Gadgets",
    unitPrice: "$ 1,900",
    inStock: 6,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
  {
    id: "4",
    image: "📱",
    productName: "Phone",
    category: "Gadgets",
    unitPrice: "$ 2,400",
    inStock: 16,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
  {
    id: "5",
    image: "🖱️",
    productName: "Mouse",
    category: "Work Station",
    unitPrice: "$ 600",
    inStock: 7,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
  {
    id: "6",
    image: "💻",
    productName: "Hp_Laptop 2022",
    category: "Work Station",
    unitPrice: "$ 4,000",
    inStock: 13,
    discount: "$0.00",
    totalValue: "$ 50,000.00",
    barcode: "||||||||||||",
  },
];

export default function ProductsPageBody({ app }: ProductsPageBodyProps) {
  const hasData = PRODUCT_ROWS.length > 0;

  const summaryItems = hasData
    ? [
        { label: "All Products", value: "350", colorClassName: "text-[#074473]" },
        { label: "Active", value: "312", colorClassName: "text-[#039855]" },
        { label: "Low Stock Alert", value: "23", colorClassName: "text-[#F04438]" },
        { label: "Expired", value: "23", colorClassName: "text-[#8B8D97]" },
        { label: "1 Start Rating", value: "2", colorClassName: "text-[#8B8D97]" },
      ]
    : [
        { label: "All Products", value: "0", colorClassName: "text-[#074473]" },
        { label: "Active", value: "0", colorClassName: "text-[#039855]" },
        { label: "Low Stock Alert", value: "0", colorClassName: "text-[#F04438]" },
        { label: "Expired", value: "0", colorClassName: "text-[#8B8D97]" },
        { label: "1 Start Rating", value: "0", colorClassName: "text-[#8B8D97]" },
      ];

  return (
    <div className="min-h-0 space-y-6 bg-[#F4F5FA] p-5 md:p-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-2xl font-semibold leading-[1.35] text-[#45464E]">Product Inventory Summary</h1>
        <div className="flex items-center gap-2.5">
          <Button
            asChild
            className="h-9 rounded-md bg-[#F28B20] px-5 text-xs font-semibold text-white hover:bg-[#de7e1d]"
          >
            <Link href={`/${app}/manage-category`}>Manage Category</Link>
          </Button>
          <Button
            asChild
            className="h-9 rounded-md bg-[#074473] px-5 text-xs font-semibold text-white hover:bg-[#063861]"
          >
            <Link href={`/${app}/products/new`}>Add New Product</Link>
          </Button>
        </div>
      </div>

      <section className="grid gap-4 rounded-xl border border-[#F1F3F9] bg-white p-5 shadow-[0_1px_2px_rgba(16,24,40,0.04)] sm:grid-cols-2 lg:grid-cols-5 lg:divide-x lg:divide-[#F1F3F9] lg:gap-0 lg:p-0">
        {summaryItems.map((item, index) => (
          <div key={item.label} className="space-y-2 px-4 py-4 lg:py-6">
            {index === 0 || index === 1 ? (
              <div className="mb-1 flex h-5 w-5 items-center justify-center rounded bg-[#EEF1F4] text-[#667085]">
                <Package className="size-3" aria-hidden />
              </div>
            ) : null}
            <p className={`text-xl font-bold leading-[1.35] ${item.colorClassName}`}>{item.label}</p>
            <p className="text-xl font-bold leading-[1.35] text-[#667085]">{item.value}</p>
          </div>
        ))}
        {hasData ? (
          <div className="hidden items-start justify-end px-4 py-4 lg:flex">
            <button
              type="button"
              className="inline-flex items-center gap-1 text-[10px] font-medium text-[#ABAFB1]"
              aria-label="Filter by week"
            >
              This Week
              <CalendarDays className="size-3" aria-hidden />
            </button>
          </div>
        ) : null}
      </section>

      <section className="rounded-xl border border-[#F1F3F9] bg-white p-5 shadow-[0_1px_2px_rgba(16,24,40,0.04)]">
        <div className={`flex flex-col gap-4 md:flex-row md:items-center md:justify-between ${hasData ? "mb-4" : "mb-8"}`}>
          <h2 className={`text-xl font-semibold ${hasData ? "text-[#1C1D22]" : "text-[#CFD3D4]"}`}>Product Inventory Items</h2>
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex h-10 w-full items-center gap-2 rounded-md border border-[#F1F3F9] px-3 md:w-[260px]">
              <Search className="size-4 text-[#ABAFB1]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-xs text-[#45464E] placeholder:text-[#CFD3D4] focus-visible:ring-0"
                aria-label="Search products"
              />
            </div>
            <Button
              type="button"
              variant="outline"
              className="h-10 gap-1 rounded-md border-[#F1F3F9] bg-white px-3 text-xs font-medium text-[#CFD3D4] hover:bg-white"
            >
              <SlidersHorizontal className="size-4" aria-hidden />
              Filters
            </Button>
            <Button
              type="button"
              variant="outline"
              className="h-10 gap-1 rounded-md border-[#F1F3F9] bg-white px-3 text-xs font-medium text-[#CFD3D4] hover:bg-white"
            >
              <Package className="size-4" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        {hasData ? (
          <div className="overflow-x-auto rounded-md border border-[#F1F3F9]">
            <table className="w-full min-w-[920px]">
              <thead>
                <tr className="border-b border-[#F1F3F9] bg-white">
                  <th className="px-3 py-2 text-left">
                    <input type="checkbox" className="size-3 rounded border border-[#B9C0D4]" />
                  </th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Image</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Product Name</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Category</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Unit Price</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">In-Stock</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Discount</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Total Value</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Bar Code</th>
                  <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Action</th>
                </tr>
              </thead>
              <tbody>
                {PRODUCT_ROWS.map((row) => (
                  <tr key={row.id} className="border-b border-[#F7F8FB]">
                    <td className="px-3 py-2">
                      <input type="checkbox" className="size-3 rounded border border-[#B9C0D4]" />
                    </td>
                    <td className="px-3 py-2">
                      <div className="grid size-8 place-items-center rounded bg-[#F1F3F9] text-sm">{row.image}</div>
                    </td>
                    <td className="px-3 py-2 text-[11px] font-medium text-[#1C1D22]">{row.productName}</td>
                    <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.category}</td>
                    <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.unitPrice}</td>
                    <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.inStock}</td>
                    <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.discount}</td>
                    <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.totalValue}</td>
                    <td className="px-3 py-2 font-mono text-[10px] tracking-[1px] text-[#1C1D22]">{row.barcode}</td>
                    <td className="px-3 py-2">
                      <button
                        type="button"
                        className="inline-flex items-center justify-center rounded p-1 text-[#1C1D22] hover:bg-[#F5F7FA]"
                        aria-label="More actions"
                      >
                        <MoreVertical className="size-3.5" aria-hidden />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="flex min-h-[340px] flex-col items-center justify-center gap-6 py-10">
            <div className="flex size-[116px] items-center justify-center rounded-full border border-[#E1E2E9] bg-[#F4F5FA]">
              <Package className="size-[44px] text-[#BEC0CA]" strokeWidth={1.4} aria-hidden />
            </div>
            <div className="space-y-1 text-center">
              <p className="text-[26px] font-bold leading-[1.35] text-[#1C1D22]">No Product Yet?</p>
              <p className="text-xl font-normal leading-[1.35] text-[#8B8D97]">Add Products To Your Store.</p>
            </div>
            <Button
              type="button"
              className="h-11 rounded-md bg-[#074473] px-8 text-xs font-medium text-white hover:bg-[#063861]"
            >
              Add new product
            </Button>
          </div>
        )}

        {hasData ? (
          <div className="mt-3 flex items-center justify-between">
            <Button
              type="button"
              variant="outline"
              className="h-8 rounded-md border-[#E5E7EB] px-4 text-[11px] font-medium text-[#8B8D97]"
            >
              Previous
            </Button>
            <p className="text-[11px] text-[#CFD3D4]">page 1 of 10</p>
            <Button
              type="button"
              variant="outline"
              className="h-8 rounded-md border-[#E5E7EB] px-4 text-[11px] font-medium text-[#8B8D97]"
            >
              Next
            </Button>
          </div>
        ) : null}
      </section>
    </div>
  );
}