Approval Queue

"use client";

import {
  BookOpen,
  FolderArchive,
  KeyRound,
  Palette,
  RotateCcw,
  Wallet,
} from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/motion/button";
import {
  type ApprovalPerson,
  ApprovalQueue,
  type ApprovalRequest,
} from "@/components/premium/approval-queue/approval-queue";
import { MorphicTooltip } from "@/components/premium/morphic-tooltip";

const people: ApprovalPerson[] = [
  {
    name: "Maya Chen",
    avatarUrl:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    name: "Leo Martin",
    avatarUrl:
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    name: "Nina Brooks",
    avatarUrl:
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
];
const initialRequests: ApprovalRequest[] = [
  {
    id: "workspace-access",
    title: "Team workspace access",
    summary:
      "Give two new collaborators access to the design workspace for the next project.",
    category: "Access",
    icon: <KeyRound />,
    status: "pending",
    submittedBy: people[0],
    submittedAt: "20 min ago",
    dueLabel: "Due today",
    reference: "REQ-018",
    fields: [
      { label: "Workspace", value: "Product design" },
      { label: "Permission", value: "Editor" },
      { label: "Collaborators", value: "2 people" },
      { label: "Duration", value: "90 days" },
    ],
    attachments: [
      {
        id: "access-brief",
        name: "collaborator-brief.pdf",
        description: "Project scope · 84 KB",
      },
    ],
  },
  {
    id: "release-assets",
    title: "Review the release assets",
    summary:
      "Final artwork and product screenshots for the autumn release are ready to review.",
    category: "Design",
    icon: <Palette />,
    status: "pending",
    submittedBy: people[2],
    submittedAt: "1 hour ago",
    reference: "REQ-017",
    fields: [
      { label: "Release", value: "Autumn update" },
      { label: "Deliverables", value: "6 assets" },
      { label: "Owner", value: "Brand team" },
      { label: "Version", value: "03" },
    ],
    attachments: [
      {
        id: "asset-list",
        name: "release-assets.pdf",
        description: "Artwork and screenshots · 2.4 MB",
      },
      {
        id: "asset-notes",
        name: "review-notes.md",
        description: "Changes since the last review · 12 KB",
      },
    ],
  },
  {
    id: "research-renewal",
    title: "Renew the research tools",
    summary:
      "Keep the research team's current plan active through the next discovery cycle.",
    category: "Purchase",
    icon: <Wallet />,
    status: "pending",
    submittedBy: people[1],
    submittedAt: "2 hours ago",
    reference: "REQ-016",
    fields: [
      { label: "Plan", value: "Research team" },
      { label: "Amount", value: "$240 / month" },
      { label: "Billing", value: "Monthly" },
      { label: "Budget", value: "Product research" },
    ],
  },
  {
    id: "help-center",
    title: "Publish the updated help center",
    summary:
      "The setup guide now covers the new workspace roles and invitation flow.",
    category: "Content",
    icon: <BookOpen />,
    status: "pending",
    submittedBy: people[0],
    submittedAt: "3 hours ago",
    reference: "REQ-015",
    fields: [
      { label: "Collection", value: "Getting started" },
      { label: "Pages", value: "8 updated" },
    ],
    attachments: [
      {
        id: "content-draft",
        name: "setup-guide-draft.pdf",
        description: "Updated copy · 320 KB",
      },
    ],
  },
  {
    id: "project-archive",
    title: "Archive the completed project",
    summary:
      "Move the finished project into the archive and keep its documents available to the team.",
    category: "Workspace",
    icon: <FolderArchive />,
    status: "approved",
    submittedBy: people[1],
    submittedAt: "Yesterday",
    reference: "REQ-014",
    review: {
      reviewer: people[2],
      reviewedAt: "Yesterday",
      note: "The handoff is complete. Keep the final files available in the archive.",
    },
  },
  {
    id: "contractor-access",
    title: "Extend contractor access",
    summary: "Continue the external team's access during the final handoff.",
    category: "Access",
    icon: <KeyRound />,
    status: "changes_requested",
    submittedBy: people[2],
    submittedAt: "Yesterday",
    reference: "REQ-013",
    review: {
      reviewer: people[0],
      reviewedAt: "Yesterday",
      note: "Please include an end date and limit access to the handoff folder.",
    },
  },
];

export function ApprovalQueuePreview() {
  const [requests, setRequests] = useState(initialRequests);
  return (
    <ApprovalQueue
      requests={requests}
      onDecision={(request, decision) => {
        setRequests((current) =>
          current.map((item) =>
            item.id === request.id
              ? {
                  ...item,
                  status: decision.action,
                  review: {
                    reviewer: people[2],
                    reviewedAt: "Just now",
                    note: decision.note,
                  },
                }
              : item,
          ),
        );
      }}
      headerActions={
        <MorphicTooltip content="Reset preview">
          <Button
            variant="ghost"
            size="icon"
            tabIndex={0}
            aria-label="Reset approval queue"
            onClick={() => setRequests(initialRequests)}
            className="size-9 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <RotateCcw aria-hidden className="size-4" />
          </Button>
        </MorphicTooltip>
      }
    />
  );
}