import type { Meta, StoryObj } from "@storybook/react";
import { KanbanBoard } from "./kanban-board";

const meta: Meta<typeof KanbanBoard> = {
	title: "Widgets/KanbanBoard",
	component: KanbanBoard,
	parameters: {
		layout: "fullscreen",
	},
	tags: ["autodocs"],
	argTypes: {
		columns: { control: false },
		draggable: { control: "boolean" },
		showAddButton: { control: "boolean" },
		onCardMove: { action: "card moved" },
		onCardClick: { action: "card clicked" },
		onAddCard: { action: "add card clicked" },
		onColumnReorder: { action: "columns reordered" },
	},
	decorators: [
		(Story) => (
			<div className="min-h-screen bg-background p-4">
				<Story />
			</div>
		),
	],
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default kanban board with three standard columns.
 * Includes basic tasks with titles and descriptions.
 */
export const Default: Story = {
	args: {
		columns: [
			{
				id: "todo",
				title: "To Do",
				cards: [
					{
						id: "1",
						title: "Implement user authentication",
						description: "Add OAuth2 authentication flow",
						priority: "high",
						tags: ["backend", "security"],
					},
					{
						id: "2",
						title: "Create API documentation",
						description: "Document all REST endpoints",
						priority: "medium",
						tags: ["docs"],
					},
				],
			},
			{
				id: "in-progress",
				title: "In Progress",
				cards: [
					{
						id: "3",
						title: "Design dashboard mockups",
						description: "Create high-fidelity designs",
						priority: "high",
						assignee: {
							name: "Sarah Chen",
							avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
						},
						tags: ["design"],
					},
				],
			},
			{
				id: "done",
				title: "Done",
				cards: [
					{
						id: "4",
						title: "Setup project repository",
						description: "Initialize Git repo and CI/CD",
						priority: "high",
						tags: ["devops"],
					},
				],
			},
		],
		draggable: true,
		showAddButton: true,
	},
};

/**
 * Kanban board showcasing different task priorities.
 * Uses color coding and priority badges.
 */
export const WithPriorities: Story = {
	args: {
		columns: [
			{
				id: "backlog",
				title: "Backlog",
				cards: [
					{
						id: "1",
						title: "Research new framework",
						priority: "low",
						tags: ["research"],
					},
					{
						id: "2",
						title: "Update dependencies",
						priority: "low",
						tags: ["maintenance"],
					},
				],
			},
			{
				id: "todo",
				title: "To Do",
				cards: [
					{
						id: "3",
						title: "Critical bug in production",
						description: "Users cannot login",
						priority: "urgent",
						tags: ["bug", "production"],
						dueDate: new Date(Date.now() + 86400000), // Tomorrow
					},
					{
						id: "4",
						title: "Implement search feature",
						priority: "high",
						tags: ["feature"],
					},
				],
			},
			{
				id: "in-progress",
				title: "In Progress",
				cards: [
					{
						id: "5",
						title: "Database optimization",
						priority: "medium",
						assignee: {
							name: "Alex Kim",
							avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex",
						},
						tags: ["performance"],
					},
				],
			},
			{
				id: "review",
				title: "Review",
				cards: [
					{
						id: "6",
						title: "Code review: User service",
						priority: "medium",
						tags: ["review"],
					},
				],
			},
			{
				id: "done",
				title: "Done",
				cards: [
					{
						id: "7",
						title: "Update documentation",
						priority: "low",
						tags: ["docs"],
					},
				],
			},
		],
	},
};

/**
 * Simplified kanban board with minimal task information.
 * Good for quick task tracking.
 */
export const SimpleTasks: Story = {
	args: {
		columns: [
			{
				id: "todo",
				title: "To Do",
				cards: [
					{ id: "1", title: "Task 1" },
					{ id: "2", title: "Task 2" },
					{ id: "3", title: "Task 3" },
				],
			},
			{
				id: "doing",
				title: "Doing",
				cards: [{ id: "4", title: "Task 4" }],
			},
			{
				id: "done",
				title: "Done",
				cards: [
					{ id: "5", title: "Task 5" },
					{ id: "6", title: "Task 6" },
				],
			},
		],
		showAddButton: false,
	},
};

/**
 * Empty kanban board ready for new tasks.
 * Shows the board structure without any cards.
 */
export const EmptyBoard: Story = {
	args: {
		columns: [
			{
				id: "todo",
				title: "To Do",
				cards: [],
			},
			{
				id: "in-progress",
				title: "In Progress",
				cards: [],
			},
			{
				id: "done",
				title: "Done",
				cards: [],
			},
		],
	},
};

/**
 * Complete kanban board with multiple columns and detailed cards.
 * Demonstrates all available card properties.
 */
export const FullBoard: Story = {
	args: {
		columns: [
			{
				id: "backlog",
				title: "Backlog",
				limit: 10,
				cards: [
					{
						id: "1",
						title: "Implement dark mode",
						description: "Add theme switching capability",
						priority: "medium",
						tags: ["ui", "feature"],
					},
					{
						id: "2",
						title: "Add unit tests",
						description: "Increase test coverage to 80%",
						priority: "high",
						tags: ["testing"],
					},
				],
			},
			{
				id: "todo",
				title: "To Do",
				limit: 5,
				cards: [
					{
						id: "3",
						title: "Refactor API layer",
						description: "Simplify API service architecture",
						priority: "high",
						tags: ["refactoring", "backend"],
						assignee: {
							name: "Jordan Lee",
							avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan",
						},
					},
					{
						id: "4",
						title: "Update user onboarding",
						priority: "medium",
						tags: ["ux"],
					},
				],
			},
			{
				id: "in-progress",
				title: "In Progress",
				limit: 3,
				cards: [
					{
						id: "5",
						title: "Build notification system",
						description: "Real-time notifications via WebSocket",
						priority: "urgent",
						assignee: {
							name: "Emma Wilson",
							avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma",
						},
						tags: ["feature", "backend"],
						dueDate: new Date(Date.now() + 172800000), // 2 days from now
					},
				],
			},
			{
				id: "review",
				title: "Review",
				limit: 5,
				cards: [
					{
						id: "6",
						title: "Payment integration PR",
						priority: "high",
						assignee: {
							name: "Michael Torres",
							avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Michael",
						},
						tags: ["review", "payment"],
					},
					{
						id: "7",
						title: "Security audit results",
						priority: "urgent",
						tags: ["security"],
					},
				],
			},
			{
				id: "done",
				title: "Done",
				cards: [
					{
						id: "8",
						title: "Setup CI/CD pipeline",
						priority: "high",
						tags: ["devops"],
					},
					{
						id: "9",
						title: "Database migration",
						priority: "medium",
						tags: ["database"],
					},
					{
						id: "10",
						title: "Create landing page",
						priority: "medium",
						tags: ["frontend"],
					},
				],
			},
		],
	},
};