"use client";

import { useEffect, useMemo, useState } from "react";
import {
  ChevronDown,
  ChevronRight,
  Check,
  Laptop,
  LoaderCircle,
  Presentation,
  Printer,
  RefreshCcw,
  Router,
  TabletSmartphone,
  type LucideIcon
} from "lucide-react";

import {
  BOOKING_OPERATION_TASK_TYPES,
  addDays,
  type BookingOperationTaskType,
  type OperationsEquipmentKind,
  type OperationsResponse
} from "@rental/shared";

import { cn } from "../../lib/cn";
import { getOperationsRequest, updateOperationsTaskProgressRequest } from "../../lib/api";
import { useIsMobile } from "../../lib/use-is-mobile";
import { useSessionContext } from "../layout/session-provider";
import { TimelineDateActions } from "../timeline/timeline-toolbar";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Card } from "../ui/card";
import { Input } from "../ui/input";
import { Modal } from "../ui/modal";

type OperationsTaskCard = OperationsResponse["tasks"][number];

const DEFAULT_RANGE_DAYS = 7;
const initialFromDate = () => new Date().toISOString().slice(0, 10);

const taskTone: Record<BookingOperationTaskType, "accent" | "success" | "warning" | "neutral"> = {
  preparation: "accent",
  delivery: "success",
  pickup: "warning",
  verification: "neutral"
};

const equipmentIconMap: Record<OperationsEquipmentKind, { icon: LucideIcon; label: string }> = {
  laptop: { icon: Laptop, label: "Laptopy" },
  tablet: { icon: TabletSmartphone, label: "Tablety" },
  printer: { icon: Printer, label: "Drukarki" },
  router: { icon: Router, label: "Routery" },
  flipchart: { icon: Presentation, label: "Flipcharty" }
};

const detectEquipmentKindsFromItemName = (name: string): OperationsEquipmentKind[] => {
  const source = name.toLocaleLowerCase("pl");
  const kinds = new Set<OperationsEquipmentKind>();
  const hasUnsupportedAccessoryMarker =
    /(monitor|spotlight|logitech|akcesori|akcesoria|mysz|klawiatur|hub|dock|stacja dokuj|adapter|zasilacz|kabel)/.test(source);

  if (/(laptop|laptopy|notebook|macbook|legion|probook|elitebook|latitude|thinkpad|hewlett packard|hp\b|dell|lenovo|\bg\d{1,2}\b)/.test(source)) {
    kinds.add("laptop");
  }

  if (/(tablet|ipad|galaxy tab|tab\b|surface go)/.test(source)) {
    kinds.add("tablet");
  }

  if (/(drukark|printer)/.test(source)) {
    kinds.add("printer");
  }

  if (/router/.test(source)) {
    kinds.add("router");
  }

  if (/flipchart/.test(source)) {
    kinds.add("flipchart");
  }

  if (kinds.size === 0 && !hasUnsupportedAccessoryMarker) {
    kinds.add("laptop");
  }

  return Array.from(kinds);
};

const formatDayLabel = (day: string) =>
  new Intl.DateTimeFormat("pl-PL", {
    weekday: "short",
    day: "2-digit",
    month: "2-digit"
  }).format(new Date(`${day}T12:00:00`));

const formatTaskType = (value: BookingOperationTaskType) =>
  BOOKING_OPERATION_TASK_TYPES.find((task) => task.value === value)?.label ?? value;

const normalizeKinds = (task: OperationsTaskCard, checkedKinds: OperationsEquipmentKind[]) =>
  Array.from(new Set(checkedKinds.filter((kind) => task.equipmentKinds.includes(kind))));

const getTaskProgressRatio = (task: OperationsTaskCard) => {
  if (task.equipmentKinds.length === 0) {
    return 0;
  }

  return normalizeKinds(task, task.checkedEquipmentKinds).length / task.equipmentKinds.length;
};

const isTaskReadyForFinish = (task: OperationsTaskCard) =>
  task.equipmentKinds.length > 0 &&
  task.equipmentKinds.every((kind) => task.checkedEquipmentKinds.includes(kind)) &&
  task.taskItems.every((item) => task.confirmedEquipmentItemIds.includes(item.equipmentItemId));

const isTaskPreparedPendingFinish = (task: OperationsTaskCard) => !task.isFinished && isTaskReadyForFinish(task);

const isTaskPartiallyPrepared = (task: OperationsTaskCard) =>
  !task.isFinished &&
  !isTaskReadyForFinish(task) &&
  (normalizeKinds(task, task.checkedEquipmentKinds).length > 0 || task.confirmedEquipmentItemIds.length > 0);

const normalizeScannedCode = (value: string) => value.trim().toUpperCase();

export const OperationsCalendarPage = () => {
  const { session } = useSessionContext();
  const isMobile = useIsMobile();
  const [operations, setOperations] = useState<OperationsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [fromDate, setFromDate] = useState(initialFromDate);
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
  const [savingTaskId, setSavingTaskId] = useState<string | null>(null);
  const [scanValue, setScanValue] = useState("");
  const [scanError, setScanError] = useState<string | null>(null);
  const [expandedEquipmentKinds, setExpandedEquipmentKinds] = useState<OperationsEquipmentKind[]>([]);

  const toDate = addDays(fromDate, DEFAULT_RANGE_DAYS - 1);

  const refresh = async () => {
    if (!session) {
      return;
    }

    setLoading(true);
    setError(null);

    try {
      const response = await getOperationsRequest(session, {
        from: fromDate,
        to: toDate
      });
      setOperations(response);
    } catch (requestError) {
      setError(requestError instanceof Error ? requestError.message : "Nie udało się pobrać zadań operacyjnych");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void refresh();
  }, [fromDate, session, toDate]);

  const days = useMemo(() => Array.from({ length: DEFAULT_RANGE_DAYS }, (_, index) => addDays(fromDate, index)), [fromDate]);
  const taskCards = useMemo<OperationsTaskCard[]>(() => operations?.tasks ?? [], [operations]);
  const selectedTask = useMemo(
    () => taskCards.find((task) => task.id === selectedTaskId) ?? null,
    [selectedTaskId, taskCards]
  );

  useEffect(() => {
    setScanValue("");
    setScanError(null);
  }, [selectedTaskId]);

  useEffect(() => {
    setExpandedEquipmentKinds(selectedTask?.equipmentKinds ?? []);
  }, [selectedTask]);

  const updateTaskState = (
    taskId: string,
    nextState: Pick<
      OperationsTaskCard,
      "checkedEquipmentKinds" | "confirmedEquipmentItemIds" | "isFinished" | "finishedAt"
    >
  ) => {
    setOperations((current) =>
      current
        ? {
            ...current,
            tasks: current.tasks.map((task) => (task.id === taskId ? { ...task, ...nextState } : task))
          }
        : current
    );
  };

  const persistTaskProgress = async (
    task: OperationsTaskCard,
    checkedEquipmentKinds: OperationsEquipmentKind[],
    confirmedEquipmentItemIds: string[],
    markFinished: boolean
  ) => {
    if (!session) {
      return;
    }

    setSavingTaskId(task.id);

    try {
      const response = await updateOperationsTaskProgressRequest(session, {
        scopeKey: task.scopeKey,
        type: task.type,
        date: task.date,
        time: task.time,
        checkedEquipmentKinds: normalizeKinds(task, checkedEquipmentKinds),
        confirmedEquipmentItemIds,
        markFinished
      });

      updateTaskState(task.id, response);
      if (markFinished) {
        setSelectedTaskId(null);
      }
    } catch (requestError) {
      setError(requestError instanceof Error ? requestError.message : "Nie udało się zapisać postępu tasku");
    } finally {
      setSavingTaskId(null);
    }
  };

  const handleScanSubmit = async (task: OperationsTaskCard) => {
    const scannedCode = normalizeScannedCode(scanValue);

    if (!scannedCode) {
      setScanError("Wpisz lub zeskanuj numer seryjny.");
      return;
    }

    const matchedItem = task.taskItems.find(
      (item) =>
        normalizeScannedCode(item.serialNumber ?? "") === scannedCode || normalizeScannedCode(item.assetTag ?? "") === scannedCode
    );

    if (!matchedItem) {
      setScanError("Nie znaleziono takiego S/N lub TAG dla tego tasku.");
      return;
    }

    setScanError(null);
    setScanValue("");

    if (task.confirmedEquipmentItemIds.includes(matchedItem.equipmentItemId)) {
      return;
    }

    await persistTaskProgress(
      task,
      task.checkedEquipmentKinds,
      [...task.confirmedEquipmentItemIds, matchedItem.equipmentItemId],
      false
    );
  };

  const groupedSelectedTaskItems = useMemo(() => {
    if (!selectedTask) {
      return [];
    }

    const groups = new Map<
      OperationsEquipmentKind,
      {
        kind: OperationsEquipmentKind;
        items: OperationsTaskCard["taskItems"];
      }
    >();

    for (const item of selectedTask.taskItems) {
      const detectedKind =
        (item.kind && selectedTask.equipmentKinds.includes(item.kind) ? item.kind : null) ??
        detectEquipmentKindsFromItemName(item.name).find((kind) => selectedTask.equipmentKinds.includes(kind)) ??
        (selectedTask.equipmentKinds.length === 1 ? selectedTask.equipmentKinds[0] : null);

      if (!detectedKind) {
        continue;
      }

      const existingGroup = groups.get(detectedKind);

      if (existingGroup) {
        existingGroup.items.push(item);
        continue;
      }

      groups.set(detectedKind, {
        kind: detectedKind,
        items: [item]
      });
    }

    return selectedTask.equipmentKinds
      .map((kind) => {
        const group = groups.get(kind);

        if (!group) {
          return null;
        }

        const confirmedCount = group.items.filter((item) =>
          selectedTask.confirmedEquipmentItemIds.includes(item.equipmentItemId)
        ).length;

        return {
          ...group,
          confirmedCount,
          isReady: confirmedCount === group.items.length && selectedTask.checkedEquipmentKinds.includes(kind)
        };
      })
      .filter((value): value is NonNullable<typeof value> => Boolean(value));
  }, [selectedTask]);

  const tasksByDayAndType = useMemo(() => {
    const map = new Map<string, OperationsTaskCard[]>();

    for (const task of taskCards) {
      const key = `${task.date}::${task.type}`;
      const list = map.get(key) ?? [];
      list.push(task);
      map.set(key, list);
    }

    return map;
  }, [taskCards]);

  return (
    <div className="space-y-4">
      <Card className="p-4 sm:p-5">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <h2 className="text-2xl font-semibold text-ink">Operacje</h2>
            <p className="mt-1 text-sm text-muted">Przygotowanie, dostawa, odbiór i weryfikacja na najbliższe dni.</p>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <TimelineDateActions
              isMobile={isMobile}
              onDateShift={(deltaDays) => setFromDate((current) => addDays(current, deltaDays))}
              onGoToday={() => setFromDate(initialFromDate())}
            />
            <Button
              aria-label="Odśwież zadania operacyjne"
              className="h-[42px] w-[42px] rounded-xl p-0"
              title="Odśwież"
              variant="secondary"
              onClick={() => void refresh()}
            >
              <RefreshCcw className="h-4 w-4" />
            </Button>
          </div>
        </div>

        {error ? <div className="mt-4 rounded-2xl bg-[#f8d9d3] px-4 py-3 text-sm text-[#8d2f20]">{error}</div> : null}
      </Card>

      {loading && !operations ? (
        <Card className="p-6 text-sm text-muted">Ładowanie kalendarza operacyjnego...</Card>
      ) : (
        <Card className="overflow-hidden p-0">
          <div className={cn("grid", isMobile ? "grid-cols-1" : "grid-cols-7")}>
            {days.map((day, dayIndex) => (
              <section
                key={day}
                className={cn(
                  "min-w-0 bg-panel",
                  isMobile ? (dayIndex > 0 ? "border-t border-line" : "") : dayIndex > 0 ? "border-l border-line" : ""
                )}
              >
                <div className="border-b border-line bg-[#f5efe5] px-3 py-2.5">
                  <p className="text-sm font-semibold uppercase tracking-[0.12em] text-ink">{formatDayLabel(day)}</p>
                </div>

                {BOOKING_OPERATION_TASK_TYPES.map((task, taskIndex) => {
                  const itemsForSlot = tasksByDayAndType.get(`${day}::${task.value}`) ?? [];

                  return (
                    <section key={task.value} className={cn("border-t border-line/70", taskIndex === 0 && "border-t-0")}>
                      <div className="flex items-center justify-between gap-2 border-b border-line/60 bg-[#fbf7ef] px-3 py-2">
                        <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted">{task.label}</span>
                        <Badge tone={taskTone[task.value]}>{itemsForSlot.length}</Badge>
                      </div>

                      <div className="space-y-1.5 px-2 py-2">
                        {itemsForSlot.length === 0 ? (
                          <div className="rounded-xl border border-dashed border-line bg-white/75 px-2.5 py-2 text-[11px] text-muted">
                            Brak zadań
                          </div>
                        ) : (
                          itemsForSlot.map((entry) => {
                            const progressRatio = getTaskProgressRatio(entry);
                            const preparedPendingFinish = isTaskPreparedPendingFinish(entry);
                            const partiallyPrepared = isTaskPartiallyPrepared(entry);

                            return (
                              <button
                                key={entry.id}
                                className={cn(
                                  "relative w-full overflow-hidden rounded-2xl border px-3 py-2 text-left transition",
                                  entry.isFinished
                                    ? "border-[#6fbe82] bg-[#e7f6ea] shadow-[0_0_0_1px_rgba(111,190,130,0.24),0_0_16px_rgba(111,190,130,0.34)]"
                                    : preparedPendingFinish
                                      ? "border-[#76c889] bg-[#eef9f0] shadow-[0_0_0_1px_rgba(118,200,137,0.24),0_0_16px_rgba(118,200,137,0.32)] hover:border-[#62ba77] hover:bg-[#e7f6ea]"
                                    : partiallyPrepared
                                      ? "border-[#d35b5b] bg-white shadow-[0_0_0_1px_rgba(211,91,91,0.2),0_0_14px_rgba(211,91,91,0.28)] hover:border-[#c84f4f] hover:bg-[#fffaf2]"
                                      : "border-line bg-white hover:border-accent/45 hover:bg-[#fffaf2]"
                                )}
                                type="button"
                                onClick={() => setSelectedTaskId(entry.id)}
                              >
                                {!entry.isFinished && !preparedPendingFinish && progressRatio > 0 ? (
                                  <div
                                    className="pointer-events-none absolute bottom-1 left-1 rounded-[10px] bg-[#d8f0dc]"
                                    style={{
                                      height: 18,
                                      width: `${Math.max(progressRatio * 100, 0)}%`
                                    }}
                                  />
                                ) : null}

                                <div className="relative z-10">
                                  <div className="flex items-start justify-between gap-3">
                                    <p className="min-w-0 truncate text-sm font-semibold text-ink">{entry.customerName}</p>
                                    <span className="shrink-0 text-xs font-semibold text-muted">{entry.itemCount} szt.</span>
                                  </div>

                                  {entry.equipmentKinds.length > 0 ? (
                                    <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
                                      {entry.equipmentKinds.map((kind) => {
                                        const Icon = equipmentIconMap[kind].icon;
                                        const isChecked = entry.checkedEquipmentKinds.includes(kind);

                                        return (
                                          <span
                                            key={`${entry.id}-${kind}`}
                                            className={cn(
                                              "inline-flex h-6 w-6 items-center justify-center rounded-lg border text-ink",
                                              isChecked ? "border-[#9fd1aa] bg-[#e9f7ea]" : "border-line bg-[#f7f4ed]"
                                            )}
                                            title={equipmentIconMap[kind].label}
                                          >
                                            <Icon className="h-3.5 w-3.5" />
                                          </span>
                                        );
                                      })}
                                    </div>
                                  ) : null}
                                </div>
                              </button>
                            );
                          })
                        )}
                      </div>
                    </section>
                  );
                })}
              </section>
            ))}
          </div>
        </Card>
      )}

      <Modal
        open={selectedTask !== null}
        title={selectedTask ? `${formatTaskType(selectedTask.type)}: ${selectedTask.customerName}` : "Szczegóły zadania"}
        description={selectedTask ? `${selectedTask.date}${selectedTask.time ? `, ${selectedTask.time}` : ""}` : undefined}
        onClose={() => setSelectedTaskId(null)}
        footer={
          selectedTask ? (
            <>
              <Button variant="secondary" onClick={() => setSelectedTaskId(null)}>
                Zamknij
              </Button>
              {isTaskReadyForFinish(selectedTask) && !selectedTask.isFinished ? (
                <Button
                  disabled={savingTaskId === selectedTask.id}
                  onClick={() =>
                    void persistTaskProgress(
                      selectedTask,
                      selectedTask.checkedEquipmentKinds,
                      selectedTask.confirmedEquipmentItemIds,
                      true
                    )
                  }
                >
                  {savingTaskId === selectedTask.id ? <LoaderCircle className="h-4 w-4 animate-spin" /> : null}
                  Finish
                </Button>
              ) : null}
            </>
          ) : undefined
        }
      >
        {selectedTask ? (
          <div className="space-y-4">
            <div className="rounded-2xl border border-line bg-white px-4 py-3">
              <div className="flex flex-wrap items-center gap-2">
                {selectedTask.equipmentKinds.map((kind) => {
                  const Icon = equipmentIconMap[kind].icon;
                  const isChecked = selectedTask.checkedEquipmentKinds.includes(kind);

                  return (
                    <button
                      key={`modal-${selectedTask.id}-${kind}`}
                      className={cn(
                        "inline-flex items-center gap-2 rounded-2xl border px-3 py-2 text-sm transition",
                        isChecked ? "border-[#8fc89d] bg-[#e7f6ea] text-[#1d5a2d]" : "border-line bg-[#fffdf8] text-ink hover:bg-[#f7f4ed]"
                      )}
                      disabled={savingTaskId === selectedTask.id}
                      type="button"
                      onClick={() => {
                        const nextCheckedKinds = selectedTask.checkedEquipmentKinds.includes(kind)
                          ? selectedTask.checkedEquipmentKinds.filter((entry) => entry !== kind)
                          : [...selectedTask.checkedEquipmentKinds, kind];

                        void persistTaskProgress(selectedTask, nextCheckedKinds, selectedTask.confirmedEquipmentItemIds, false);
                      }}
                    >
                      <span
                        className={cn(
                          "flex h-5 w-5 items-center justify-center rounded-md border",
                          isChecked ? "border-[#3ca55b] bg-[#3ca55b] text-white" : "border-line bg-white text-transparent"
                        )}
                      >
                        <Check className="h-3.5 w-3.5" />
                      </span>
                      <Icon className="h-4 w-4" />
                      {equipmentIconMap[kind].label}
                    </button>
                  );
                })}
                <span className="inline-flex items-center rounded-xl bg-[#eef5ea] px-3 py-1.5 text-sm font-semibold text-ink">
                  {selectedTask.itemCount} szt.
                </span>
                {selectedTask.isFinished ? <Badge tone="success">Zakończone</Badge> : null}
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div className="rounded-2xl border border-line bg-white px-4 py-3">
                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Klient</p>
                <p className="mt-1 text-sm font-semibold text-ink">{selectedTask.customerName}</p>
              </div>

              <div className="rounded-2xl border border-line bg-white px-4 py-3">
                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Typ tasku</p>
                <p className="mt-1 text-sm font-semibold text-ink">{formatTaskType(selectedTask.type)}</p>
              </div>

              {selectedTask.projectName ? (
                <div className="rounded-2xl border border-line bg-white px-4 py-3">
                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Projekt</p>
                  <p className="mt-1 text-sm font-semibold text-ink">{selectedTask.projectName}</p>
                </div>
              ) : null}

              {selectedTask.projectNumber || selectedTask.orderNumber ? (
                <div className="rounded-2xl border border-line bg-white px-4 py-3">
                  <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Identyfikacja</p>
                  <p className="mt-1 text-sm font-semibold text-ink">{selectedTask.projectNumber || selectedTask.orderNumber}</p>
                </div>
              ) : null}
            </div>

            <div className="rounded-2xl border border-line bg-white px-4 py-3">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Przypisanie po S/N</p>
              <div className="mt-2 flex flex-col gap-2 sm:flex-row">
                <Input
                  autoFocus
                  placeholder="Zeskanuj lub wpisz S/N albo TAG"
                  value={scanValue}
                  onChange={(event) => setScanValue(event.target.value)}
                  onKeyDown={(event) => {
                    if (event.key === "Enter") {
                      event.preventDefault();
                      void handleScanSubmit(selectedTask);
                    }
                  }}
                />
                <Button disabled={savingTaskId === selectedTask.id} onClick={() => void handleScanSubmit(selectedTask)}>
                  {savingTaskId === selectedTask.id ? <LoaderCircle className="h-4 w-4 animate-spin" /> : null}
                  Przypisz
                </Button>
              </div>
              <p className="mt-2 text-xs text-muted">Czytnik kodów kreskowych może wpisać tu numer seryjny albo TAG urządzenia.</p>
              {scanError ? <p className="mt-2 text-xs font-semibold text-[#9b3a2b]">{scanError}</p> : null}
            </div>

            <div className="rounded-2xl border border-line bg-white px-4 py-3">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Sprzęt w tasku</p>
              <div className="mt-2 space-y-2">
                {groupedSelectedTaskItems.map((group) => {
                  const Icon = equipmentIconMap[group.kind].icon;
                  const isExpanded = expandedEquipmentKinds.includes(group.kind);

                  return (
                    <div key={`${selectedTask.id}-${group.kind}`} className="overflow-hidden rounded-2xl border border-line bg-[#f7f4ed]">
                      <div className="flex items-center gap-2 px-3 py-2">
                        <button
                          className="flex min-w-0 flex-1 items-center gap-2 text-left"
                          type="button"
                          onClick={() =>
                            setExpandedEquipmentKinds((current) =>
                              current.includes(group.kind)
                                ? current.filter((entry) => entry !== group.kind)
                                : [...current, group.kind]
                            )
                          }
                        >
                          {isExpanded ? (
                            <ChevronDown className="h-4 w-4 shrink-0 text-muted" />
                          ) : (
                            <ChevronRight className="h-4 w-4 shrink-0 text-muted" />
                          )}
                          <span className="flex h-7 w-7 items-center justify-center rounded-lg border border-line bg-white text-ink">
                            <Icon className="h-4 w-4" />
                          </span>
                          <span className="min-w-0">
                            <span className="block text-sm font-semibold text-ink">{equipmentIconMap[group.kind].label}</span>
                            <span className="block text-xs text-muted">
                              {group.confirmedCount}/{group.items.length} gotowe
                            </span>
                          </span>
                        </button>

                        <Button
                          className="h-9 min-w-[132px] px-3"
                          disabled={savingTaskId === selectedTask.id || group.isReady}
                          variant={group.isReady ? "secondary" : "primary"}
                          onClick={() => {
                            const groupItemIds = group.items.map((item) => item.equipmentItemId);
                            const nextConfirmedIds = Array.from(
                              new Set([...selectedTask.confirmedEquipmentItemIds, ...groupItemIds])
                            );
                            const nextCheckedKinds = selectedTask.checkedEquipmentKinds.includes(group.kind)
                              ? selectedTask.checkedEquipmentKinds
                              : [...selectedTask.checkedEquipmentKinds, group.kind];

                            void persistTaskProgress(selectedTask, nextCheckedKinds, nextConfirmedIds, false);
                          }}
                        >
                          {group.isReady ? "Gotowe" : "Grupa gotowa"}
                        </Button>
                      </div>

                      {isExpanded ? (
                        <div className="space-y-2 border-t border-line/70 bg-white px-3 py-3">
                          {group.items.map((item) => {
                            const confirmed = selectedTask.confirmedEquipmentItemIds.includes(item.equipmentItemId);

                            return (
                              <div
                                key={`${selectedTask.id}-${group.kind}-${item.equipmentItemId}`}
                                className={cn(
                                  "flex flex-col gap-2 rounded-2xl border px-3 py-2 sm:flex-row sm:items-center sm:justify-between",
                                  confirmed ? "border-[#99c8a4] bg-[#e9f7ea]" : "border-line bg-[#f7f4ed]"
                                )}
                              >
                                <div className="min-w-0">
                                  <p className="truncate text-sm font-semibold text-ink">{item.name}</p>
                                  <p className="mt-0.5 text-xs text-muted">
                                    S/N: {item.serialNumber || "brak"} {item.assetTag ? `• TAG: ${item.assetTag}` : ""}
                                  </p>
                                </div>
                                <Button
                                  className="min-w-[126px]"
                                  disabled={savingTaskId === selectedTask.id}
                                  variant={confirmed ? "secondary" : "primary"}
                                  onClick={() => {
                                    const nextConfirmedIds = confirmed
                                      ? selectedTask.confirmedEquipmentItemIds.filter((itemId) => itemId !== item.equipmentItemId)
                                      : [...selectedTask.confirmedEquipmentItemIds, item.equipmentItemId];

                                    void persistTaskProgress(
                                      selectedTask,
                                      selectedTask.checkedEquipmentKinds,
                                      nextConfirmedIds,
                                      false
                                    );
                                  }}
                                >
                                  {confirmed ? "Przypisane" : "Przypisz ręcznie"}
                                </Button>
                              </div>
                            );
                          })}
                        </div>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        ) : null}
      </Modal>
    </div>
  );
};