import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { SmartDateTimePicker } from "./smart-datetime-picker";

const meta: Meta<typeof SmartDateTimePicker> = {
	title: "Widgets/SmartDateTimePicker",
	component: SmartDateTimePicker,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		value: { control: false },
		onChange: { action: "changed" },
		includeTime: { control: "boolean" },
		disabled: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[400px]">
				<Story />
			</div>
		),
	],
};

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

// Wrapper to handle state
function SmartDateTimePickerWithState(
	props: React.ComponentProps<typeof SmartDateTimePicker>,
) {
	const [value, setValue] = useState<Date | undefined>(props.value);
	return <SmartDateTimePicker {...props} value={value} onChange={setValue} />;
}

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

export const Default: Story = {
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		placeholder: "Enter a date or time...",
	},
};

// =============================================================================
// WITH TIME
// =============================================================================

export const WithTime: Story = {
	name: "With Time",
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		placeholder: "Enter a date and time...",
		includeTime: true,
	},
};

// =============================================================================
// WITH INITIAL VALUE
// =============================================================================

export const WithInitialValue: Story = {
	name: "With Initial Value",
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		value: new Date(),
	},
};

// =============================================================================
// WITH DATE CONSTRAINTS
// =============================================================================

export const WithMinDate: Story = {
	name: "With Min Date (Today)",
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		placeholder: "Select a future date...",
		minDate: new Date(),
	},
};

export const WithMaxDate: Story = {
	name: "With Max Date",
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		placeholder: "Select a date before end of month...",
		maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
	},
};

export const WithDateRange: Story = {
	name: "With Date Range",
	render: (args) => <SmartDateTimePickerWithState {...args} />,
	args: {
		placeholder: "Select a date this month...",
		minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
		maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
	},
};

// =============================================================================
// DISABLED
// =============================================================================

export const Disabled: Story = {
	args: {
		placeholder: "Cannot select date...",
		disabled: true,
	},
};

// =============================================================================
// NATURAL LANGUAGE EXAMPLES
// =============================================================================

export const NaturalLanguageHints: Story = {
	name: "Natural Language Examples",
	render: () => (
		<div className="space-y-4">
			<p className="text-sm text-muted-foreground">
				Try typing natural language dates like:
			</p>
			<ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
				<li>tomorrow</li>
				<li>next friday</li>
				<li>in 3 days</li>
				<li>2024-12-25</li>
				<li>december 25</li>
			</ul>
			<SmartDateTimePickerWithState placeholder="Try natural language..." />
		</div>
	),
};