import "hono/jsx"
import { JSX, FC } from "hono/jsx"

export type InputProps = JSX.IntrinsicElements["input"] & {
  labelPosition?: "above" | "left" | "right"
  children?: any
}

export const Input: FC<InputProps> = (props) => {
  const { labelPosition = "above", children, class: className, ...inputProps } = props

  const classes = [
    "h-10 px-3 py-2 rounded-md border border-input bg-background text-sm",
    "placeholder:text-muted-foreground",
    "focus-visible:outline-none focus-visible:ring-2",
    "disabled:cursor-not-allowed disabled:opacity-50",
    className,
  ]

  if (!children) {
    return <input class={classes.join(" ")} {...inputProps} />
  }

  const labelElement = (
    <label for={inputProps.id} class="text-sm font-medium text-gray-900 dark:text-gray-100">
      {children}
    </label>
  )

  if (labelPosition === "above") {
    return (
      <div class="space-y-1 flex flex-col flex-1 min-w-0">
        {labelElement}
        <input class={classes.join(" ")} {...inputProps} />
      </div>
    )
  }

  if (labelPosition === "left") {
    return (
      <div class="flex items-center space-x-1 flex-1">
        {labelElement}
        <input class={[...classes, "flex-1"].join(" ")} {...inputProps} />
      </div>
    )
  }

  if (labelPosition === "right") {
    return (
      <div class="flex items-center space-x-1 flex-1">
        <input class={[...classes, "flex-1"].join(" ")} {...inputProps} />
        {labelElement}
      </div>
    )
  }

  return null
}

export const Test = () => {
  return (
    <div class="p-6 space-y-8 max-w-md">
      {/* Basic inputs */}
      <div>
        <h2 class="text-xl font-bold mb-4">Basic Inputs</h2>
        <div class="space-y-4">
          <Input placeholder="Enter your name" />
          <Input type="email" placeholder="Enter your email" />
          <Input type="password" placeholder="Enter your password" />
        </div>
      </div>

      {/* Custom styling */}
      <div>
        <h2 class="text-xl font-bold mb-4">Custom Styling</h2>
        <div class="space-y-4">
          <Input class="h-8 text-xs" placeholder="Small input" />
          <Input placeholder="Default input" />
          <Input class="h-12 text-base" placeholder="Large input" />
        </div>
      </div>

      {/* With values */}
      <div>
        <h2 class="text-xl font-bold mb-4">With Values</h2>
        <div class="space-y-4">
          <Input value="John Doe" placeholder="Name" />
          <Input type="email" value="john@example.com" placeholder="Email" />
        </div>
      </div>

      {/* Disabled state */}
      <div>
        <h2 class="text-xl font-bold mb-4">Disabled State</h2>
        <div class="space-y-4">
          <Input disabled placeholder="Disabled input" />
          <Input disabled value="Disabled with value" />
        </div>
      </div>

      {/* Label above */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Above</h2>
        <div class="space-y-4">
          <Input placeholder="Enter your name">Name</Input>
          <Input type="email" placeholder="Enter your email">
            Email
          </Input>
          <Input type="password" placeholder="Enter your password">
            Password
          </Input>
        </div>
      </div>

      {/* Label to the left */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Left</h2>
        <div class="space-y-4">
          <Input labelPosition="left" placeholder="Enter your name">
            Name
          </Input>
          <Input labelPosition="left" type="email" placeholder="Enter your email">
            Email
          </Input>
          <Input labelPosition="left" type="password" placeholder="Enter your password">
            Password
          </Input>
        </div>
      </div>

      {/* Label to the right */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Right</h2>
        <div class="space-y-4">
          <Input labelPosition="right" placeholder="Enter your name">
            Name
          </Input>
          <Input labelPosition="right" type="email" placeholder="Enter your email">
            Email
          </Input>
          <Input labelPosition="right" type="password" placeholder="Enter your password">
            Password
          </Input>
        </div>
      </div>

      {/* Horizontal layout */}
      <div>
        <h2 class="text-xl font-bold mb-4">Horizontal Layout</h2>
        <div class="flex gap-4">
          <Input placeholder="First name">First</Input>
          <Input placeholder="Last name">Last</Input>
          <Input placeholder="Age">Age</Input>
        </div>
      </div>

      {/* Custom styling */}
      <div>
        <h2 class="text-xl font-bold mb-4">Custom Input Styling</h2>
        <div class="space-y-4">
          <Input class="border-blue-300 focus-visible:ring-blue-500" placeholder="Custom styled input">
            <span class="text-blue-600 font-bold">Custom Label</span>
          </Input>
          <Input labelPosition="left" placeholder="Required input">
            <span class="text-red-600 min-w-24">Required Field</span>
          </Input>
        </div>
      </div>

      {/* With values and disabled states */}
      <div>
        <h2 class="text-xl font-bold mb-4">Input States</h2>
        <div class="space-y-4">
          <Input value="John Doe">With Value</Input>
          <Input disabled value="Disabled field">
            Disabled
          </Input>
          <Input class="h-8 text-xs" placeholder="Small input">
            Small
          </Input>
        </div>
      </div>
    </div>
  )
}
