Kanban Board

"use client";

import { CircleCheck, CircleDot, ListTodo, RotateCcw } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/motion/button";
import {
  KanbanBoard,
  type KanbanColumn,
  type KanbanMember,
  type KanbanTask,
} from "@/components/premium/kanban-board/kanban-board";
import { MorphicTooltip } from "@/components/premium/morphic-tooltip";

const members: KanbanMember[] = [
  {
    id: "ria",
    name: "Ria Shah",
    avatarUrl:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    id: "noah",
    name: "Noah Park",
    avatarUrl:
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
  {
    id: "lea",
    name: "Lea Ortiz",
    avatarUrl:
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&fm=webp&q=80&w=96",
  },
];
const initialColumns: KanbanColumn[] = [
  { id: "planned", title: "Planned", icon: <ListTodo /> },
  {
    id: "building",
    title: "In progress",
    icon: <CircleDot className="text-primary" />,
  },
  {
    id: "ready",
    title: "Ready",
    icon: <CircleCheck className="text-foreground" />,
  },
];
const initialTasks: KanbanTask[] = [
  {
    id: "navigation",
    columnId: "planned",
    title: "Simplify the account navigation",
    description:
      "Keep the most useful destinations close and give account actions a clearer home.",
    priority: "high",
    assigneeId: "ria",
    tags: ["Design"],
    dueDate: "Oct 12",
    checklist: [
      { id: "audit", label: "Map the current destinations", done: true },
      { id: "draft", label: "Draft the new navigation", done: false },
      { id: "review", label: "Review with the team", done: false },
    ],
  },
  {
    id: "uploads",
    columnId: "planned",
    title: "Add a clearer upload state",
    description: "Show progress and make interrupted uploads easy to resume.",
    priority: "normal",
    assigneeId: "noah",
    tags: ["Product"],
    dueDate: "Oct 14",
  },
  {
    id: "shortcuts",
    columnId: "planned",
    title: "Write the keyboard shortcut guide",
    description: "A short reference for the actions people use most.",
    priority: "low",
    tags: ["Docs"],
  },
  {
    id: "search",
    columnId: "building",
    title: "Improve search result ranking",
    description:
      "Bring recent, relevant items to the top without hiding exact matches.",
    priority: "high",
    assigneeId: "noah",
    tags: ["Engineering"],
    dueDate: "Oct 10",
    checklist: [
      { id: "weights", label: "Tune the relevance weights", done: true },
      { id: "samples", label: "Check common queries", done: false },
    ],
  },
  {
    id: "empty",
    columnId: "building",
    title: "Refine the empty states",
    description: "Make the next action obvious when a collection has no items.",
    priority: "normal",
    assigneeId: "ria",
    tags: ["Design"],
    dueDate: "Oct 11",
  },
  {
    id: "handoff",
    columnId: "building",
    title: "Prepare the release handoff",
    description: "Collect the final notes, screenshots, and review links.",
    priority: "normal",
    assigneeId: "lea",
    tags: ["Release"],
  },
  {
    id: "settings",
    columnId: "ready",
    title: "Group the notification settings",
    description:
      "Keep delivery preferences together and make their labels consistent.",
    priority: "normal",
    assigneeId: "lea",
    tags: ["Product"],
    dueDate: "Oct 8",
    checklist: [
      { id: "group", label: "Group the preferences", done: true },
      { id: "labels", label: "Review the labels", done: true },
    ],
  },
  {
    id: "contrast",
    columnId: "ready",
    title: "Check contrast in both themes",
    description:
      "Review the controls, metadata, and focus states across the workspace.",
    priority: "high",
    assigneeId: "ria",
    tags: ["Accessibility"],
  },
];

export function KanbanBoardPreview() {
  const [columns, setColumns] = useState(initialColumns);
  const [tasks, setTasks] = useState(initialTasks);
  return (
    <div className="flex w-full justify-center p-3 sm:p-6">
      <KanbanBoard
        title="Release board"
        columns={columns}
        onColumnsChange={setColumns}
        tasks={tasks}
        onTasksChange={setTasks}
        members={members}
        currentUserId="ria"
        headerActions={
          <MorphicTooltip content="Reset board">
            <Button
              variant="ghost"
              size="icon"
              tabIndex={0}
              aria-label="Reset board"
              className="size-9 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              onClick={() => {
                setTasks(initialTasks);
                setColumns(initialColumns);
              }}
            >
              <RotateCcw aria-hidden className="size-3.5" />
            </Button>
          </MorphicTooltip>
        }
      />
    </div>
  );
}