tessera/web/src/app/page.tsx

"use client";

import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  ArrowDownAZIcon,
  CheckCircle2Icon,
  ChevronRightIcon,
  GaugeIcon,
  LayoutListIcon,
  PlusIcon,
  RefreshCwIcon,
  SaveIcon,
  SearchIcon,
  SlidersHorizontalIcon,
  XIcon,
} from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { createTicket, getCustomFields, getLifecycles, getQueueCustomFields, getQueues, getTickets, getUsers, getViews, createView, deleteView, getDashboards } from "@/lib/api";
import type { CustomField, Lifecycle, Queue, QueueCustomField, SavedView, Ticket, User } from "@/lib/types";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { cn, formatTicketId } from "@/lib/utils";

const STATUS_META: Record<string, { label: string; color: string; tone: string }> = {
  new: { label: "New", color: "#64748b", tone: "bg-slate-500/10 text-slate-700 dark:text-slate-300" },
  open: { label: "Open", color: "#2563eb", tone: "bg-blue-500/10 text-blue-700 dark:text-blue-300" },
  in_progress: { label: "In progress", color: "#d97706", tone: "bg-amber-500/10 text-amber-700 dark:text-amber-300" },
  resolved: { label: "Resolved", color: "#16a34a", tone: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" },
  closed: { label: "Closed", color: "#71717a", tone: "bg-zinc-500/10 text-zinc-700 dark:text-zinc-300" },
};

const VIEW_LABELS: Record<string, string> = {
  my: "My tickets",
  unassigned: "Unassigned",
  recent: "Recently updated",
};

type Density = "comfortable" | "compact";
type SortKey = "updated" | "created" | "id";

interface Filter {
  id: string;
  field: string;       // "status" | "queue" | "owner" | custom field key ("cf.<key>")
  operator: string;    // "is" | "is_not"
  value: string;
  label: string;       // human-readable label for the chip
}

function buildFilterLabel(field: string, operator: string, valueLabel: string): string {
  const fieldLabel = field.startsWith("cf.") ? field.slice(3) : field;
  const op = operator === "is_not" ? "is not" : "is";
  return `${fieldLabel} ${op} ${valueLabel}`;
}

function statusLabel(status: string) {
  return STATUS_META[status]?.label ?? status.replaceAll("_", " ");
}

function queueName(queues: Queue[], queueId: string) {
  return queues.find((queue) => queue.id === queueId)?.name ?? queueId.slice(0, 8);
}

function relativeTime(value: string) {
  return formatDistanceToNow(new Date(value), { addSuffix: true });
}

function TicketStatusBadge({ status }: { status: string }) {
  const meta = STATUS_META[status];
  return (
    <span
      className={cn(
        "inline-flex h-6 items-center gap-1.5 rounded px-2 text-xs font-semibold capitalize",
        meta?.tone ?? "bg-muted text-muted-foreground"
      )}
    >
      <span
        className="h-1.5 w-1.5 rounded-full"
        style={{ backgroundColor: meta?.color ?? "#71717a" }}
      />
      {statusLabel(status)}
    </span>
  );
}

function StatPill({
  label,
  value,
}: {
  label: string;
  value: number;
}) {
  return (
    <span className="inline-flex h-6 items-center gap-1.5 rounded border border-border/80 bg-card/80 px-2 text-[11px] text-muted-foreground shadow-sm">
      <span className="font-semibold tabular-nums text-foreground">{value}</span>
      {label}
    </span>
  );
}

function SkeletonWorkbench() {
  return (
    <div className="flex h-full flex-col">
      <div className="border-b border-border px-5 py-4">
        <div className="h-7 w-48 animate-pulse rounded bg-muted" />
        <div className="mt-3 h-9 w-full max-w-xl animate-pulse rounded bg-muted" />
      </div>
      <div className="grid flex-1 grid-cols-1 overflow-hidden xl:grid-cols-[minmax(0,1fr)_360px]">
        <div className="overflow-hidden">
          {Array.from({ length: 12 }).map((_, index) => (
            <div key={index} className="flex items-center gap-4 border-b border-border px-5 py-4">
              <div className="h-4 w-4 animate-pulse rounded bg-muted" />
              <div className="min-w-0 flex-1 space-y-2">
                <div className="h-4 w-2/5 animate-pulse rounded bg-muted" />
                <div className="h-3 w-3/5 animate-pulse rounded bg-muted" />
              </div>
              <div className="h-6 w-20 animate-pulse rounded bg-muted" />
            </div>
          ))}
        </div>
        <div className="hidden border-l border-border p-5 xl:block">
          <div className="h-40 animate-pulse rounded-md bg-muted" />
        </div>
      </div>
    </div>
  );
}

function TicketWorkbenchContent() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const [tickets, setTickets] = useState<Ticket[]>([]);
  const [queues, setQueues] = useState<Queue[]>([]);
  const [lifecycles, setLifecycles] = useState<Lifecycle[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [customFields, setCustomFields] = useState<CustomField[]>([]);
  const [clock, setClock] = useState(0);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const [searchQuery, setSearchQuery] = useState("");
  const [filters, setFilters] = useState<Filter[]>([]);
  const [density, setDensity] = useState<Density>("comfortable");
  const [sortKey, setSortKey] = useState<SortKey>("updated");

  // Saved views
  const [savedViewsList, setSavedViewsList] = useState<SavedView[]>([]);
  const [viewIdFromUrl, setViewIdFromUrl] = useState<string | null>(null);
  const [saveViewOpen, setSaveViewOpen] = useState(false);
  const [saveViewName, setSaveViewName] = useState("");
  const [addFilterOpen, setAddFilterOpen] = useState(false);
  const [addFilterField, setAddFilterField] = useState<string | null>(null); // which field type is selected
  const [addFilterOperator, setAddFilterOperator] = useState("is");
  const [addFilterValue, setAddFilterValue] = useState("");

  const [dialogOpen, setDialogOpen] = useState(false);
  const [newSubject, setNewSubject] = useState("");
  const [newQueueId, setNewQueueId] = useState("");
  const [newDescription, setNewDescription] = useState("");
  const [newQueueFields, setNewQueueFields] = useState<QueueCustomField[]>([]);
  const [newCustomFieldValues, setNewCustomFieldValues] = useState<Record<string, string>>({});
  const [newFieldsLoading, setNewFieldsLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);

  const view = searchParams.get("view") ?? "all";
  const routeQueue = searchParams.get("queue") ?? "";

  const fetchData = useCallback(
    async (background = false) => {
      if (background) {
        setRefreshing(true);
      } else {
        setLoading(true);
      }
      setError(null);
      const fetchedAt = Date.now();

      const activeQueue = routeQueue;
      const apiStatus = filters.find((f) => f.field === "status")?.value;
      const apiOwner = filters.find((f) => f.field === "owner")?.value;
      const apiQueue = filters.find((f) => f.field === "queue")?.value;
      const customFieldFilters: Record<string, string> = {};
      for (const f of filters) {
        if (f.field.startsWith("cf.")) {
          customFieldFilters[f.field.slice(3)] = f.value;
        }
      }

      const [ticketsRes, queuesRes, usersRes, fieldsRes, lifecycleRes] = await Promise.all([
        getTickets({
          q: searchQuery.trim() || undefined,
          status: apiStatus || undefined,
          queue_id: activeQueue || apiQueue || undefined,
          owner_id: apiOwner || undefined,
          custom_fields: Object.keys(customFieldFilters).length > 0 ? customFieldFilters : undefined,
        }),
        getQueues(),
        getUsers(),
        getCustomFields(),
        getLifecycles(),
      ]);

      if (ticketsRes.error) {
        setError(ticketsRes.error);
        setTickets([]);
      } else {
        setTickets(ticketsRes.data ?? []);
      }

      if (queuesRes.error) {
        setError((current) => current ?? queuesRes.error);
      } else {
        const queueData = queuesRes.data ?? [];
        setQueues(queueData);
        if (!newQueueId && queueData.length > 0) {
          setNewQueueId(queueData[0].id);
        }
      }

      if (usersRes.error) {
        setError((current) => current ?? usersRes.error);
      } else {
        setUsers(usersRes.data ?? []);
      }

      if (fieldsRes.error) {
        setError((current) => current ?? fieldsRes.error);
      } else {
        setCustomFields(fieldsRes.data ?? []);
      }

      if (lifecycleRes.error) {
        setError((current) => current ?? lifecycleRes.error);
      } else {
        setLifecycles(lifecycleRes.data ?? []);
      }

      setLoading(false);
      setRefreshing(false);
      setClock(fetchedAt);
    },
    [filters, newQueueId, routeQueue, searchQuery]
  );

  useEffect(() => {
    void Promise.resolve().then(() => fetchData());
  }, [fetchData]);

  // Redirect to default dashboard if one exists and no params set
  useEffect(() => {
    if (searchParams.toString()) return;
    getDashboards().then(({ data }) => {
      const def = data?.find((d) => d.is_default);
      if (def) router.replace(`/dashboards/${def.id}`);
    });
  }, [searchParams]);

  useEffect(() => {
    if (searchParams.get("new") === "true") {
      queueMicrotask(() => setDialogOpen(true));
      const url = new URL(window.location.href);
      url.searchParams.delete("new");
      window.history.replaceState({}, "", url.toString());
    }
  }, [searchParams]);

  useEffect(() => {
    if (!newQueueId) {
      queueMicrotask(() => {
        setNewQueueFields([]);
        setNewCustomFieldValues({});
      });
      return;
    }

    let cancelled = false;
    queueMicrotask(() => {
      if (!cancelled) setNewFieldsLoading(true);
    });
    void getQueueCustomFields(newQueueId).then(({ data, error }) => {
      if (cancelled) return;
      setNewFieldsLoading(false);
      if (error) {
        setCreateError(error);
        setNewQueueFields([]);
        setNewCustomFieldValues({});
        return;
      }
      const assignments = data ?? [];
      setNewQueueFields(assignments);
      setNewCustomFieldValues((current) => {
        const next: Record<string, string> = {};
        for (const assignment of assignments) {
          next[assignment.custom_field_id] = current[assignment.custom_field_id] ?? "";
        }
        return next;
      });
    });

    return () => {
      cancelled = true;
    };
  }, [newQueueId]);

  // Load saved views list
  useEffect(() => {
    getViews().then(({ data }) => {
      if (data) setSavedViewsList(data);
    });
  }, [clock]);

  // Load view from URL param
  useEffect(() => {
    const paramViewId = searchParams.get("view_id");
    setViewIdFromUrl(paramViewId);
    if (paramViewId) {
      getViews().then(({ data }) => {
        const view = data?.find((v) => v.id === paramViewId);
        if (view?.filters && Array.isArray(view.filters)) {
          setSearchQuery("");
          setFilters(
            (view.filters as { field: string; operator: string; value: string }[])
              .filter((f) => f.field && f.value)
              .map((f) => ({
                id: crypto.randomUUID(),
                field: f.field,
                operator: f.operator || "is",
                value: f.value,
                label: buildFilterLabel(f.field, f.operator || "is", f.value),
              }))
          );
          if (view.sort_key) setSortKey(view.sort_key as SortKey);
        }
      });
    } else if (!paramViewId && viewIdFromUrl) {
      // User navigated away from a view — clear filters
      setFilters([]);
      setSearchQuery("");
    }
  }, [searchParams]);

  const statusOptions = useMemo(() => {
    const queueFilterValue = filters.find((f) => f.field === "queue")?.value;
    const selectedFilterQueueId = routeQueue || queueFilterValue || "";
    const selectedFilterQueue = selectedFilterQueueId
      ? queues.find((queue) => queue.id === selectedFilterQueueId)
      : null;
    const selectedFilterLifecycle = selectedFilterQueue?.lifecycle_id
      ? lifecycles.find((lifecycle) => lifecycle.id === selectedFilterQueue.lifecycle_id)
      : null;
    const lifecycleStatuses = selectedFilterLifecycle
      ? [
          ...selectedFilterLifecycle.definition.statuses.initial,
          ...selectedFilterLifecycle.definition.statuses.active,
          ...selectedFilterLifecycle.definition.statuses.inactive,
        ]
      : lifecycles.flatMap((lifecycle) => [
          ...lifecycle.definition.statuses.initial,
          ...lifecycle.definition.statuses.active,
          ...lifecycle.definition.statuses.inactive,
        ]);

    return [
      { key: "all", label: "All" },
      ...Array.from(new Set([...lifecycleStatuses, ...tickets.map((ticket) => ticket.status)]))
        .filter(Boolean)
        .map((status) => ({ key: status, label: statusLabel(status) })),
    ];
  }, [filters, lifecycles, queues, routeQueue, tickets]);

  const inactiveStatuses = useMemo(
    () => new Set(
      lifecycles.length > 0
        ? lifecycles.flatMap((lifecycle) => lifecycle.definition.statuses.inactive)
        : ["resolved", "closed"]
    ),
    [lifecycles]
  );

  const metrics = useMemo(() => {
    const now = clock || 0;
    const day = 24 * 60 * 60 * 1000;
    return {
      total: tickets.length,
      active: tickets.filter((ticket) => !inactiveStatuses.has(ticket.status)).length,
      unassigned: tickets.filter((ticket) => !ticket.owner_id).length,
      stale: tickets.filter((ticket) => now && now - new Date(ticket.updated_at).getTime() > 3 * day).length,
      recent: tickets.filter((ticket) => now && now - new Date(ticket.updated_at).getTime() < day).length,
    };
  }, [clock, inactiveStatuses, tickets]);

  const filteredTickets = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    const now = clock || 0;
    const queue = routeQueue;
    const statusFilterValue = filters.find((f) => f.field === "status")?.value;
    const queueFilterValue = filters.find((f) => f.field === "queue")?.value;

    return tickets
      .filter((ticket) => {
        if (view === "my") {
          const myOwner = searchParams.get("owner");
          if (myOwner && ticket.owner_id !== myOwner) return false;
          if (!myOwner && !ticket.owner_id) return false;
        }
        if (view === "unassigned" && ticket.owner_id) return false;
        if (view === "recent") {
          const week = 7 * 24 * 60 * 60 * 1000;
          if (!now || now - new Date(ticket.updated_at).getTime() > week) return false;
        }
        if (statusFilterValue && ticket.status !== statusFilterValue) return false;
        if (queueFilterValue && ticket.queue_id !== queueFilterValue) return false;
        if (queue && ticket.queue_id !== queue) return false;
        if (!query) return true;
        return (
          ticket.subject.toLowerCase().includes(query) ||
          formatTicketId(ticket.id).toLowerCase().includes(query) ||
          statusLabel(ticket.status).toLowerCase().includes(query) ||
          queueName(queues, ticket.queue_id).toLowerCase().includes(query)
        );
      })
      .sort((a, b) => {
        if (sortKey === "id") return b.id - a.id;
        const aDate = sortKey === "created" ? a.created_at : a.updated_at;
        const bDate = sortKey === "created" ? b.created_at : b.updated_at;
        return new Date(bDate).getTime() - new Date(aDate).getTime();
      });
  }, [clock, filters, queues, routeQueue, searchQuery, sortKey, tickets, view]);

  const selectedTicket =
    filteredTickets.find((ticket) => ticket.id === selectedId) ?? filteredTickets[0] ?? null;
  const visibleTitle = routeQueue
    ? queueName(queues, routeQueue)
    : VIEW_LABELS[view] ?? "All tickets";
  const newTicketFields = newQueueFields
    .map((assignment) => assignment.custom_field)
    .filter((field): field is CustomField => Boolean(field));
  const selectedNewQueue = queues.find((queue) => queue.id === newQueueId);
  const selectedNewLifecycle = selectedNewQueue?.lifecycle_id
    ? lifecycles.find((lifecycle) => lifecycle.id === selectedNewQueue.lifecycle_id)
    : null;
  const newTicketInitialStatus = selectedNewLifecycle?.definition.statuses.initial[0] ?? "new";
  const hasQueryFilters = searchQuery.trim() || filters.length > 0;

  const clearQueryFilters = () => {
    setSearchQuery("");
    setFilters([]);
    if (routeQueue) router.push("/");
  };

  const handleCreate = async () => {
    if (!newSubject.trim() || !newQueueId) return;
    for (const field of newTicketFields) {
      const value = (newCustomFieldValues[field.id] ?? "").trim();
      if (value && field.pattern) {
        const regex = new RegExp(field.pattern);
        if (!regex.test(value)) {
          setCreateError(`${field.name}: value does not match the required pattern.`);
          return;
        }
      }
    }
    setSubmitting(true);
    setCreateError(null);

    const { data, error } = await createTicket({
      subject: newSubject.trim(),
      queue_id: newQueueId,
      description: newDescription.trim() || undefined,
      custom_fields: Object.fromEntries(
        Object.entries(newCustomFieldValues)
          .map(([fieldId, value]) => [fieldId, value.trim()])
          .filter(([, value]) => value)
      ),
    });

    setSubmitting(false);

    if (error) {
      setCreateError(error);
      return;
    }

    setDialogOpen(false);
    setNewSubject("");
    setNewDescription("");
    setNewCustomFieldValues({});
    if (data) router.push(`/tickets/${data.ticket.id}`);
  };

  if (loading) return <SkeletonWorkbench />;

  return (
    <div className="flex h-full flex-col bg-background/80">
      <header className="shrink-0 border-b border-border bg-card/82 backdrop-blur">
        <div className="flex flex-col gap-3 px-5 py-4 lg:px-6">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div className="min-w-0">
              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase text-muted-foreground">
                <GaugeIcon className="h-3.5 w-3.5" />
                Work queue
              </div>
              <h1 className="mt-1 truncate text-2xl font-semibold text-foreground">
                {visibleTitle}
              </h1>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => fetchData(true)}
                disabled={refreshing}
                className="h-8 border-border/80 bg-card/70"
              >
                <RefreshCwIcon className={cn("h-4 w-4", refreshing && "animate-spin")} />
                Refresh
              </Button>
              {filters.length > 0 && (
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setSaveViewName("");
                    setSaveViewOpen(true);
                  }}
                  className="h-8 border-border/80 bg-card/70"
                >
                  <SaveIcon className="h-4 w-4" />
                  Save view
                </Button>
              )}
              <Button size="sm" onClick={() => setDialogOpen(true)} className="h-8 bg-primary shadow-sm">
                <PlusIcon className="h-4 w-4" />
                New ticket
              </Button>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <StatPill label="total" value={metrics.total} />
            <StatPill label="active" value={metrics.active} />
            <StatPill label="unassigned" value={metrics.unassigned} />
            <StatPill label="updated today" value={metrics.recent} />
            <StatPill label="needs review" value={metrics.stale} />
          </div>

          <div className="flex flex-col gap-2">
            {/* Row 1: search + sort/density */}
            <div className="flex items-center gap-2">
              <div className="relative flex-1">
                <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <input
                  value={searchQuery}
                  onChange={(event) => setSearchQuery(event.target.value)}
                  placeholder="Search subject, ticket ID, queue, or status"
                  className="h-9 w-full rounded-md border border-input bg-card/90 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-ring"
                />
              </div>
              {hasQueryFilters && (
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={clearQueryFilters}
                  className="h-9 shrink-0 border-border/80 bg-card/70"
                >
                  Clear
                </Button>
              )}
              <button
                type="button"
                onClick={() => setSortKey(sortKey === "updated" ? "created" : sortKey === "created" ? "id" : "updated")}
                className="inline-flex h-9 items-center gap-2 rounded-md border border-border bg-card/90 px-3 text-sm text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground shrink-0"
                title="Change sort"
              >
                <ArrowDownAZIcon className="h-4 w-4" />
                {sortKey === "updated" ? "Updated" : sortKey === "created" ? "Created" : "ID"}
              </button>
              <button
                type="button"
                onClick={() => setDensity(density === "comfortable" ? "compact" : "comfortable")}
                className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-card/90 text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground"
                title="Toggle density"
              >
                {density === "comfortable" ? (
                  <LayoutListIcon className="h-4 w-4" />
                ) : (
                  <SlidersHorizontalIcon className="h-4 w-4" />
                )}
              </button>
            </div>

            {/* Row 2: status quick-filter pills */}
            <div className="flex min-w-0 items-center gap-1 overflow-x-auto rounded-md border border-border bg-muted/55 p-1 shadow-sm">
              {statusOptions.map((opt) => {
                const isActive = opt.key === "all"
                  ? !filters.some((f) => f.field === "status")
                  : filters.some((f) => f.field === "status" && f.value === opt.key);
                return (
                  <button
                    key={opt.key}
                    type="button"
                    onClick={() => {
                      if (opt.key === "all") {
                        setFilters((prev) => prev.filter((f) => f.field !== "status"));
                      } else {
                        setFilters((prev) => {
                          const rest = prev.filter((f) => f.field !== "status");
                          if (isActive) return rest;
                          return [...rest, {
                            id: crypto.randomUUID(),
                            field: "status",
                            operator: "is",
                            value: opt.key,
                            label: buildFilterLabel("status", "is", opt.label),
                          }];
                        });
                      }
                    }}
                    className={cn(
                      "h-7 whitespace-nowrap rounded px-2.5 text-xs font-semibold transition-colors",
                      isActive
                        ? "bg-card text-foreground shadow-sm"
                        : "text-muted-foreground hover:bg-accent hover:text-foreground"
                    )}
                  >
                    {opt.label}
                  </button>
                );
              })}
            </div>

            {/* Row 3: active filter chips + add filter */}
            <div className="flex flex-wrap items-center gap-1.5">
              {filters
                .filter((f) => f.field !== "status")
                .map((f) => (
                  <span
                    key={f.id}
                    className="inline-flex h-7 items-center gap-1.5 rounded border border-border bg-accent/60 px-2 text-xs font-medium text-foreground"
                  >
                    {f.label}
                    <button
                      type="button"
                      onClick={() => setFilters((prev) => prev.filter((x) => x.id !== f.id))}
                      className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
                    >
                      <XIcon className="h-3 w-3" />
                    </button>
                  </span>
                ))}
              <div>
                <button
                  type="button"
                  onClick={(event) => {
                    const rect = event.currentTarget.getBoundingClientRect();
                    const popover = document.getElementById("add-filter-popover");
                    if (popover) {
                      popover.style.left = `${rect.left}px`;
                      popover.style.top = `${rect.bottom + 4}px`;
                    }
                    setAddFilterOpen((prev) => !prev);
                  }}
                  className="inline-flex h-7 items-center gap-1 rounded border border-dashed border-border px-2 text-xs font-medium text-muted-foreground hover:border-ring hover:text-foreground transition-colors"
                >
                  <PlusIcon className="h-3 w-3" />
                  Add filter
                </button>
                {addFilterOpen && (
                  <>
                    <div
                      className="fixed inset-0 z-40"
                      onClick={() => {
                        setAddFilterOpen(false);
                        setAddFilterField(null);
                      }}
                    />
                    <div
                      id="add-filter-popover"
                      className="fixed z-50 w-52 rounded-md border border-border bg-popover p-1 shadow-lg"
                    >
                      {!addFilterField ? (
                        /* Step 1: choose field */
                        <>
                          <button
                            type="button"
                            className="w-full rounded px-2 py-1.5 text-left text-xs text-foreground hover:bg-accent"
                            onClick={() => {
                              if (!filters.find((f) => f.field === "queue")) {
                                setAddFilterField("queue");
                                setAddFilterOperator("is");
                                setAddFilterValue("");
                              } else {
                                setAddFilterOpen(false);
                              }
                            }}
                          >
                            Queue
                          </button>
                          <button
                            type="button"
                            className="w-full rounded px-2 py-1.5 text-left text-xs text-foreground hover:bg-accent"
                            onClick={() => {
                              if (!filters.find((f) => f.field === "owner")) {
                                setAddFilterField("owner");
                                setAddFilterOperator("is");
                                setAddFilterValue("");
                              } else {
                                setAddFilterOpen(false);
                              }
                            }}
                          >
                            Owner
                          </button>
                          {customFields.map((cf) => (
                            <button
                              key={`cf-field-${cf.id}`}
                              type="button"
                              className="w-full rounded px-2 py-1.5 text-left text-xs text-foreground hover:bg-accent"
                              onClick={() => {
                                setAddFilterField(`cf.${cf.key}`);
                                setAddFilterOperator("is");
                                setAddFilterValue("");
                              }}
                            >
                              {cf.name}
                            </button>
                          ))}
                        </>
                      ) : (
                        /* Step 2: operator + value */
                        <div className="space-y-2 p-1">
                          <div className="flex items-center gap-1 text-xs">
                            <button
                              type="button"
                              onClick={() => {
                                setAddFilterField(null);
                              }}
                              className="text-muted-foreground hover:text-foreground"
                            >
                              ←
                            </button>
                            <span className="font-medium text-foreground">
                              {addFilterField.startsWith("cf.") ? addFilterField.slice(3) : addFilterField}
                            </span>
                          </div>
                          <select
                            value={addFilterOperator}
                            onChange={(e) => setAddFilterOperator(e.target.value)}
                            className="h-7 w-full rounded border border-input bg-card px-2 text-xs outline-none"
                          >
                            <option value="is">is</option>
                            <option value="is_not">is not</option>
                          </select>
                          {addFilterField === "queue" ? (
                            <select
                              value={addFilterValue}
                              onChange={(e) => setAddFilterValue(e.target.value)}
                              className="h-7 w-full rounded border border-input bg-card px-2 text-xs outline-none"
                            >
                              <option value="">Select queue...</option>
                              {queues.map((q) => (
                                <option key={q.id} value={q.id}>{q.name}</option>
                              ))}
                            </select>
                          ) : addFilterField === "owner" ? (
                            <select
                              value={addFilterValue}
                              onChange={(e) => setAddFilterValue(e.target.value)}
                              className="h-7 w-full rounded border border-input bg-card px-2 text-xs outline-none"
                            >
                              <option value="">Select owner...</option>
                              <option value="unassigned">Unassigned</option>
                              {users.map((u) => (
                                <option key={u.id} value={u.id}>{u.username}</option>
                              ))}
                            </select>
                          ) : (
                            <input
                              value={addFilterValue}
                              onChange={(e) => setAddFilterValue(e.target.value)}
                              placeholder="Value"
                              className="h-7 w-full rounded border border-input bg-card px-2 text-xs outline-none"
                              onKeyDown={(e) => {
                                if (e.key === "Enter" && addFilterValue.trim()) {
                                  const field = addFilterField;
                                  const value = addFilterValue;
                                  let valueLabel = value;
                                  setFilters((prev) => [...prev, {
                                    id: crypto.randomUUID(),
                                    field,
                                    operator: addFilterOperator,
                                    value,
                                    label: buildFilterLabel(field, addFilterOperator, valueLabel),
                                  }]);
                                  setAddFilterField(null);
                                  setAddFilterOpen(false);
                                }
                              }}
                            />
                          )}
                          <div className="flex items-center justify-end gap-1 pt-1">
                            <button
                              type="button"
                              onClick={() => {
                                setAddFilterField(null);
                                setAddFilterOpen(false);
                              }}
                              className="rounded px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
                            >
                              Cancel
                            </button>
                            <button
                              type="button"
                              disabled={!addFilterValue.trim()}
                              onClick={() => {
                                if (!addFilterValue.trim()) return;
                                const field = addFilterField;
                                const value = addFilterValue;
                                const operator = addFilterOperator;
                                let valueLabel = value;
                                if (field === "queue") {
                                  valueLabel = queues.find((q) => q.id === value)?.name ?? value;
                                } else if (field === "owner") {
                                  valueLabel = value === "unassigned" ? "Unassigned"
                                    : users.find((u) => u.id === value)?.username ?? value;
                                }
                                setFilters((prev) => [...prev, {
                                  id: crypto.randomUUID(),
                                  field,
                                  operator,
                                  value,
                                  label: buildFilterLabel(field, operator, valueLabel),
                                }]);
                                setAddFilterField(null);
                                setAddFilterOpen(false);
                              }}
                              className="rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                            >
                              Apply
                            </button>
                          </div>
                        </div>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>

          </div>
        </div>
      </header>

      {error && (
        <div className="shrink-0 border-b border-destructive/20 bg-destructive/10 px-5 py-2 text-sm text-destructive">
          {error}
        </div>
      )}

      <div className="grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_372px]">
        <section className="min-w-0 overflow-auto bg-card/48">
          <div className="min-w-[760px]">
            <div className="sticky top-0 z-10 grid h-9 grid-cols-[112px_minmax(280px,1fr)_150px_132px_116px_40px] items-center border-b border-border bg-muted/80 px-5 text-[11px] font-semibold uppercase text-muted-foreground backdrop-blur">
              <span>Ticket</span>
              <span>Subject</span>
              <span>Queue</span>
              <span>Status</span>
              <span>Updated</span>
              <span />
            </div>

            {filteredTickets.length === 0 ? (
              <div className="flex min-h-80 flex-col items-center justify-center px-5 text-center">
                <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-md border border-border bg-background">
                  <SearchIcon className="h-5 w-5 text-muted-foreground" />
                </div>
                <p className="text-sm font-medium text-foreground">No tickets in this view</p>
                <p className="mt-1 max-w-sm text-sm text-muted-foreground">
                  Adjust the filters or create a new ticket for this queue.
                </p>
                <Button onClick={() => setDialogOpen(true)} className="mt-4 h-8" size="sm">
                  <PlusIcon className="h-4 w-4" />
                  New ticket
                </Button>
              </div>
            ) : (
              filteredTickets.map((ticket) => {
                const selected = ticket.id === selectedId;
                return (
                  <button
                    key={ticket.id}
                    type="button"
                    onClick={() => setSelectedId(ticket.id)}
                    onDoubleClick={() => router.push(`/tickets/${ticket.id}`)}
                    className={cn(
                      "grid w-full grid-cols-[112px_minmax(280px,1fr)_150px_132px_116px_40px] items-center border-b border-border/80 px-5 text-left transition-colors",
                      density === "compact" ? "min-h-11" : "min-h-16",
                      selected
                        ? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
                        : "hover:bg-accent/45"
                    )}
                  >
                    <span className="font-mono text-xs font-semibold text-muted-foreground">
                      {formatTicketId(ticket.id)}
                    </span>
                    <span className="min-w-0 pr-4">
                      <span className="block truncate text-sm font-semibold text-foreground">
                        {ticket.subject}
                      </span>
                      {density === "comfortable" && (
                        <span className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
                          {ticket.owner_id ? "Assigned" : "Unassigned"}
                          <span className="h-1 w-1 rounded-full bg-border" />
                          Created {relativeTime(ticket.created_at)}
                        </span>
                      )}
                    </span>
                    <span className="truncate text-sm font-medium text-muted-foreground">
                      {queueName(queues, ticket.queue_id)}
                    </span>
                    <span>
                      <TicketStatusBadge status={ticket.status} />
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {relativeTime(ticket.updated_at)}
                    </span>
                    <span className="flex justify-end text-muted-foreground">
                      <ChevronRightIcon className="h-4 w-4" />
                    </span>
                  </button>
                );
              })
            )}
          </div>
        </section>

        <aside className="hidden min-h-0 border-l border-border bg-card/76 backdrop-blur xl:flex xl:flex-col">
          {selectedTicket ? (
            <>
              <div className="border-b border-border bg-card/82 p-5">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="font-mono text-xs font-semibold text-muted-foreground">
                      {formatTicketId(selectedTicket.id)}
                    </p>
                    <h2 className="mt-2 text-lg font-semibold leading-snug text-foreground">
                      {selectedTicket.subject}
                    </h2>
                  </div>
                  <TicketStatusBadge status={selectedTicket.status} />
                </div>
                <Button
                  onClick={() => router.push(`/tickets/${selectedTicket.id}`)}
                  className="mt-4 h-8 w-full bg-primary"
                  size="sm"
                >
                  Open ticket
                  <ChevronRightIcon className="h-4 w-4" />
                </Button>
              </div>

              <div className="flex-1 overflow-auto p-5">
                <dl className="grid overflow-hidden rounded-md border border-border bg-background/55 text-sm">
                  <div className="grid grid-cols-[104px_minmax(0,1fr)] border-b border-border px-3 py-2.5">
                    <dt className="text-xs font-semibold uppercase text-muted-foreground">Queue</dt>
                    <dd className="truncate text-foreground">{queueName(queues, selectedTicket.queue_id)}</dd>
                  </div>
                  <div className="grid grid-cols-[104px_minmax(0,1fr)] border-b border-border px-3 py-2.5">
                    <dt className="text-xs font-semibold uppercase text-muted-foreground">Owner</dt>
                    <dd className="truncate text-foreground">{selectedTicket.owner_id ?? "Unassigned"}</dd>
                  </div>
                  <div className="grid grid-cols-[104px_minmax(0,1fr)] border-b border-border px-3 py-2.5">
                    <dt className="text-xs font-semibold uppercase text-muted-foreground">Creator</dt>
                    <dd className="truncate text-foreground">{selectedTicket.creator_id}</dd>
                  </div>
                  <div className="grid grid-cols-[104px_minmax(0,1fr)] border-b border-border px-3 py-2.5">
                    <dt className="text-xs font-semibold uppercase text-muted-foreground">Created</dt>
                    <dd className="truncate text-foreground">{new Date(selectedTicket.created_at).toLocaleString()}</dd>
                  </div>
                  <div className="grid grid-cols-[104px_minmax(0,1fr)] px-3 py-2.5">
                    <dt className="text-xs font-semibold uppercase text-muted-foreground">Updated</dt>
                    <dd className="truncate text-foreground">{new Date(selectedTicket.updated_at).toLocaleString()}</dd>
                  </div>
                </dl>

                <div className="mt-5 rounded-md border border-border bg-accent/42 p-4">
                  <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                    <CheckCircle2Icon className="h-4 w-4 text-emerald-600" />
                    Next action
                  </div>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Open the ticket to reply, change status, and review its transaction history.
                  </p>
                </div>
              </div>
            </>
          ) : (
            <div className="flex flex-1 items-center justify-center p-6 text-center text-sm text-muted-foreground">
              Select a ticket to inspect it.
            </div>
          )}
        </aside>
      </div>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="sm:max-w-2xl" showCloseButton>
          <DialogHeader>
            <DialogTitle>New ticket</DialogTitle>
            <DialogDescription>
              Create a request, incident, task, or follow-up for the right queue.
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-3">
            <label className="grid gap-1.5 text-sm font-medium">
              Subject
              <input
                value={newSubject}
                onChange={(event) => setNewSubject(event.target.value)}
                placeholder="Short summary"
                className="h-9 rounded-md border border-input bg-background px-3 text-sm font-normal outline-none focus:border-ring"
                autoFocus
              />
            </label>

            <label className="grid gap-1.5 text-sm font-medium">
              Queue
              <select
                value={newQueueId}
                onChange={(event) => {
                  setNewQueueId(event.target.value);
                  setCreateError(null);
                }}
                className="h-9 rounded-md border border-input bg-background px-3 text-sm font-normal outline-none focus:border-ring"
              >
                <option value="" disabled>
                  Select queue
                </option>
                {queues.map((queue) => (
                  <option key={queue.id} value={queue.id}>
                    {queue.name}
                  </option>
                ))}
              </select>
              <span className="text-xs font-normal text-muted-foreground">
                Starts as <span className="font-mono text-foreground">{newTicketInitialStatus}</span>
                {selectedNewLifecycle ? ` from ${selectedNewLifecycle.name}` : ""}
              </span>
            </label>

            <label className="grid gap-1.5 text-sm font-medium">
              Description
              <textarea
                value={newDescription}
                onChange={(event) => setNewDescription(event.target.value)}
                placeholder="Optional context"
                rows={4}
                className="resize-none rounded-md border border-input bg-background px-3 py-2 text-sm font-normal outline-none focus:border-ring"
              />
            </label>

            {(newFieldsLoading || newTicketFields.length > 0) && (
              <div className="rounded-md border border-border bg-muted/25">
                <div className="border-b border-border px-3 py-2">
                  <div className="text-sm font-semibold text-foreground">Queue fields</div>
                  <div className="mt-0.5 text-xs text-muted-foreground">
                    Metadata attached to this ticket from the selected queue.
                  </div>
                </div>
                <div className="grid gap-3 p-3">
                  {newFieldsLoading ? (
                    <div className="h-9 animate-pulse rounded-md bg-muted" />
                  ) : (
                    newTicketFields.map((field) => {
                      const options = Array.isArray(field.values)
                        ? field.values.map((value) => String(value))
                        : [];
                      return (
                        <label key={field.id} className="grid gap-1.5 text-sm font-medium">
                          <span className="flex min-w-0 items-center justify-between gap-3">
                            <span className="truncate">{field.name}</span>
                            <span className="shrink-0 font-mono text-[11px] font-normal text-muted-foreground">{field.key}</span>
                          </span>
                          {options.length > 0 ? (
                            <select
                              value={newCustomFieldValues[field.id] ?? ""}
                              onChange={(event) => setNewCustomFieldValues((current) => ({
                                ...current,
                                [field.id]: event.target.value,
                              }))}
                              className="h-9 rounded-md border border-input bg-background px-3 text-sm font-normal outline-none focus:border-ring"
                            >
                              <option value="">No value</option>
                              {options.map((option) => (
                                <option key={option} value={option}>{option}</option>
                              ))}
                            </select>
                          ) : (
                            <input
                              value={newCustomFieldValues[field.id] ?? ""}
                              onChange={(event) => setNewCustomFieldValues((current) => ({
                                ...current,
                                [field.id]: event.target.value,
                              }))}
                              placeholder={field.pattern ? `Pattern: ${field.pattern}` : "Optional value"}
                              className="h-9 rounded-md border border-input bg-background px-3 text-sm font-normal outline-none focus:border-ring"
                            />
                          )}
                          {field.pattern && (
                            <span className="text-[11px] text-muted-foreground">
                              Must match: <code className="rounded bg-muted px-1 font-mono">{field.pattern}</code>
                            </span>
                          )}
                        </label>
                      );
                    })
                  )}
                </div>
              </div>
            )}
          </div>

          {createError && <p className="text-sm text-destructive">{createError}</p>}

          <DialogFooter showCloseButton={false}>
            <Button
              onClick={handleCreate}
              disabled={!newSubject.trim() || !newQueueId || submitting}
            >
              {submitting ? "Creating..." : "Create ticket"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={saveViewOpen} onOpenChange={setSaveViewOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Save view</DialogTitle>
            <DialogDescription>
              Save the current filters as a named view. It will appear in your sidebar.
            </DialogDescription>
          </DialogHeader>
          <input
            value={saveViewName}
            onChange={(event) => setSaveViewName(event.target.value)}
            placeholder="View name"
            className="h-9 w-full rounded-md border border-input bg-card px-3 text-sm outline-none focus:border-ring"
            autoFocus
            onKeyDown={async (event) => {
              if (event.key === "Enter" && saveViewName.trim()) {
                const storedFilters = filters.map((f) => ({
                  field: f.field,
                  operator: f.operator,
                  value: f.value,
                }));
                const { data, error } = await createView({
                  name: saveViewName.trim(),
                  filters: storedFilters,
                  sort_key: sortKey,
                });
                if (!error && data) {
                  setSavedViewsList((prev) => [...prev, data]);
                  setSaveViewOpen(false);
                  setSaveViewName("");
                }
              }
            }}
          />
          <DialogFooter>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setSaveViewOpen(false)}
            >
              Cancel
            </Button>
            <Button
              size="sm"
              disabled={!saveViewName.trim()}
              onClick={async () => {
                if (!saveViewName.trim()) return;
                const storedFilters = filters.map((f) => ({
                  field: f.field,
                  operator: f.operator,
                  value: f.value,
                }));
                const { data, error } = await createView({
                  name: saveViewName.trim(),
                  filters: storedFilters,
                  sort_key: sortKey,
                });
                if (!error && data) {
                  setSavedViewsList((prev) => [...prev, data]);
                  setSaveViewOpen(false);
                  setSaveViewName("");
                }
              }}
            >
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function TicketWorkbenchPage() {
  return (
    <Suspense fallback={<SkeletonWorkbench />}>
      <TicketWorkbenchContent />
    </Suspense>
  );
}