import type { Meta, StoryObj } from "@storybook/react";
import { Rocket, Shield, Target, Zap } from "lucide-react";
import type { SVGProps } from "react";
import { IconSelectField } from "./IconSelectField";

// Cloud provider logos for demonstrating plain icon style
const AWSLogo = (props: SVGProps<SVGSVGElement>) => (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 304 182"
		width="1em"
		height="1em"
		{...props}
	>
		<path
			className="fill-[#252f3e] dark:fill-foreground"
			d="m86 66 2 9c0 3 1 5 3 8v2l-1 3-7 4-2 1-3-1-4-5-3-6c-8 9-18 14-29 14-9 0-16-3-20-8-5-4-8-11-8-19s3-15 9-20c6-6 14-8 25-8a79 79 0 0 1 22 3v-7c0-8-2-13-5-16-3-4-8-5-16-5l-11 1a80 80 0 0 0-14 5h-2c-1 0-2-1-2-3v-5l1-3c0-1 1-2 3-2l12-5 16-2c12 0 20 3 26 8 5 6 8 14 8 25v32zM46 82l10-2c4-1 7-4 10-7l3-6 1-9v-4a84 84 0 0 0-19-2c-6 0-11 1-15 4-3 2-4 6-4 11s1 8 3 11c3 2 6 4 11 4zm80 10-4-1-2-3-23-78-1-4 2-2h10l4 1 2 4 17 66 15-66 2-4 4-1h8l4 1 2 4 16 67 17-67 2-4 4-1h9c2 0 3 1 3 2v2l-1 2-24 78-2 4-4 1h-9l-4-1-1-4-16-65-15 64-2 4-4 1h-9zm129 3a66 66 0 0 1-27-6l-3-3-1-2v-5c0-2 1-3 2-3h2l3 1a54 54 0 0 0 23 5c6 0 11-2 14-4 4-2 5-5 5-9l-2-7-10-5-15-5c-7-2-13-6-16-10a24 24 0 0 1 5-34l10-5a44 44 0 0 1 20-2 110 110 0 0 1 12 3l4 2 3 2 1 4v4c0 3-1 4-2 4l-4-2c-6-2-12-3-19-3-6 0-11 0-14 2s-4 5-4 9c0 3 1 5 3 7s5 4 11 6l14 4c7 3 12 6 15 10s5 9 5 14l-3 12-7 8c-3 3-7 5-11 6l-14 2z"
		/>
		<path
			className="fill-[#f90]"
			d="M274 144A220 220 0 0 1 4 124c-4-3-1-6 2-4a300 300 0 0 0 263 16c5-2 10 4 5 8z"
		/>
		<path
			className="fill-[#f90]"
			d="M287 128c-4-5-28-3-38-1-4 0-4-3-1-5 19-13 50-9 53-5 4 5-1 36-18 51-3 2-6 1-5-2 5-10 13-33 9-38z"
		/>
	</svg>
);

const AzureLogo = (props: SVGProps<SVGSVGElement>) => (
	<svg
		viewBox="0 0 96 96"
		xmlns="http://www.w3.org/2000/svg"
		width="1em"
		height="1em"
		{...props}
	>
		<defs>
			<linearGradient
				id="azure-a"
				x1={-1032.17}
				x2={-1059.21}
				y1={145.31}
				y2={65.43}
				gradientTransform="matrix(1 0 0 -1 1075 158)"
				gradientUnits="userSpaceOnUse"
			>
				<stop offset={0} stopColor="#114a8b" />
				<stop offset={1} stopColor="#0669bc" />
			</linearGradient>
			<linearGradient
				id="azure-c"
				x1={-1027.16}
				x2={-997.48}
				y1={147.64}
				y2={68.56}
				gradientTransform="matrix(1 0 0 -1 1075 158)"
				gradientUnits="userSpaceOnUse"
			>
				<stop offset={0} stopColor="#3ccbf4" />
				<stop offset={1} stopColor="#2892df" />
			</linearGradient>
		</defs>
		<path
			fill="url(#azure-a)"
			d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
		/>
		<path
			fill="#0078d4"
			d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
		/>
		<path
			fill="url(#azure-c)"
			d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
		/>
	</svg>
);

const GCPLogo = (props: SVGProps<SVGSVGElement>) => (
	<svg
		viewBox="0 0 256 206"
		xmlns="http://www.w3.org/2000/svg"
		width="1em"
		height="1em"
		preserveAspectRatio="xMidYMid"
		{...props}
	>
		<path
			d="M170.252 56.819l22.253-22.253 1.483-9.37C153.437-11.677 88.976-7.496 52.42 33.92 42.267 45.423 34.734 59.764 30.717 74.573l7.97-1.123 44.505-7.34 3.436-3.513c19.797-21.742 53.27-24.667 76.128-6.168l7.496.39z"
			fill="#EA4335"
		/>
		<path
			d="M224.205 73.918a100.249 100.249 0 00-30.217-39.391l-31.232 31.232a55.515 55.515 0 0120.379 44.037v5.544c15.35 0 27.797 12.446 27.797 27.796 0 15.352-12.446 27.485-27.797 27.485h-55.671l-5.466 5.934v33.34l5.466 5.231h55.67c39.93.311 72.553-31.494 72.864-71.424a72.303 72.303 0 00-31.793-69.784"
			fill="#4285F4"
		/>
		<path
			d="M71.87 205.796h55.593V161.29H71.87a27.275 27.275 0 01-11.399-2.498l-7.887 2.42-22.409 22.253-1.952 7.574c12.567 9.489 27.9 14.825 43.647 14.757"
			fill="#34A853"
		/>
		<path
			d="M71.87 61.425C31.94 61.664-.237 94.228.001 134.158a72.301 72.301 0 0028.222 56.88l32.248-32.246c-13.99-6.322-20.208-22.786-13.887-36.776 6.32-13.99 22.786-20.208 36.775-13.888a27.796 27.796 0 0113.887 13.888l32.248-32.248A72.224 72.224 0 0071.87 61.425"
			fill="#FBBC05"
		/>
	</svg>
);

const meta: Meta<typeof IconSelectField> = {
	title: "Widgets/Onboarding/Fields/IconSelectField",
	component: IconSelectField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		selectedIds: { control: "object" },
		onChange: { action: "changed" },
		disabled: { control: "boolean" },
		selectionMode: {
			control: "radio",
			options: ["single", "multiple"],
		},
		iconStyle: {
			control: "radio",
			options: ["boxed", "plain"],
		},
		iconSize: {
			control: "radio",
			options: ["sm", "md", "lg"],
		},
	},
};

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

// Icon options with Lucide icons
const iconOptions = [
	{
		id: "speed",
		name: "Speed",
		description: "Optimize for fast performance",
		icon: <Zap className="size-6" />,
	},
	{
		id: "security",
		name: "Security",
		description: "Maximize protection",
		icon: <Shield className="size-6" />,
	},
	{
		id: "growth",
		name: "Growth",
		description: "Scale your business",
		icon: <Rocket className="size-6" />,
	},
	{
		id: "precision",
		name: "Precision",
		description: "Focus on accuracy",
		icon: <Target className="size-6" />,
	},
];

// Logo options with brand SVGs (matches original cloud-provider demo)
const logoOptions = [
	{
		id: "aws",
		name: "Amazon Web Services",
		description: "EC2, Lambda, S3, and more",
		icon: <AWSLogo className="size-6" />,
	},
	{
		id: "azure",
		name: "Microsoft Azure",
		description: "Virtual Machines, Functions, Blob Storage",
		icon: <AzureLogo className="size-6" />,
	},
	{
		id: "gcp",
		name: "Google Cloud Platform",
		description: "Compute Engine, Cloud Functions, Cloud Storage",
		icon: <GCPLogo className="size-6" />,
	},
];

export const Default: Story = {
	args: {
		options: iconOptions,
		selectedIds: [],
		selectionMode: "single",
		iconStyle: "boxed",
		ariaLabel: "Select your primary goal",
	},
};

export const WithSelection: Story = {
	args: {
		options: iconOptions,
		selectedIds: ["security"],
		selectionMode: "single",
		iconStyle: "boxed",
		ariaLabel: "Select your primary goal",
	},
};

export const MultipleSelection: Story = {
	args: {
		options: iconOptions,
		selectedIds: ["speed", "security"],
		selectionMode: "multiple",
		iconStyle: "boxed",
		ariaLabel: "Select your goals",
	},
};

export const WithLogos: Story = {
	args: {
		options: logoOptions,
		selectedIds: [],
		selectionMode: "multiple",
		iconStyle: "boxed",
		ariaLabel: "Select cloud providers",
	},
};

export const LogoWithSelection: Story = {
	args: {
		options: logoOptions,
		selectedIds: ["aws", "gcp"],
		selectionMode: "multiple",
		iconStyle: "boxed",
		ariaLabel: "Select cloud providers",
	},
};

export const PlainIconStyle: Story = {
	args: {
		options: logoOptions,
		selectedIds: [],
		selectionMode: "single",
		iconStyle: "plain",
		iconSize: "lg",
		ariaLabel: "Select cloud provider (plain style)",
	},
};

export const SmallIcons: Story = {
	args: {
		options: iconOptions,
		selectedIds: [],
		selectionMode: "single",
		iconStyle: "boxed",
		iconSize: "sm",
		ariaLabel: "Select your primary goal",
	},
};

export const LargeIcons: Story = {
	args: {
		options: iconOptions,
		selectedIds: [],
		selectionMode: "single",
		iconStyle: "boxed",
		iconSize: "lg",
		ariaLabel: "Select your primary goal",
	},
};

export const Disabled: Story = {
	args: {
		options: iconOptions,
		selectedIds: ["growth"],
		selectionMode: "single",
		iconStyle: "boxed",
		ariaLabel: "Select your primary goal",
		disabled: true,
	},
};