import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { VaultField } from "./VaultField";

const meta: Meta<typeof VaultField> = {
	title: "Widgets/Onboarding/Fields/VaultField",
	component: VaultField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		onSave: { action: "save" },
		onCancel: { action: "cancel" },
		loading: { control: "boolean" },
		disabled: { control: "boolean" },
	},
	decorators: [
		(Story) => (
			<div className="w-[450px]">
				<Story />
			</div>
		),
	],
};

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

// Wrapper to handle state
function VaultFieldWithState(props: React.ComponentProps<typeof VaultField>) {
	const [values, setValues] = useState<Record<string, string>>(
		props.values || {},
	);
	return <VaultField {...props} values={values} onChange={setValues} />;
}

export const Default: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		title: "Add Credential",
		fields: [
			{
				key: "apiKey",
				label: "API Key",
				placeholder: "Enter your API key",
				required: true,
			},
		],
		values: {},
	},
};

export const WithIntegration: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "Stripe",
			logoUrl: "https://cdn.brandfetch.io/idxAg10C0L/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "publishableKey",
				label: "Publishable Key",
				placeholder: "pk_live_...",
				required: true,
			},
			{
				key: "secretKey",
				label: "Secret Key",
				placeholder: "sk_live_...",
				required: true,
			},
		],
		values: {},
	},
};

export const OpenAI: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "OpenAI",
			logoUrl: "https://cdn.brandfetch.io/idR3duQxYl/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "apiKey",
				label: "API Key",
				placeholder: "sk-...",
				required: true,
			},
			{
				key: "orgId",
				label: "Organization ID",
				placeholder: "org-...",
				required: false,
			},
		],
		values: {},
	},
};

export const AWS: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "AWS",
			logoUrl: "https://cdn.brandfetch.io/idkfpqS2Ry/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "accessKeyId",
				label: "Access Key ID",
				placeholder: "AKIA...",
				required: true,
			},
			{
				key: "secretAccessKey",
				label: "Secret Access Key",
				placeholder: "Enter secret key",
				required: true,
			},
			{
				key: "region",
				label: "Region",
				placeholder: "us-east-1",
				type: "text",
				required: true,
			},
		],
		values: {},
	},
};

export const DatabaseCredentials: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "PostgreSQL",
		},
		fields: [
			{
				key: "host",
				label: "Host",
				placeholder: "localhost",
				type: "text",
				required: true,
			},
			{
				key: "port",
				label: "Port",
				placeholder: "5432",
				type: "text",
				required: true,
			},
			{
				key: "database",
				label: "Database",
				placeholder: "myapp",
				type: "text",
				required: true,
			},
			{
				key: "username",
				label: "Username",
				placeholder: "postgres",
				type: "text",
				required: true,
			},
			{
				key: "password",
				label: "Password",
				placeholder: "Enter password",
				required: true,
			},
		],
		values: {},
	},
};

export const WithValues: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "Twilio",
			logoUrl: "https://cdn.brandfetch.io/idBP2zvO4L/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "accountSid",
				label: "Account SID",
				placeholder: "AC...",
				type: "text",
				required: true,
			},
			{
				key: "authToken",
				label: "Auth Token",
				placeholder: "Enter auth token",
				required: true,
			},
		],
		values: {
			accountSid: "AC1234567890abcdef",
			authToken: "••••••••••••••••",
		},
	},
};

export const Loading: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "GitHub",
			logoUrl: "https://cdn.brandfetch.io/idZAyF9rlg/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "token",
				label: "Personal Access Token",
				placeholder: "ghp_...",
				required: true,
			},
		],
		values: {
			token: "ghp_xxxxxxxxxxxxxxxxxxxx",
		},
		loading: true,
	},
};

export const Disabled: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		integration: {
			name: "Slack",
			logoUrl: "https://cdn.brandfetch.io/idLbjXNZpQ/theme/dark/symbol.svg",
		},
		fields: [
			{
				key: "botToken",
				label: "Bot Token",
				placeholder: "xoxb-...",
				required: true,
			},
			{
				key: "signingSecret",
				label: "Signing Secret",
				placeholder: "Enter signing secret",
				required: true,
			},
		],
		values: {
			botToken: "xoxb-1234567890",
			signingSecret: "••••••••••••",
		},
		disabled: true,
	},
};

export const GenericCredential: Story = {
	render: (args) => <VaultFieldWithState {...args} />,
	args: {
		title: "Add API Credential",
		fields: [
			{
				key: "name",
				label: "Credential Name",
				placeholder: "My API Key",
				type: "text",
				required: true,
			},
			{
				key: "apiKey",
				label: "API Key",
				placeholder: "Enter API key",
				required: true,
			},
			{
				key: "apiSecret",
				label: "API Secret",
				placeholder: "Enter API secret",
			},
		],
		values: {},
	},
};