"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { bulkArchiveOrdersAction } from "@/lib/actions/admin";
import { ORDER_TAG_LABELS, ORDER_TAG_COLORS, type OrderTag, formatDateDE } from "@/lib/orderConstants";

type OrderRow = {
  _id: string;
  characterOrConcept: string;
  tag: OrderTag;
  rejected: boolean;
  compensationType: "paid" | "tfp";
  paid: boolean;
  createdAt: string;
  client: { _id: string; name: string; email: string; avatarPath: string } | null;
  assignedStaffName: string | null;
};

export function OrdersBulkList({ orders, showArchived }: { orders: OrderRow[]; showArchived: boolean }) {
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  function toggle(id: string) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function archiveSelected() {
    const ids = [...selected];
    if (!ids.length) return;
    if (!confirm(`${ids.length} Auftrag/Aufträge archivieren?`)) return;
    startTransition(async () => {
      await bulkArchiveOrdersAction(ids);
      setSelected(new Set());
      router.refresh();
    });
  }

  return (
    <div className="flex flex-col gap-3">
      {!showArchived && selected.size > 0 && (
        <div className="sticky top-2 z-10 flex items-center justify-between gap-3 bg-[var(--rk-surface)] border border-white/20 rounded-xl px-4 py-2.5 shadow-lg shadow-black/30">
          <span className="text-xs text-[var(--rk-ink)]">{selected.size} ausgewählt</span>
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={() => setSelected(new Set())}
              className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors"
            >
              Auswahl aufheben
            </button>
            <button
              type="button"
              disabled={pending}
              onClick={archiveSelected}
              className="text-xs border border-white/30 rounded-full px-3.5 py-1.5 hover:border-white disabled:opacity-50 transition-colors"
            >
              Archivieren
            </button>
          </div>
        </div>
      )}

      {orders.map((order) => (
        <div
          key={order._id}
          className="flex items-center gap-2 bg-[var(--rk-surface)] border border-white/10 rounded-2xl hover:border-white/25 transition-colors"
          style={{ borderLeft: `3px solid ${ORDER_TAG_COLORS[order.tag]}` }}
        >
          {!showArchived && (
            <input
              type="checkbox"
              checked={selected.has(order._id)}
              onChange={() => toggle(order._id)}
              onClick={(e) => e.stopPropagation()}
              className="ml-4 h-3.5 w-3.5 shrink-0"
              aria-label="Auswählen"
            />
          )}
          <Link href={`/de/admin/orders/${order._id}`} className="flex-1 min-w-0 block p-5">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-3 min-w-0">
                {order.client?.avatarPath && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={`/api/avatars/${order.client._id}/${order.client.avatarPath}`}
                    alt=""
                    className="w-9 h-9 rounded-full object-cover border border-white/15 shrink-0"
                  />
                )}
                <div className="min-w-0">
                  <p className="text-sm font-medium text-[var(--rk-ink)] truncate">{order.characterOrConcept}</p>
                  <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5 truncate">
                    {order.client?.name || "Unbekannt"} · {order.client?.email || "—"}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <span className={`text-[0.65rem] uppercase tracking-[0.1em] ${order.assignedStaffName ? "text-[var(--rk-ink-muted)]" : "text-amber-400/70"}`}>
                  {order.assignedStaffName ? `👤 ${order.assignedStaffName}` : "Nicht übernommen"}
                </span>
                {order.rejected && <span className="text-[0.65rem] uppercase tracking-[0.1em] text-red-400">Abgelehnt</span>}
                {!order.rejected && order.compensationType === "paid" && (
                  <span
                    className={`text-[0.65rem] uppercase tracking-[0.1em] ${order.paid ? "text-emerald-400" : "text-amber-400"}`}
                  >
                    {order.paid ? "Bezahlt" : "Offen"}
                  </span>
                )}
                <span
                  className="text-[0.65rem] uppercase tracking-[0.1em] border rounded-full px-2.5 py-1"
                  style={{ borderColor: `${ORDER_TAG_COLORS[order.tag]}66`, color: ORDER_TAG_COLORS[order.tag] }}
                >
                  {ORDER_TAG_LABELS[order.tag]}
                </span>
                <span className="text-[0.65rem] text-[var(--rk-ink-muted)]">
                  {formatDateDE(new Date(order.createdAt))}
                </span>
              </div>
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
}