import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { TeamInviteField } from "./TeamInviteField";
import type { TeamMember, TeamRole } from "../types/fields";

const meta: Meta<typeof TeamInviteField> = {
	title: "Widgets/Onboarding/Fields/TeamInviteField",
	component: TeamInviteField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Team invitation field for onboarding flows.

Allows users to invite multiple team members with role assignment:
- **Email + Role** - Each invite has email input and role selector
- **Add/Remove** - Dynamic list with add and remove actions
- **Validation** - Per-row email validation with error display
- **Max Invites** - Configurable limit on number of invites

\`\`\`tsx
import { TeamInviteField } from '@mdxui/widgets'

<TeamInviteField
  roles={[
    { value: 'admin', label: 'Admin', description: 'Full access' },
    { value: 'editor', label: 'Editor', description: 'Can edit content' },
    { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
  ]}
  members={members}
  onChange={setMembers}
  onAdd={handleAdd}
  onRemove={handleRemove}
  maxInvites={10}
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		disabled: { control: "boolean" },
		maxInvites: { control: "number", description: "Maximum number of invites" },
	},
	decorators: [
		(Story) => (
			<div className="w-[500px]">
				<Story />
			</div>
		),
	],
};

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

// Sample roles
const defaultRoles: TeamRole[] = [
	{ value: "admin", label: "Admin", description: "Full access to all features" },
	{ value: "editor", label: "Editor", description: "Can edit content" },
	{ value: "viewer", label: "Viewer", description: "Read-only access" },
];

// Wrapper to handle controlled state
function TeamInviteFieldWithState(
	props: Omit<React.ComponentProps<typeof TeamInviteField>, "onChange" | "onAdd" | "onRemove">,
) {
	const [members, setMembers] = useState<TeamMember[]>(
		props.members || [{ email: "", role: "viewer" }],
	);
	const [errors, setErrors] = useState<Record<number, string>>(props.errors || {});

	const handleAdd = () => {
		setMembers((prev) => [...prev, { email: "", role: "viewer" }]);
	};

	const handleRemove = (index: number) => {
		setMembers((prev) => prev.filter((_, i) => i !== index));
		setErrors((prev) => {
			const newErrors = { ...prev };
			delete newErrors[index];
			return newErrors;
		});
	};

	return (
		<TeamInviteField
			{...props}
			members={members}
			errors={errors}
			onChange={setMembers}
			onAdd={handleAdd}
			onRemove={handleRemove}
		/>
	);
}

/**
 * Default team invite field with role selection.
 * Use Controls to adjust: maxInvites, disabled
 */
export const Default: Story = {
	render: (args) => <TeamInviteFieldWithState {...args} />,
	args: {
		roles: defaultRoles,
		members: [{ email: "", role: "viewer" }],
	},
};

/**
 * Shows validation errors for invalid email addresses.
 * Demonstrates per-row error messaging.
 */
export const WithErrors: Story = {
	name: "With Validation Errors",
	args: {
		roles: defaultRoles,
		members: [
			{ email: "invalid-email", role: "admin" },
			{ email: "valid@example.com.ai", role: "editor" },
			{ email: "", role: "viewer" },
		],
		errors: {
			0: "Please enter a valid email address",
		},
		onChange: () => {},
		onAdd: () => {},
		onRemove: () => {},
	},
};