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

export type SelectOption = {
  value: string
  label: string
  disabled?: boolean
}

export type SelectProps = Omit<JSX.IntrinsicElements["select"], "children"> & {
  options: SelectOption[]
  placeholder?: string
  labelPosition?: "above" | "left" | "right"
  children?: any
}

export const Select: FC<SelectProps> = (props) => {
  const { options, placeholder, labelPosition = "above", children, class: className, ...selectProps } = props

  // If a label is provided but no id, generate a random id so the label can be clicked
  if (children && !selectProps.id) {
    selectProps.id = `random-${Math.random().toString(36)}`
  }

  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",
    "appearance-none bg-no-repeat bg-[right_8px_center] bg-[length:16px_16px] pr-8",
    "bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkw4IDEwTDEyIDYiIHN0cm9rZT0iIzZCNzI4MCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+')]",
    className,
  ]

  if (!children) {
    return (
      <select class={classes.join(" ")} {...selectProps}>
        {placeholder && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {options.map((option) => (
          <option
            key={option.value}
            value={option.value}
            disabled={option.disabled}
            selected={selectProps.value === option.value}
          >
            {option.label}
          </option>
        ))}
      </select>
    )
  }

  const labelElement = (
    <label for={selectProps.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}
        <select class={classes.join(" ")} {...selectProps}>
          {placeholder && (
            <option value="" disabled>
              {placeholder}
            </option>
          )}
          {options.map((option) => (
            <option key={option.value} value={option.value} disabled={option.disabled}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    )
  }

  if (labelPosition === "left") {
    return (
      <div class="flex items-center space-x-1 flex-1">
        {labelElement}
        <select class={[...classes, "flex-1"].join(" ")} {...selectProps}>
          {placeholder && (
            <option value="" disabled>
              {placeholder}
            </option>
          )}
          {options.map((option) => (
            <option key={option.value} value={option.value} disabled={option.disabled}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    )
  }

  if (labelPosition === "right") {
    return (
      <div class="flex items-center space-x-1 flex-1">
        <select class={[...classes, "flex-1"].join(" ")} {...selectProps}>
          {placeholder && (
            <option value="" disabled>
              {placeholder}
            </option>
          )}
          {options.map((option) => (
            <option key={option.value} value={option.value} disabled={option.disabled}>
              {option.label}
            </option>
          ))}
        </select>
        {labelElement}
      </div>
    )
  }

  return null
}

export const Test = () => {
  const months = [
    { value: "01", label: "January" },
    { value: "02", label: "February" },
    { value: "03", label: "March" },
    { value: "04", label: "April" },
    { value: "05", label: "May" },
    { value: "06", label: "June" },
    { value: "07", label: "July" },
    { value: "08", label: "August" },
    { value: "09", label: "September" },
    { value: "10", label: "October" },
    { value: "11", label: "November" },
    { value: "12", label: "December" },
  ]

  const years = Array.from({ length: 10 }, (_, i) => ({
    value: String(2024 + i),
    label: String(2024 + i),
  }))

  const countries = [
    { value: "us", label: "United States" },
    { value: "ca", label: "Canada" },
    { value: "uk", label: "United Kingdom" },
    { value: "de", label: "Germany" },
    { value: "fr", label: "France" },
    { value: "au", label: "Australia", disabled: true },
  ]

  return (
    <div class="p-6 space-y-8 max-w-md">
      {/* Basic selects */}
      <div>
        <h2 class="text-xl font-bold mb-4">Basic Selects</h2>
        <div class="space-y-4">
          <Select options={months} placeholder="Select month" />
          <Select options={years} placeholder="Select year" />
          <Select options={countries} placeholder="Select country" />
        </div>
      </div>

      {/* With values */}
      <div>
        <h2 class="text-xl font-bold mb-4">With Values</h2>
        <div class="space-y-4">
          <Select options={months} value="03" />
          <Select options={years} value="2025" />
        </div>
      </div>

      {/* Disabled state */}
      <div>
        <h2 class="text-xl font-bold mb-4">Disabled State</h2>
        <div class="space-y-4">
          <Select options={months} disabled placeholder="Disabled select" />
          <Select options={years} disabled value="2024" />
        </div>
      </div>

      {/* Custom styling */}
      <div>
        <h2 class="text-xl font-bold mb-4">Custom Styling</h2>
        <div class="space-y-4">
          <Select
            options={countries}
            class="border-blue-300 focus-visible:ring-blue-500"
            placeholder="Custom styled select"
          />
          <Select options={months} class="h-8 text-xs" placeholder="Small select" />
        </div>
      </div>

      {/* Label above */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Above</h2>
        <div class="space-y-4">
          <Select options={months} placeholder="Select month">
            Birth Month
          </Select>
          <Select options={years} placeholder="Select year">
            Birth Year
          </Select>
          <Select options={countries} placeholder="Select country">
            Country
          </Select>
        </div>
      </div>

      {/* Label to the left */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Left</h2>
        <div class="space-y-4">
          <Select labelPosition="left" options={months} placeholder="Select month">
            Month
          </Select>
          <Select labelPosition="left" options={years} placeholder="Select year">
            Year
          </Select>
          <Select labelPosition="left" options={countries} placeholder="Select country">
            Country
          </Select>
        </div>
      </div>

      {/* Label to the right */}
      <div>
        <h2 class="text-xl font-bold mb-4">Label Right</h2>
        <div class="space-y-4">
          <Select labelPosition="right" options={months} placeholder="Select month">
            Month
          </Select>
          <Select labelPosition="right" options={years} placeholder="Select year">
            Year
          </Select>
        </div>
      </div>

      {/* Horizontal layout (like card form) */}
      <div>
        <h2 class="text-xl font-bold mb-4">Horizontal Layout</h2>
        <div class="flex gap-4">
          <Select options={months} placeholder="MM">
            Expires
          </Select>
          <Select options={years} placeholder="YYYY">
            Year
          </Select>
        </div>
      </div>

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

      {/* With values and disabled states */}
      <div>
        <h2 class="text-xl font-bold mb-4">Select States</h2>
        <div class="space-y-4">
          <Select options={months} value="03">
            With Value
          </Select>
          <Select disabled options={years} value="2024">
            Disabled
          </Select>
          <Select class="h-8 text-xs" options={countries} placeholder="Small select">
            Small
          </Select>
        </div>
      </div>
    </div>
  )
}
