"use client";

/**
 * Vault Field
 *
 * A credential/API key input form with integration branding.
 * Supports 1-6 dynamic fields with password masking by default.
 */

import { KeyRound } from "lucide-react";
import Image from "next/image";
import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingButton } from "../primitives/onboarding-button";
import { OnboardingInput } from "../primitives/onboarding-input";
import { OnboardingLabel } from "../primitives/onboarding-label";
import type { VaultFieldProps } from "../types/fields";

export function VaultField({
	integration,
	title = "Add Credential",
	fields,
	values,
	onChange,
	onSave,
	onCancel,
	loading = false,
	disabled = false,
	animationIndex = 0,
}: VaultFieldProps) {
	const displayTitle = integration?.name || title;

	const handleFieldChange = (key: string, value: string) => {
		onChange({ ...values, [key]: value });
	};

	return (
		<div
			className={cx(
				"rounded-lg border border-border bg-card p-4 sm:p-6",
				ANIMATION_CLASSES.fadeInUp,
			)}
			style={getStaggerStyle(
				animationIndex,
				STAGGER_PRESETS.formFields.baseDelay,
				STAGGER_PRESETS.formFields.increment,
				STAGGER_PRESETS.formFields.duration,
			)}
		>
			{/* Header */}
			<div className="mb-6 flex items-center gap-3">
				<div className="flex h-10 w-10 items-center justify-center rounded-md bg-white overflow-hidden p-1 border border-border">
					{integration?.logoUrl ? (
						<Image
							src={integration.logoUrl}
							alt={integration.name}
							width={32}
							height={32}
							className="h-full w-full object-contain rounded-sm"
							unoptimized
						/>
					) : (
						<KeyRound className="h-5 w-5 text-muted-foreground" />
					)}
				</div>
				<h3 className="text-lg font-semibold text-foreground">
					{displayTitle}
				</h3>
			</div>

			{/* Dynamic Fields */}
			<div className="space-y-4">
				{fields.slice(0, 6).map((field, _index) => (
					<div key={field.key}>
						<OnboardingLabel
							className="mb-2 block text-sm font-medium text-foreground"
							htmlFor={`vault-${field.key}`}
						>
							{field.label}
							{field.required && (
								<span className="ml-1 text-destructive">*</span>
							)}
						</OnboardingLabel>
						<OnboardingInput
							id={`vault-${field.key}`}
							type={field.type || "password"}
							placeholder={field.placeholder}
							value={values[field.key] || ""}
							onChange={(e) => handleFieldChange(field.key, e.target.value)}
							disabled={disabled || loading}
							autoComplete="off"
							data-1p-ignore
							data-lpignore="true"
						/>
					</div>
				))}
			</div>

			{/* Footer Buttons */}
			<div className="mt-6 flex justify-end gap-3">
				<OnboardingButton
					type="button"
					variant="secondary"
					onClick={onCancel}
					disabled={loading}
				>
					Cancel
				</OnboardingButton>
				<OnboardingButton
					type="button"
					variant="primary"
					onClick={onSave}
					isLoading={loading}
					loadingText="Saving..."
					disabled={disabled}
				>
					Save
				</OnboardingButton>
			</div>
		</div>
	);
}