import { createSignal, Show } from "solid-js";
import { cn } from "~/lib/utils";
import type { JSX } from "solid-js";

interface PasswordInputProps {
  label?: string;
  value?: string;
  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
  error?: string;
  helperText?: string;
  placeholder?: string;
  class?: string;
  id?: string;
  name?: string;
  required?: boolean;
  disabled?: boolean;
}

export default function PasswordInput(props: PasswordInputProps) {
  const [visible, setVisible] = createSignal(false);
  const id = () =>
    props.id ??
    props.name ??
    globalThis.crypto?.randomUUID?.() ??
    Math.random().toString(36).slice(2, 10);

  return (
    <div class={cn("flex flex-col gap-1", props.class)}>
      {props.label && (
        <label
          for={id()}
          class="text-sm font-medium text-[var(--color-text-primary)]"
        >
          {props.label}
          {props.required && (
            <span class="text-[var(--color-error)] ml-1">*</span>
          )}
        </label>
      )}
      <div class="relative">
        <input
          id={id()}
          type={visible() ? "text" : "password"}
          value={props.value ?? ""}
          onInput={props.onInput}
          placeholder={props.placeholder}
          name={props.name}
          disabled={props.disabled}
          class={cn(
            "w-full bg-transparent border rounded-lg px-4 py-2 pr-10 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] transition-all duration-200",
            props.error
              ? "border-[var(--color-error)] focus:ring-[var(--color-error)]"
              : "border-[var(--color-border)] focus:ring-[var(--color-focus-ring)]",
            "focus:outline-none focus:ring-2",
            props.disabled && "opacity-50 cursor-not-allowed",
          )}
        />
        <button
          type="button"
          onClick={() => setVisible(!visible())}
          class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer"
          aria-label={visible() ? "Hide password" : "Show password"}
          tabindex={-1}
        >
          <Show
            when={visible()}
            fallback={
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                <circle cx="12" cy="12" r="3" />
              </svg>
            }
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
              <line x1="1" y1="1" x2="23" y2="23" />
            </svg>
          </Show>
        </button>
      </div>
      {props.error && (
        <p class="text-sm text-[var(--color-error)]">{props.error}</p>
      )}
      {props.helperText && !props.error && (
        <p class="text-sm text-[var(--color-text-tertiary)]">
          {props.helperText}
        </p>
      )}
    </div>
  );
}
