import type { Meta, StoryObj } from "@storybook/nextjs"

import { PageLoader } from "./PageLoader"

const meta = {
	title: "Components/PageLoader",
	component: PageLoader,
	parameters: {
		layout: "centered",
		docs: {
			description: {
				component:
					"Modern loading spinner with ResponsiveValue support, multiple display modes, and semantic tones.",
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		label: {
			control: "text",
			description: "Loading text label for accessibility",
		},
		emphasis: {
			control: "select",
			options: ["subtle", "normal", "strong"],
			description: "Visual emphasis level",
		},
		tone: {
			control: "select",
			options: ["neutral", "accent", "positive", "critical"],
			description: "Semantic tone",
		},
		size: {
			control: "select",
			options: ["xs", "sm", "md", "lg", "xl"],
			description: "Component size",
		},
		speed: {
			control: "select",
			options: ["slow", "normal", "fast"],
			description: "Animation speed",
		},
		display: {
			control: "select",
			options: ["inline", "block", "overlay"],
			description: "Display mode",
		},
		withBackdrop: {
			control: "boolean",
			description: "Show with backdrop (for overlay mode)",
		},
	},
} satisfies Meta<typeof PageLoader>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
	args: {
		label: "Loading",
	},
}

export const Sizes: Story = {
	render: () => (
		<div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
			<PageLoader size="xs" label="XS" />
			<PageLoader size="sm" label="Small" />
			<PageLoader size="md" label="Medium" />
			<PageLoader size="lg" label="Large" />
			<PageLoader size="xl" label="XL" />
		</div>
	),
}

export const Tones: Story = {
	render: () => (
		<div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
			<div style={{ textAlign: "center" }}>
				<PageLoader tone="neutral" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Neutral
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader tone="accent" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Accent
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader tone="positive" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Positive
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader tone="critical" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Critical
				</p>
			</div>
		</div>
	),
}

export const EmphasisLevels: Story = {
	render: () => (
		<div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
			<div style={{ textAlign: "center" }}>
				<PageLoader emphasis="subtle" tone="accent" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Subtle
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader emphasis="normal" tone="accent" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Normal
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader emphasis="strong" tone="accent" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Strong
				</p>
			</div>
		</div>
	),
}

export const Speeds: Story = {
	render: () => (
		<div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
			<div style={{ textAlign: "center" }}>
				<PageLoader speed="slow" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Slow
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader speed="normal" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Normal
				</p>
			</div>
			<div style={{ textAlign: "center" }}>
				<PageLoader speed="fast" />
				<p style={{ marginTop: "8px", fontSize: "14px", color: "#666" }}>
					Fast
				</p>
			</div>
		</div>
	),
}

export const WithLabel: Story = {
	render: () => (
		<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
			<PageLoader label="Loading content..." size="sm" />
			<PageLoader label="Processing payment..." tone="positive" />
			<PageLoader label="Saving changes..." tone="accent" size="lg" />
		</div>
	),
}

export const DisplayModes: Story = {
	render: () => (
		<div>
			<div style={{ marginBottom: "24px" }}>
				<h3 style={{ fontSize: "14px", marginBottom: "8px" }}>Inline</h3>
				<p style={{ fontSize: "14px" }}>
					Text before <PageLoader display="inline" size="sm" /> text after
				</p>
			</div>
			<div style={{ marginBottom: "24px" }}>
				<h3 style={{ fontSize: "14px", marginBottom: "8px" }}>Block</h3>
				<div
					style={{
						width: "300px",
						padding: "16px",
						border: "1px solid #e0e0e0",
						borderRadius: "8px",
					}}
				>
					<PageLoader display="block" label="Loading data..." />
				</div>
			</div>
			<div>
				<h3 style={{ fontSize: "14px", marginBottom: "8px" }}>
					Overlay (shown in button demo)
				</h3>
				<button
					onClick={() => {
						const div = document.createElement("div")
						document.body.appendChild(div)
						const root = document.createElement("div")
						div.appendChild(root)
						// Note: In a real app, you'd use React portal
						setTimeout(() => document.body.removeChild(div), 2000)
					}}
					style={{
						padding: "8px 16px",
						borderRadius: "6px",
						border: "1px solid #007aff",
						background: "#007aff",
						color: "white",
						cursor: "pointer",
					}}
				>
					Show Overlay Loader
				</button>
			</div>
		</div>
	),
}

export const ResponsiveExample: Story = {
	args: {
		size: {
			mobile: "sm",
			tablet: "md",
			desktop: "lg",
		},
		emphasis: {
			mobile: "subtle",
			tablet: "normal",
			desktop: "strong",
		},
		tone: "accent",
		label: "Responsive loader",
	},
	parameters: {
		docs: {
			description: {
				story:
					"Loader that changes size and emphasis based on viewport. Resize to see changes.",
			},
		},
	},
}

export const UseCases: Story = {
	render: () => (
		<div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
			<div
				style={{
					padding: "16px",
					border: "1px solid #e0e0e0",
					borderRadius: "8px",
				}}
			>
				<h3 style={{ fontSize: "16px", marginBottom: "12px" }}>
					Form Submission
				</h3>
				<PageLoader
					tone="accent"
					size="md"
					label="Submitting form..."
					display="block"
				/>
			</div>
			<div
				style={{
					padding: "16px",
					border: "1px solid #e0e0e0",
					borderRadius: "8px",
				}}
			>
				<h3 style={{ fontSize: "16px", marginBottom: "12px" }}>
					Data Processing
				</h3>
				<PageLoader
					tone="positive"
					emphasis="strong"
					size="lg"
					label="Processing data..."
					display="block"
				/>
			</div>
			<div
				style={{
					padding: "16px",
					border: "1px solid #e0e0e0",
					borderRadius: "8px",
				}}
			>
				<h3 style={{ fontSize: "16px", marginBottom: "12px" }}>
					Critical Operation
				</h3>
				<PageLoader
					tone="critical"
					emphasis="normal"
					size="md"
					label="Deleting items..."
					display="block"
				/>
			</div>
		</div>
	),
}