"use client";

import Link from "next/link";

import { useLocale } from "@/components/providers/locale-provider";

const actions: Array<{
  href: string;
  idLabel: "createPurchase" | "prepareSales" | "viewLotTrace";
  idDetail:
    | "createPurchaseDetail"
    | "prepareSalesDetail"
    | "viewLotTraceDetail";
  enLabel: string;
  enDetail: string;
}> = [
  { href: "/purchases", idLabel: "createPurchase", idDetail: "createPurchaseDetail", enLabel: "Create purchase", enDetail: "Enter a multi-line purchase." },
  { href: "/sales-allocation", idLabel: "prepareSales", idDetail: "prepareSalesDetail", enLabel: "Prepare sales", enDetail: "Allocate lots and review costing." },
  { href: "/lots", idLabel: "viewLotTrace", idDetail: "viewLotTraceDetail", enLabel: "View lot trace", enDetail: "Audit lot movement and status." }
];

export function QuickActions() {
  const { locale, dict } = useLocale();

  return (
    <section className="ops-card p-5">
      <div className="flex items-center justify-between gap-4">
        <div>
          <h2 className="ops-title">{dict.dashboard.quickActions}</h2>
          <p className="ops-copy">{dict.dashboard.quickActionsCopy}</p>
        </div>
      </div>
      <div className="mt-4 grid gap-3 md:grid-cols-2">
        {actions.map((action) => (
          <Link
            key={action.href}
            href={action.href}
            className="rounded border border-line/70 bg-slate-50 p-4 transition hover:-translate-y-0.5 hover:bg-slate-100"
          >
            <p className="font-medium text-ink">{locale === "id" ? labelMap[action.idLabel] : action.enLabel}</p>
            <p className="mt-2 text-[13px] leading-6 text-slate-500">
              {locale === "id" ? detailMap[action.idDetail] : action.enDetail}
            </p>
          </Link>
        ))}
      </div>
    </section>
  );
}

const labelMap = {
  createPurchase: "Buat purchase",
  prepareSales: "Siapkan sales",
  viewLotTrace: "Lihat trace lot"
} as const;

const detailMap = {
  createPurchaseDetail: "Entry pembelian multi-line.",
  prepareSalesDetail: "Allocate lot dan cek costing.",
  viewLotTraceDetail: "Audit movement dan status lot."
} as const;
