"use client";

import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { Plus, Pencil, Trash2, Printer, Utensils } from "lucide-react";
import {
  fetchKitchenStations,
  createKitchenStation,
  updateKitchenStation,
  deleteKitchenStation,
  type KitchenStation,
} from "@/lib/api/kitchen-stations";
import { testPrinter, printErrorMessage } from "@/lib/api/print";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { LabeledField } from "@/components/ui/labeled-field";
import { Can } from "@/components/auth/can";
import { useConfirm } from "@/components/providers/confirm-provider";
import { notify } from "@/lib/notify";

type Editing = KitchenStation | "new" | null;

function StationForm({
  cafeId,
  station,
  onDone,
}: {
  cafeId: string;
  station?: KitchenStation;
  onDone: () => void;
}) {
  const t = useTranslations("print");
  const tCommon = useTranslations("common");
  const qc = useQueryClient();
  const [name, setName] = useState(station?.name ?? "");
  const [ip, setIp] = useState(station?.printerIp ?? "");
  const [port, setPort] = useState(String(station?.printerPort ?? 9100));

  const save = useMutation({
    mutationFn: () => {
      const body = {
        name: name.trim(),
        printerIp: ip.trim() || null,
        printerPort: parseInt(port, 10) || 9100,
      };
      return station
        ? updateKitchenStation(cafeId, station.id, body)
        : createKitchenStation(cafeId, body);
    },
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ["kitchen-stations", cafeId] });
      onDone();
    },
    onError: () => notify.error(t("stations.saveError")),
  });

  return (
    <div className="space-y-4 rounded-lg border border-border/80 bg-muted/20 p-4">
      <div className="grid gap-4 sm:grid-cols-3">
        <LabeledField label={t("stations.name")} htmlFor="station-name">
          <Input
            id="station-name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder={t("stations.namePlaceholder")}
            autoFocus
          />
        </LabeledField>
        <LabeledField label={t("stations.printerIp")} htmlFor="station-ip">
          <Input
            id="station-ip"
            value={ip}
            onChange={(e) => setIp(e.target.value)}
            placeholder="192.168.1.102"
            dir="ltr"
            className="text-end"
          />
        </LabeledField>
        <LabeledField label={t("port")} htmlFor="station-port">
          <Input
            id="station-port"
            value={port}
            onChange={(e) => setPort(e.target.value)}
            dir="ltr"
            className="text-end"
          />
        </LabeledField>
      </div>
      <div className="flex justify-end gap-2">
        <Button variant="ghost" onClick={onDone} disabled={save.isPending}>
          {tCommon("cancel")}
        </Button>
        <Button
          className="bg-[#0F6E56] hover:bg-[#0c5e46]"
          onClick={() => save.mutate()}
          disabled={save.isPending || !name.trim()}
        >
          {save.isPending ? tCommon("saving") : tCommon("save")}
        </Button>
      </div>
    </div>
  );
}

export function SettingsStationsPanel({ cafeId }: { cafeId: string }) {
  const t = useTranslations("print");
  const tCommon = useTranslations("common");
  const confirm = useConfirm();
  const qc = useQueryClient();
  const [editing, setEditing] = useState<Editing>(null);
  const [testMsg, setTestMsg] = useState<string | null>(null);

  const { data: stations = [], isLoading } = useQuery({
    queryKey: ["kitchen-stations", cafeId],
    queryFn: () => fetchKitchenStations(cafeId),
    enabled: !!cafeId,
  });

  const remove = useMutation({
    mutationFn: (id: string) => deleteKitchenStation(cafeId, id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["kitchen-stations", cafeId] }),
  });

  const test = useMutation({
    mutationFn: (s: KitchenStation) => testPrinter(cafeId, s.printerIp!, s.printerPort),
    onSuccess: () => setTestMsg(t("testSent")),
    onError: (err) => setTestMsg(printErrorMessage(err, t)),
  });

  const handleDelete = async (s: KitchenStation) => {
    const ok = await confirm({
      description: t("stations.deleteConfirm", { name: s.name }),
      variant: "destructive",
      confirmLabel: tCommon("confirm"),
    });
    if (ok) remove.mutate(s.id);
  };

  return (
    <Card className="rounded-xl border border-border/80 shadow-sm">
      <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-3 space-y-0 px-6 pb-4 pt-6">
        <div>
          <CardTitle className="flex items-center gap-2 text-base font-medium">
            <Utensils className="size-4 text-[#0F6E56]" />
            {t("stations.title")}
          </CardTitle>
          <p className="mt-0.5 text-xs text-muted-foreground">{t("stations.subtitle")}</p>
        </div>
        {editing === null ? (
          <Can permission="ManageKitchenStations">
            <Button size="sm" className="shrink-0 gap-1.5" onClick={() => setEditing("new")}>
              <Plus className="size-4" />
              {t("stations.add")}
            </Button>
          </Can>
        ) : null}
      </CardHeader>
      <CardContent className="space-y-4 px-6 pb-6 pt-0">
        <p className="rounded-lg border border-border/80 bg-muted/30 px-4 py-2.5 text-xs leading-relaxed text-muted-foreground">
          {t("stations.help")}
        </p>

        {testMsg ? (
          <p className="rounded-lg border border-border/80 bg-muted/40 px-4 py-2.5 text-xs">
            {testMsg}
          </p>
        ) : null}

        {editing === "new" ? (
          <StationForm cafeId={cafeId} onDone={() => setEditing(null)} />
        ) : null}

        {isLoading ? (
          <p className="text-sm text-muted-foreground">{tCommon("loading")}</p>
        ) : stations.length === 0 && editing === null ? (
          <p className="py-6 text-center text-sm text-muted-foreground">{t("stations.empty")}</p>
        ) : (
          <ul className="space-y-2">
            {stations.map((s) =>
              editing !== "new" && typeof editing === "object" && editing?.id === s.id ? (
                <li key={s.id}>
                  <StationForm cafeId={cafeId} station={s} onDone={() => setEditing(null)} />
                </li>
              ) : (
                <li
                  key={s.id}
                  className="flex flex-wrap items-center gap-3 rounded-lg border border-border/80 p-3"
                >
                  <Printer className="size-4 shrink-0 text-muted-foreground" />
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium">{s.name}</p>
                    <p className="text-xs text-muted-foreground" dir="ltr">
                      {s.printerIp ? `${s.printerIp}:${s.printerPort}` : t("stations.noPrinter")}
                    </p>
                  </div>
                  <span className="shrink-0 text-[11px] text-muted-foreground">
                    {t("stations.categoryCount", { count: s.categoryCount })}
                  </span>
                  {s.printerIp ? (
                    <Button
                      size="sm"
                      variant="outline"
                      disabled={test.isPending}
                      onClick={() => {
                        setTestMsg(null);
                        test.mutate(s);
                      }}
                    >
                      {t("stations.test")}
                    </Button>
                  ) : null}
                  <Can permission="ManageKitchenStations">
                    <Button
                      size="icon"
                      variant="ghost"
                      className="h-8 w-8"
                      onClick={() => setEditing(s)}
                    >
                      <Pencil className="size-3.5" />
                    </Button>
                  </Can>
                  <Can permission="ManageKitchenStations">
                    <Button
                      size="icon"
                      variant="ghost"
                      className="h-8 w-8 text-destructive hover:text-destructive"
                      onClick={() => handleDelete(s)}
                      disabled={remove.isPending}
                    >
                      <Trash2 className="size-3.5" />
                    </Button>
                  </Can>
                </li>
              )
            )}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
