"use client";

import { InboxIcon } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useTransition } from "react";
import { Button } from "@/components/ui/button";
import { relativeTime } from "@/lib/support/relative-time";
import type {
  StaffInboxFilter,
  StaffTicketRow,
} from "@/lib/support/staff-actions";
import { cn } from "@/lib/utils";
import { PriorityBadge, StatusBadge } from "./ticket-badges";

const FILTERS: { key: StaffInboxFilter; label: string }[] = [
  { key: "open", label: "Tous les ouverts" },
  { key: "unassigned", label: "Non assignés" },
  { key: "mine", label: "Mes tickets" },
];

function initials(name: string | null): string {
  if (!name) return "?";
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase() ?? "")
    .join("");
}

export function StaffInbox({
  tickets,
  filter,
}: {
  tickets: StaffTicketRow[];
  filter: StaffInboxFilter;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [pending, startTransition] = useTransition();

  function setFilter(next: StaffInboxFilter) {
    const params = new URLSearchParams(searchParams.toString());
    params.set("filter", next);
    startTransition(() => {
      router.push(`/support/staff?${params.toString()}`);
    });
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold">Inbox staff</h1>
        <p className="text-sm text-muted-foreground">
          Tous les tickets de support, toutes orgs confondues.
        </p>
      </div>

      <div className="flex flex-wrap gap-2">
        {FILTERS.map((f) => (
          <Button
            key={f.key}
            size="sm"
            variant={f.key === filter ? "default" : "outline"}
            disabled={pending}
            onClick={() => setFilter(f.key)}
          >
            {f.label}
          </Button>
        ))}
      </div>

      {tickets.length === 0 ? (
        <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed py-16 text-center">
          <InboxIcon className="size-8 text-muted-foreground" />
          <p className="text-sm text-muted-foreground">
            Aucun ticket dans cette vue.
          </p>
        </div>
      ) : (
        <ul className="divide-y rounded-lg border">
          {tickets.map((t) => (
            <li key={t.id}>
              <Link
                href={`/support/staff/${t.id}`}
                className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/50"
              >
                <PriorityBadge priority={t.priority} />
                <StatusBadge status={t.status} />
                <div className="min-w-0 flex-1">
                  <div className="truncate font-medium">{t.title}</div>
                  <div className="truncate text-xs text-muted-foreground">
                    {t.creatorName ?? t.creatorEmail ?? "Inconnu"}
                    {t.orgId ? ` · ${t.orgId}` : ""}
                  </div>
                </div>
                <div className="hidden items-center gap-2 sm:flex">
                  {t.assignedTo ? (
                    <span
                      className={cn(
                        "flex size-6 items-center justify-center rounded-full bg-primary/10 text-[10px] font-medium text-primary",
                      )}
                      title={t.assigneeName ?? undefined}
                    >
                      {initials(t.assigneeName)}
                    </span>
                  ) : (
                    <span className="text-xs text-muted-foreground">
                      Non assigné
                    </span>
                  )}
                </div>
                <span className="hidden w-28 shrink-0 text-right text-xs text-muted-foreground md:block">
                  {relativeTime(t.createdAt)}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}