import type { Meta, StoryObj } from "@storybook/react"
import {
  PasswordInput,
  PasswordInputAdornment,
  PasswordInputAdornmentToggle,
  PasswordInputInput,
} from "./InputPassword"

/**
 * The PasswordInput component is a specialized input for password entry that
 * includes built-in functionality to show/hide the password.
 */
const meta = {
  title: "base/form/PasswordInput",
  component: PasswordInput,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
} satisfies Meta<typeof PasswordInput>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default implementation of the password input with visibility toggle.
 */
export const Default: Story = {
  render: () => (
    <PasswordInput>
      <PasswordInputInput placeholder="Enter password..." />
      <PasswordInputAdornmentToggle />
    </PasswordInput>
  ),
}

/**
 * The password input component with controlled visibility state.
 */
export const ControlledVisibility: Story = {
  render: () => {
    // In a real implementation, you'd use React.useState here
    const visible = false
    const setVisible = () => console.log("Toggle visibility")

    return (
      <PasswordInput visible={visible} onVisibleChange={setVisible}>
        <PasswordInputInput placeholder="Enter password..." />
        <PasswordInputAdornmentToggle />
      </PasswordInput>
    )
  },
}

/**
 * Password input with a custom leading icon for additional context.
 */
export const WithLeadingIcon: Story = {
  render: () => (
    <PasswordInput>
      <PasswordInputAdornment>
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            d="M13.3334 7.33334H2.66669C1.93031 7.33334 1.33335 7.9303 1.33335 8.66668V13.3333C1.33335 14.0697 1.93031 14.6667 2.66669 14.6667H13.3334C14.0698 14.6667 14.6667 14.0697 14.6667 13.3333V8.66668C14.6667 7.9303 14.0698 7.33334 13.3334 7.33334Z"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M4.66669 7.33334V4.66668C4.66669 3.78263 5.01788 2.93478 5.64301 2.30965C6.26814 1.68453 7.11598 1.33334 8.00002 1.33334C8.88407 1.33334 9.7319 1.68453 10.357 2.30965C10.9822 2.93478 11.3334 3.78263 11.3334 4.66668V7.33334"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <path
            d="M8 10.6667C8.36819 10.6667 8.66667 10.3682 8.66667 10C8.66667 9.63185 8.36819 9.33337 8 9.33337C7.63181 9.33337 7.33333 9.63185 7.33333 10C7.33333 10.3682 7.63181 10.6667 8 10.6667Z"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </PasswordInputAdornment>
      <PasswordInputInput placeholder="Enter password..." />
      <PasswordInputAdornmentToggle />
    </PasswordInput>
  ),
}

/**
 * Disabled-like styling for the password input component.
 * Note: Apply disabled styling through CSS since the component doesn't directly support a disabled prop.
 */
export const DisabledStyling: Story = {
  render: () => (
    <div className="opacity-50 pointer-events-none">
      <PasswordInput>
        <PasswordInputInput placeholder="Password (disabled styling)" />
        <PasswordInputAdornmentToggle />
      </PasswordInput>
    </div>
  ),
}

/**
 * Password input with error styling for validation feedback.
 */
export const WithError: Story = {
  render: () => (
    <div className="space-y-2">
      <PasswordInput error>
        <PasswordInputInput placeholder="Invalid password" />
        <PasswordInputAdornmentToggle />
      </PasswordInput>
      <p className="text-sm text-red-500">Password must be at least 8 characters</p>
    </div>
  ),
}

/**
 * Password input with different sizes for various use cases.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="text-sm font-medium">Small</div>
        <PasswordInput size="sm">
          <PasswordInputInput placeholder="Small password input" />
          <PasswordInputAdornmentToggle />
        </PasswordInput>
      </div>

      <div className="space-y-2">
        <div className="text-sm font-medium">Medium (Default)</div>
        <PasswordInput size="md">
          <PasswordInputInput placeholder="Medium password input" />
          <PasswordInputAdornmentToggle />
        </PasswordInput>
      </div>

      <div className="space-y-2">
        <div className="text-sm font-medium">Large</div>
        <PasswordInput size="lg">
          <PasswordInputInput placeholder="Large password input" />
          <PasswordInputAdornmentToggle />
        </PasswordInput>
      </div>
    </div>
  ),
}

/**
 * Password input with pre-filled value for editing scenarios.
 */
export const WithValue: Story = {
  render: () => (
    <PasswordInput>
      <PasswordInputInput value="MySecretPassword123" onChange={() => {}} />
      <PasswordInputAdornmentToggle />
    </PasswordInput>
  ),
}

/**
 * Password input with multiple validation indicators.
 */
export const WithPasswordStrengthIndicator: Story = {
  render: () => {
    // Medium strength - pre-calculated values without conditionals
    const barClasses = [
      "bg-green-500", // First bar is green for medium strength
      "bg-green-500", // Second bar is green for medium strength
      "bg-gray-200", // Third bar is gray for medium strength
    ]

    // Display name without conditionals
    const strengthName = "Medium"

    return (
      <div className="space-y-3">
        <PasswordInput>
          <PasswordInputInput placeholder="Create password..." />
          <PasswordInputAdornmentToggle />
        </PasswordInput>

        <div className="space-y-2">
          <div className="flex space-x-1">
            <div className={`h-1 flex-1 rounded-full ${barClasses[0]}`} />
            <div className={`h-1 flex-1 rounded-full ${barClasses[1]}`} />
            <div className={`h-1 flex-1 rounded-full ${barClasses[2]}`} />
          </div>
          <p className="text-sm text-muted-foreground">Password strength: {strengthName}</p>
        </div>
      </div>
    )
  },
}