"use client";

import { useMemo, useState } from "react";
import {
  formatOwnerRupiah,
  type OwnerTopMenuItem,
} from "@/lib/dashboard/owner-dashboard";
import { OwnerSectionHeader } from "./owner-section-header";

type SortMode = "qty" | "amount";

type OwnerTopMenuTableProps = {
  items: OwnerTopMenuItem[];
};

function SortToggle({
  mode,
  onChange,
}: {
  mode: SortMode;
  onChange: (mode: SortMode) => void;
}) {
  return (
    <div className="inline-flex rounded-lg border border-neutral-40 bg-neutral-20 p-1">
      {(["qty", "amount"] as const).map((item) => {
        const isActive = mode === item;

        return (
          <button
            key={item}
            type="button"
            onClick={() => onChange(item)}
            className={`text-s-medium shrink-0 rounded-md px-3 py-1.5 transition-colors ${
              isActive
                ? "bg-neutral-10 text-primary-600 shadow-sm"
                : "text-neutral-80 hover:text-neutral-100"
            }`}
          >
            {item === "qty" ? "Qty" : "Jumlah"}
          </button>
        );
      })}
    </div>
  );
}

export function OwnerTopMenuTable({ items }: OwnerTopMenuTableProps) {
  const [sortMode, setSortMode] = useState<SortMode>("qty");

  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) =>
      sortMode === "qty" ? b.qty - a.qty : b.amount - a.amount,
    );
  }, [items, sortMode]);

  return (
    <section className="min-w-0 rounded-[10px] border border-neutral-40 bg-neutral-10">
      <OwnerSectionHeader
        title="Top 5 Menu Paling Laku"
        action={<SortToggle mode={sortMode} onChange={setSortMode} />}
      />

      <div className="-mx-5 min-w-0 overflow-x-auto px-5 pb-5 pt-4">
        {sortedItems.length === 0 ? (
          <p className="text-m-regular rounded-lg border border-dashed border-neutral-40 bg-neutral-20 px-5 py-8 text-center text-neutral-80">
            Belum ada data menu terlaris untuk filter ini.
          </p>
        ) : (
          <table className="min-w-[760px] w-full border-collapse">
            <thead>
              <tr>
                <th className="text-m-medium w-10 bg-neutral-20 px-3 py-2 text-center text-neutral-100">
                  #
                </th>
                <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
                  Nama Menu
                </th>
                <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
                  Stand
                </th>
                <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
                  Kategori
                </th>
                <th className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100">
                  Qty
                </th>
                <th className="text-m-medium bg-neutral-20 px-3 py-2 text-right text-neutral-100">
                  Jumlah
                </th>
              </tr>
            </thead>
            <tbody>
              {sortedItems.map((item, index) => (
                <tr
                  key={`${item.code}-${item.name}-${index}`}
                  className="border-b border-neutral-20 last:border-0"
                >
                  <td className="text-m-regular px-3 py-3 text-center text-neutral-100">
                    {index + 1}
                  </td>
                  <td className="px-3 py-3">
                    <p className="text-m-regular text-neutral-100">{item.name}</p>
                    <p className="text-s-regular text-neutral-70">
                      Kode: {item.code}
                    </p>
                  </td>
                  <td className="text-m-regular px-3 py-3 text-neutral-100">
                    {item.stand}
                  </td>
                  <td className="text-m-regular px-3 py-3 text-neutral-100">
                    {item.category}
                  </td>
                  <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                    {item.qty}
                  </td>
                  <td className="text-m-regular px-3 py-3 text-right text-neutral-100">
                    {formatOwnerRupiah(item.amount)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </section>
  );
}