import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { BackLink } from "@/components/back-link";
import { ConfirmForm } from "@/components/confirm-form";
import { formatPrice, formatDate } from "@/lib/format";
import { deleteDiscountCodeAction } from "../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminGutscheinePage(props: PageProps<"/admin/gutscheine">) {
  const t = getDictionary(await getLocale());
  const { error } = await props.searchParams;
  const codes = await prisma.discountCode.findMany({ orderBy: { createdAt: "desc" } });

  return (
    <div>
      <BackLink href="/admin" label={t.adminVouchersPage.backToDashboard} />
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-2xl text-forest">{t.adminVouchersPage.title}</h1>
        <Link href="/admin/gutscheine/neu" className="bg-forest text-cream px-5 py-2 text-sm">
          {t.adminVouchersPage.newVoucher}
        </Link>
      </div>

      {error ? (
        <p className="mb-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
      ) : null}

      <div className="overflow-x-auto bg-background border border-ink/10">
        <table className="w-full text-sm">
          <thead className="text-left text-ink/65 border-b border-ink/10">
            <tr>
              <th className="p-4">{t.adminVouchersPage.colCode}</th>
              <th className="p-4">{t.adminVouchersPage.colDiscount}</th>
              <th className="p-4">{t.adminVouchersPage.colMinOrder}</th>
              <th className="p-4">{t.adminVouchersPage.colMinQuantity}</th>
              <th className="p-4">{t.adminVouchersPage.colUsage}</th>
              <th className="p-4">{t.adminVouchersPage.colValidity}</th>
              <th className="p-4">{t.adminVouchersPage.colStatus}</th>
              <th className="p-4" />
            </tr>
          </thead>
          <tbody className="divide-y divide-ink/10">
            {codes.map((code) => (
              <tr key={code.id} className="transition-colors hover:bg-ink/[0.03]">
                <td className="p-4 text-forest font-mono">{code.code}</td>
                <td className="p-4">
                  {code.type === "PERCENT" ? `${code.value} %` : formatPrice(code.value)}
                </td>
                <td className="p-4">{code.minOrderCents > 0 ? formatPrice(code.minOrderCents) : "—"}</td>
                <td className="p-4">{code.minQuantity !== null ? code.minQuantity : "—"}</td>
                <td className="p-4">
                  {code.usedCount}
                  {code.maxUses !== null ? ` / ${code.maxUses}` : ""}
                </td>
                <td className="p-4 whitespace-nowrap">
                  {code.validFrom ? formatDate(code.validFrom) : t.adminVouchersPage.immediately} –{" "}
                  {code.validUntil ? formatDate(code.validUntil) : t.adminVouchersPage.unlimited}
                </td>
                <td className="p-4">
                  {code.isActive ? (
                    <span className="text-forest">{t.adminVouchersPage.statusActive}</span>
                  ) : (
                    <span className="text-ink/65">{t.adminVouchersPage.statusInactive}</span>
                  )}
                </td>
                <td className="p-4">
                  <div className="flex items-center gap-3 whitespace-nowrap">
                    <Link href={`/admin/gutscheine/${code.id}`} className="text-forest underline">
                      {t.adminVouchersPage.edit}
                    </Link>
                    <ConfirmForm
                      action={deleteDiscountCodeAction}
                      confirmMessage={t.adminVouchersPage.deleteConfirm(code.code)}
                    >
                      <input type="hidden" name="id" value={code.id} />
                      <button type="submit" className="text-red-700 underline">
                        {t.adminVouchersPage.delete}
                      </button>
                    </ConfirmForm>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {codes.length === 0 ? <p className="p-6 text-ink/65">{t.adminVouchersPage.noVouchersYet}</p> : null}
      </div>
    </div>
  );
}