meezi/web/dashboard/src/components/settings/settings-print-test-panel.tsx

"use client";

import { useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { Printer } from "lucide-react";
import { apiGet } from "@/lib/api/client";
import { printErrorMessage, testPrinter } from "@/lib/api/print";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type BranchPrintSettings = {
  receiptPrinterIp?: string | null;
  receiptPrinterPort?: number | null;
  kitchenPrinterIp?: string | null;
  kitchenPrinterPort?: number | null;
};

type SettingsPrintTestPanelProps = {
  cafeId: string;
  onOpenPrinterSettings?: () => void;
};

function printerEndpointLabel(
  ip: string | null | undefined,
  port: number | null | undefined
): string {
  if (!ip?.trim()) return "—";
  return `${ip.trim()}:${port ?? 9100}`;
}

export function SettingsPrintTestPanel({
  cafeId,
  onOpenPrinterSettings,
}: SettingsPrintTestPanelProps) {
  const t = useTranslations("print");
  const tSettings = useTranslations("settings");
  const tCommon = useTranslations("common");
  const [message, setMessage] = useState<string | null>(null);
  const [lastTarget, setLastTarget] = useState<"receipt" | "kitchen" | null>(null);

  const { data: branches = [], isLoading: branchesLoading } = useQuery({
    queryKey: ["branches", cafeId],
    queryFn: () => apiGet<{ id: string }[]>(`/api/cafes/${cafeId}/branches`),
    enabled: !!cafeId,
  });

  const branchId = branches[0]?.id;

  const { data: settings, isLoading: settingsLoading } = useQuery({
    queryKey: ["branch-print-settings", cafeId, branchId],
    queryFn: () =>
      apiGet<BranchPrintSettings>(
        `/api/cafes/${cafeId}/branches/${branchId}/print-settings`
      ),
    enabled: !!cafeId && !!branchId,
  });

  const runTest = useMutation({
    mutationFn: (target: "receipt" | "kitchen") => {
      const ip =
        target === "receipt"
          ? settings?.receiptPrinterIp?.trim()
          : settings?.kitchenPrinterIp?.trim();
      const port =
        target === "receipt"
          ? settings?.receiptPrinterPort ?? 9100
          : settings?.kitchenPrinterPort ?? 9100;
      if (!ip) throw new Error("PRINTER_NOT_CONFIGURED");
      return testPrinter(cafeId, ip, port);
    },
    onMutate: (target) => setLastTarget(target),
    onSuccess: () => setMessage(t("success")),
    onError: (err) => setMessage(printErrorMessage(err, t)),
  });

  const isLoading = branchesLoading || settingsLoading;
  const receiptReady = !!settings?.receiptPrinterIp?.trim();
  const kitchenReady = !!settings?.kitchenPrinterIp?.trim();

  if (isLoading) {
    return <p className="text-sm text-muted-foreground">{tCommon("loading")}</p>;
  }

  if (!branchId) {
    return (
      <Card className="rounded-xl border border-border/80 shadow-sm">
        <CardContent className="pt-6">
          <p className="text-sm text-muted-foreground">{t("noBranchForPrinter")}</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card className="rounded-xl border border-border/80 shadow-sm">
        <CardHeader className="space-y-2 px-6 pb-4 pt-6">
          <CardTitle className="text-base font-medium">{tSettings("nav.printTest")}</CardTitle>
          <p className="text-sm leading-relaxed text-muted-foreground">{t("testPageHint")}</p>
        </CardHeader>
        <CardContent className="space-y-5 px-6 pb-6 pt-0">
          {message ? (
            <p
              className={cn(
                "rounded-md border px-3 py-2 text-sm",
                lastTarget && runTest.isSuccess
                  ? "border-[#0F6E56]/30 bg-[#E1F5EE] text-[#0F6E56]"
                  : "border-border/80 bg-muted/40"
              )}
            >
              {message}
            </p>
          ) : null}

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="rounded-xl border border-border/80 bg-card p-5 space-y-4">
              <div className="flex items-center gap-3">
                <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#E1F5EE] text-[#0F6E56]">
                  <Printer className="h-4 w-4" />
                </span>
                <div>
                  <p className="text-sm font-medium">{t("receiptPrinter")}</p>
                  <p className="text-[11px] text-muted-foreground" dir="ltr">
                    {printerEndpointLabel(
                      settings?.receiptPrinterIp,
                      settings?.receiptPrinterPort
                    )}
                  </p>
                </div>
              </div>
              <Button
                className="w-full bg-[#0F6E56] hover:bg-[#0c5e46]"
                disabled={!receiptReady || runTest.isPending}
                onClick={() => runTest.mutate("receipt")}
              >
                {t("testPrintReceipt")}
              </Button>
              {!receiptReady ? (
                <p className="text-[11px] text-[#BA7517]">{t("notConfigured")}</p>
              ) : null}
            </div>

            <div className="rounded-xl border border-border/80 bg-card p-5 space-y-4">
              <div className="flex items-center gap-3">
                <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-[#0C447C]">
                  <Printer className="h-4 w-4" />
                </span>
                <div>
                  <p className="text-sm font-medium">{t("kitchenPrinter")}</p>
                  <p className="text-[11px] text-muted-foreground" dir="ltr">
                    {printerEndpointLabel(
                      settings?.kitchenPrinterIp,
                      settings?.kitchenPrinterPort
                    )}
                  </p>
                </div>
              </div>
              <Button
                className="w-full"
                variant="outline"
                disabled={!kitchenReady || runTest.isPending}
                onClick={() => runTest.mutate("kitchen")}
              >
                {t("testPrintKitchen")}
              </Button>
              {!kitchenReady ? (
                <p className="text-[11px] text-[#BA7517]">{t("notConfigured")}</p>
              ) : null}
            </div>
          </div>

          {onOpenPrinterSettings ? (
            <Button variant="ghost" size="sm" onClick={onOpenPrinterSettings}>
              {t("configurePrinters")}
            </Button>
          ) : null}
        </CardContent>
      </Card>
    </div>
  );
}