"use client";

import { useCallback, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { GlassCard } from "@/components/silisuite/glass-card";
import type { AdminQueueItem } from "@/data/admin-queue";
import { getAuthUser } from "@/lib/auth";
import { appendAuditEntry } from "@/lib/storage/audit";
import { getAdminQueue, updateAdminQueueItem } from "@/lib/storage/admin-queue";

export function AdminQueuePanel() {
  const [items, setItems] = useState<AdminQueueItem[]>(() => getAdminQueue());

  const refresh = useCallback(() => setItems(getAdminQueue()), []);

  const resolve = (id: string) => {
    const user = getAuthUser();
    updateAdminQueueItem(id, { status: "resolved" });
    appendAuditEntry({
      userId: user?.id ?? "staff",
      userName: user?.name ?? "Staff",
      entityType: "admin_queue",
      entityId: id,
      action: "update",
      after: "resolved",
    });
    refresh();
  };

  const open = items.filter((i) => i.status !== "resolved");
  const inProgress = open.filter((i) => i.status === "in_progress");

  return (
    <div className="flex flex-col gap-4">
      <GlassCard className="overflow-hidden">
        <div className="flex flex-wrap gap-4 border-b border-white/10 px-4 py-3 text-xs text-muted-foreground">
          <span className="ss-label text-foreground">{open.length} open</span>
          {inProgress.length > 0 && <span>{inProgress.length} in progress</span>}
          <span>{items.filter((i) => i.status === "resolved").length} resolved</span>
        </div>
        {open.length === 0 ? (
          <p className="p-6 text-muted-foreground text-sm">Queue is empty. KB edits, chatbot flags, and tool requests appear here.</p>
        ) : (
          <ul className="divide-y divide-white/5">
            {open.map((item) => (
              <li key={item.id} className="flex flex-wrap items-start justify-between gap-3 px-4 py-4">
                <div>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline">{item.type}</Badge>
                    <Badge variant="secondary">{item.toolType}</Badge>
                  </div>
                  <p className="ss-heading mt-2 text-sm">{item.title}</p>
                  <p className="text-muted-foreground text-sm">{item.description}</p>
                  <p className="mt-1 text-muted-foreground text-xs">
                    {item.submittedBy} · {new Date(item.submittedAt).toLocaleString()}
                  </p>
                </div>
                <Button size="sm" onClick={() => resolve(item.id)}>
                  Resolve
                </Button>
              </li>
            ))}
          </ul>
        )}
      </GlassCard>
    </div>
  );
}