import { useId, useState, type InputHTMLAttributes } from "react";
import { Dice5, Eye, EyeOff } from "lucide-react";
import PasswordGeneratorDialog from "./PasswordGeneratorDialog";
import type { PasswordGeneratorOptions } from "./passwordGenerator";
import { usePlatformLanguage } from "../i18n/LanguageContext";

export type PasswordFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
  value: string;
  onValueChange: (value: string) => void;
  saved?: boolean;
  savedPlaceholder?: string;
  revealLabel?: string;
  hideLabel?: string;
  generator?: boolean;
  generatorLabel?: string;
  generatorOptions?: Partial<PasswordGeneratorOptions>;
  inputClassName?: string;
};

export default function PasswordField({
  value,
  onValueChange,
  saved = false,
  savedPlaceholder = "••••••••",
  revealLabel = "i18n:govoplan-core.show_password.044b852f",
  hideLabel = "i18n:govoplan-core.hide_password.e40123b4",
  generator = false,
  generatorLabel = "i18n:govoplan-core.generate_password.bd5bede8",
  generatorOptions,
  placeholder,
  disabled = false,
  className = "",
  inputClassName = "",
  id,
  ...inputProps
}: PasswordFieldProps) {
  const generatedId = useId();
  const { translateText } = usePlatformLanguage();
  const inputId = id ?? generatedId;
  const [visible, setVisible] = useState(false);
  const [generatorOpen, setGeneratorOpen] = useState(false);
  const hasTypedPassword = value.length > 0;
  const showSavedPlaceholder = saved && !hasTypedPassword;
  const canReveal = hasTypedPassword && !disabled;
  const canGenerate = generator && !disabled && !inputProps.readOnly;
  const inputType = visible && canReveal ? "text" : "password";
  const translatedGeneratorLabel = translateText(generatorLabel);
  const translatedRevealLabel = translateText(revealLabel);
  const translatedHideLabel = translateText(hideLabel);

  return (
    <>
      <div className={`password-field ${canReveal || canGenerate ? "has-actions" : ""} ${canGenerate ? "has-generator" : ""} ${canReveal ? "has-reveal" : ""} ${showSavedPlaceholder ? "is-saved-empty" : ""} ${className}`.trim()}>
        <input
          {...inputProps}
          id={inputId}
          className={inputClassName}
          type={inputType}
          value={value}
          disabled={disabled}
          placeholder={showSavedPlaceholder ? savedPlaceholder : placeholder}
          onChange={(event) => {
            onValueChange(event.target.value);
            if (!event.target.value) setVisible(false);
          }} />

        {canReveal || canGenerate ? (
          <span className="password-field-actions">
            {canGenerate ? (
              <button
                type="button"
                className="password-field-action"
                aria-label={translatedGeneratorLabel}
                title={translatedGeneratorLabel}
                onClick={() => setGeneratorOpen(true)}
              >
                <Dice5 size={17} aria-hidden="true" />
              </button>
            ) : null}
            {canReveal ? (
              <button
                type="button"
                className="password-field-action"
                aria-label={visible ? translatedHideLabel : translatedRevealLabel}
                title={visible ? translatedHideLabel : translatedRevealLabel}
                onClick={() => setVisible((current) => !current)}
              >
                {visible ? <EyeOff size={17} aria-hidden="true" /> : <Eye size={17} aria-hidden="true" />}
              </button>
            ) : null}
          </span>
        ) : null}
      </div>

      <PasswordGeneratorDialog
        open={generatorOpen}
        initialOptions={generatorOptions}
        onUse={(password) => {
          onValueChange(password);
          setVisible(false);
        }}
        onClose={() => setGeneratorOpen(false)}
      />
    </>
  );
}