import type { Meta, StoryObj } from "@storybook/react";
import { Cloud, Database, Server, Zap } from "lucide-react";
import { useState } from "react";
import { CardGridField } from "./CardGridField";
import type { CardGridConfig } from "../types/fields";

const meta: Meta<typeof CardGridField> = {
	title: "Widgets/Onboarding/Fields/CardGridField",
	component: CardGridField,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component: `
Card grid field for visual selection in onboarding flows.

Supports multiple layouts and configurations:
- **Vertical** - Cards stacked with icon above content (default)
- **Horizontal** - Cards with icon beside content
- **Columns** - 1, 2, 3, or 4 column layouts
- **Dropdowns** - Optional sub-selection per card

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

<CardGridField
  options={[
    { id: 'aws', name: 'AWS', icon: <Cloud />, description: 'Cloud platform' },
    { id: 'gcp', name: 'GCP', icon: <Database />, description: 'Google Cloud' },
  ]}
  selectedId={selected}
  onChange={({ selectedId }) => setSelected(selectedId)}
  columns={2}
  layout="vertical"
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		columns: {
			control: "select",
			options: [1, 2, 3, 4],
			description: "Number of columns in the grid",
		},
		layout: {
			control: "select",
			options: ["vertical", "horizontal"],
			description: "Card content layout direction",
		},
		disabled: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[600px]">
				<Story />
			</div>
		),
	],
};

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

// Sample options with dropdowns
const cloudOptions = [
	{
		id: "aws",
		name: "Amazon Web Services",
		icon: <Cloud className="size-6" />,
		description: "Industry-leading cloud platform",
		badge: "Popular",
		dropdown: {
			label: "Select region",
			placeholder: "Choose a region",
			options: [
				{ value: "us-east-1", label: "US East (N. Virginia)" },
				{ value: "us-west-2", label: "US West (Oregon)" },
				{ value: "eu-west-1", label: "EU (Ireland)" },
			],
		},
	},
	{
		id: "gcp",
		name: "Google Cloud",
		icon: <Database className="size-6" />,
		description: "Google's cloud infrastructure",
		dropdown: {
			label: "Select region",
			placeholder: "Choose a region",
			options: [
				{ value: "us-central1", label: "US Central" },
				{ value: "europe-west1", label: "Europe West" },
			],
		},
	},
	{
		id: "azure",
		name: "Microsoft Azure",
		icon: <Server className="size-6" />,
		description: "Enterprise cloud solutions",
	},
	{
		id: "vercel",
		name: "Vercel",
		icon: <Zap className="size-6" />,
		description: "Deploy instantly",
		badge: "New",
	},
];

// Wrapper to handle controlled state
function CardGridFieldWithState(
	props: Omit<React.ComponentProps<typeof CardGridField>, "onChange"> & {
		onChange?: (config: CardGridConfig) => void;
	},
) {
	const [config, setConfig] = useState<CardGridConfig>({
		selectedId: props.selectedId || "",
		dropdownValues: props.dropdownValues || {},
	});

	return (
		<CardGridField
			{...props}
			selectedId={config.selectedId}
			dropdownValues={config.dropdownValues}
			onChange={(newConfig) => {
				setConfig(newConfig);
				props.onChange?.(newConfig);
			}}
		/>
	);
}

/**
 * Default vertical card grid layout.
 * Use Controls to change: columns, layout, disabled
 */
export const Default: Story = {
	render: (args) => <CardGridFieldWithState {...args} />,
	args: {
		options: cloudOptions,
		selectedId: "",
		dropdownValues: {},
		columns: 2,
		layout: "vertical",
		ariaLabel: "Select cloud provider",
	},
};

/**
 * Horizontal layout with cards in a single column.
 * Best for options with longer descriptions.
 */
export const Horizontal: Story = {
	name: "Horizontal Layout",
	render: (args) => <CardGridFieldWithState {...args} />,
	args: {
		options: cloudOptions,
		selectedId: "",
		dropdownValues: {},
		columns: 1,
		layout: "horizontal",
		ariaLabel: "Select cloud provider",
	},
};