import type { Meta, StoryObj } from "@storybook/react";
import { Book, Code, Mail, Rocket, Settings, Users } from "lucide-react";
import { SuccessDisplay } from "./SuccessDisplay";

const meta: Meta<typeof SuccessDisplay> = {
	title: "Widgets/Onboarding/Display/SuccessDisplay",
	component: SuccessDisplay,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	decorators: [
		(Story) => (
			<div className="w-[500px]">
				<Story />
			</div>
		),
	],
};

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

// =============================================================================
// DEFAULT
// =============================================================================

export const Default: Story = {
	args: {
		title: "You're all set!",
		message: "Your setup is complete. Here's what you can do next.",
	},
};

// =============================================================================
// WITH NEXT STEPS
// =============================================================================

export const WithNextSteps: Story = {
	name: "With Next Steps",
	args: {
		title: "Welcome aboard!",
		message: "Your account has been created successfully.",
		nextSteps: [
			{
				title: "Complete your profile",
				description: "Add a photo and bio to personalize your account",
				icon: <Users className="size-5" />,
				actionText: "Edit Profile",
				onAction: () => alert("Edit profile clicked"),
			},
			{
				title: "Explore the dashboard",
				description: "Get familiar with the main features",
				icon: <Rocket className="size-5" />,
				actionText: "Go to Dashboard",
				onAction: () => alert("Dashboard clicked"),
			},
			{
				title: "Read the documentation",
				description: "Learn how to get the most out of our platform",
				icon: <Book className="size-5" />,
				optional: true,
			},
		],
	},
};

// =============================================================================
// CUSTOM ICON
// =============================================================================

export const CustomIcon: Story = {
	name: "Custom Icon",
	args: {
		title: "Email Verified!",
		message: "Your email address has been confirmed.",
		icon: <Mail className="size-8" />,
		nextSteps: [
			{
				title: "Set up two-factor authentication",
				description: "Add an extra layer of security to your account",
				icon: <Settings className="size-5" />,
				actionText: "Enable 2FA",
				onAction: () => alert("2FA clicked"),
			},
		],
	},
};

// =============================================================================
// SIMPLE SUCCESS
// =============================================================================

export const SimpleSuccess: Story = {
	name: "Simple Success",
	args: {
		title: "Changes Saved",
		message: "Your preferences have been updated successfully.",
	},
};

// =============================================================================
// DEVELOPER ONBOARDING
// =============================================================================

export const DeveloperOnboarding: Story = {
	name: "Developer Onboarding",
	args: {
		title: "API Key Generated!",
		message: "Your development environment is ready to go.",
		nextSteps: [
			{
				title: "Copy your API key",
				description: "Store it securely - you won't be able to see it again",
				icon: <Code className="size-5" />,
				actionText: "Copy Key",
				onAction: () => alert("Copy clicked"),
			},
			{
				title: "Install the SDK",
				description: "npm install @company/sdk",
				icon: <Rocket className="size-5" />,
			},
			{
				title: "Read the API docs",
				description: "Explore endpoints and examples",
				icon: <Book className="size-5" />,
				actionText: "View Docs",
				onAction: () => alert("Docs clicked"),
				optional: true,
			},
		],
	},
};

// =============================================================================
// WITH OPTIONAL STEPS
// =============================================================================

export const WithOptionalSteps: Story = {
	name: "With Optional Steps",
	args: {
		title: "Setup Complete!",
		message: "You're ready to start using the platform.",
		nextSteps: [
			{
				title: "Invite your team",
				description: "Collaborate with your colleagues",
				icon: <Users className="size-5" />,
				actionText: "Invite",
				onAction: () => alert("Invite clicked"),
			},
			{
				title: "Connect integrations",
				description: "Sync with your existing tools",
				icon: <Settings className="size-5" />,
				optional: true,
			},
			{
				title: "Watch the tutorial",
				description: "A 5-minute overview of key features",
				icon: <Book className="size-5" />,
				optional: true,
			},
		],
	},
};

// =============================================================================
// MANY NEXT STEPS
// =============================================================================

export const ManyNextSteps: Story = {
	name: "Many Next Steps",
	args: {
		title: "Project Created!",
		message: "Your new project is ready. Here are some things you can do:",
		nextSteps: [
			{
				title: "Configure settings",
				icon: <Settings className="size-5" />,
				actionText: "Configure",
				onAction: () => {},
			},
			{
				title: "Add team members",
				icon: <Users className="size-5" />,
				actionText: "Add",
				onAction: () => {},
			},
			{
				title: "Set up CI/CD",
				icon: <Code className="size-5" />,
				optional: true,
			},
			{
				title: "Read best practices",
				icon: <Book className="size-5" />,
				optional: true,
			},
		],
	},
};