import { Eye, EyeOff } from 'lucide-react';
import { useState } from 'react';

// ── Password input ────────────────────────────────────────────────────────────

export function PasswordField({
    label,
    value,
    onChange,
    error,
    autoComplete,
}: {
    label: string;
    value: string;
    onChange: (v: string) => void;
    error?: string;
    autoComplete?: string;
}) {
    const [show, setShow] = useState(false);
    return (
        <div className="space-y-1.5">
            <label className="text-foreground text-muted-foreground text-xs font-medium tracking-wide uppercase">
                {label}
            </label>
            <div className="relative">
                <input
                    type={show ? 'text' : 'password'}
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    autoComplete={autoComplete}
                    className={`border-border bg-background text-foreground w-full rounded-xl border px-4 py-2.5 pr-10 text-sm focus:ring-2 focus:ring-orange-400/40 focus:outline-none ${error ? 'border-red-400' : ''}`}
                />
                <button
                    type="button"
                    onClick={() => setShow((s) => !s)}
                    tabIndex={-1}
                    className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
                >
                    {show ? (
                        <EyeOff className="h-4 w-4" />
                    ) : (
                        <Eye className="h-4 w-4" />
                    )}
                </button>
            </div>
            {error && <p className="text-xs text-red-500">{error}</p>}
        </div>
    );
}

// ── Field pair (label + value) for read-only display ─────────────────────────

export function FieldLabel({ label }: { label: string }) {
    return (
        <p className="text-muted-foreground dark:text-muted-foreground/65 text-[10px] font-semibold tracking-widest uppercase">
            {label}
        </p>
    );
}

// ── Form input ────────────────────────────────────────────────────────────────

export function FormInput({
    label,
    value,
    onChange,
    error,
    type = 'text',
    autoComplete,
    prefix,
}: {
    label: string;
    value: string;
    onChange: (v: string) => void;
    error?: string;
    type?: string;
    autoComplete?: string;
    prefix?: React.ReactNode;
}) {
    return (
        <div className="space-y-1.5">
            <FieldLabel label={label} />
            <div className="relative">
                {prefix && (
                    <span className="text-muted-foreground dark:text-muted-foreground/50 pointer-events-none absolute top-1/2 left-3 -translate-y-1/2">
                        {prefix}
                    </span>
                )}
                <input
                    type={type}
                    value={value}
                    onChange={(e) => onChange(e.target.value)}
                    autoComplete={autoComplete}
                    className={`border-border bg-background text-foreground w-full rounded-xl border px-4 py-2.5 text-sm focus:ring-2 focus:ring-orange-400/40 focus:outline-none ${prefix ? 'pl-9' : ''} ${error ? 'border-red-400' : ''}`}
                />
            </div>
            {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
        </div>
    );
}