"use client";

/**
 * Team Invite Field
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/team-invite-step.tsx:199-261
 * Renders a team member invite row with email and role
 */

import { Mail, Plus, X } from "lucide-react";
import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingInput } from "../primitives/onboarding-input";
import { OnboardingLabel } from "../primitives/onboarding-label";
import {
	OnboardingSelect,
	OnboardingSelectContent,
	OnboardingSelectItem,
	OnboardingSelectTrigger,
	OnboardingSelectValue,
} from "../primitives/onboarding-select";
import type {
	TeamInviteFieldProps,
	TeamMember,
	TeamRole,
} from "../types/fields";

interface MemberRowProps {
	member: TeamMember;
	index: number;
	roles: TeamRole[];
	error?: string;
	canRemove: boolean;
	onEmailChange: (index: number, email: string) => void;
	onRoleChange: (index: number, role: string) => void;
	onRemove: (index: number) => void;
	disabled?: boolean;
}

/**
 * Single member row
 * COPIED VERBATIM FROM: components/onboarding/steps/team-invite-step.tsx:210-260
 */
function MemberRow({
	member,
	index,
	roles,
	error,
	canRemove,
	onEmailChange,
	onRoleChange,
	onRemove,
	disabled,
}: MemberRowProps) {
	return (
		<div
			className={ANIMATION_CLASSES.fadeInUp}
			style={getStaggerStyle(
				index,
				STAGGER_PRESETS.teamMembers.baseDelay,
				STAGGER_PRESETS.teamMembers.increment,
				STAGGER_PRESETS.teamMembers.duration,
			)}
		>
			<div className="flex items-center gap-3">
				<Mail className="h-4 w-4 shrink-0 text-muted-foreground" />
				<div className="flex-1">
					<OnboardingLabel className="sr-only" htmlFor={`email-${index}`}>
						Email address
					</OnboardingLabel>
					<OnboardingInput
						id={`email-${index}`}
						type="email"
						placeholder="colleague@company.com"
						value={member.email}
						onChange={(e) => onEmailChange(index, e.target.value)}
						aria-invalid={!!error}
						className={cx(error && "border-destructive")}
						disabled={disabled}
					/>
				</div>
				<div className="w-28">
					<OnboardingLabel className="sr-only" htmlFor={`role-${index}`}>
						Role
					</OnboardingLabel>
					<OnboardingSelect
						value={member.role}
						onValueChange={(value) => onRoleChange(index, value)}
						disabled={disabled}
					>
						<OnboardingSelectTrigger id={`role-${index}`}>
							<OnboardingSelectValue />
						</OnboardingSelectTrigger>
						<OnboardingSelectContent>
							{roles.map((role) => (
								<OnboardingSelectItem key={role.value} value={role.value}>
									{role.label}
								</OnboardingSelectItem>
							))}
						</OnboardingSelectContent>
					</OnboardingSelect>
				</div>
				{canRemove && (
					<button
						type="button"
						onClick={() => onRemove(index)}
						className="shrink-0 rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
						aria-label="Remove member"
						disabled={disabled}
					>
						<X className="h-4 w-4" />
					</button>
				)}
			</div>
			{error && <p className="mt-1 ml-7 text-sm text-destructive">{error}</p>}
		</div>
	);
}

export function TeamInviteField({
	members,
	roles,
	errors = {},
	onChange,
	onAdd,
	onRemove,
	maxInvites = 10,
	disabled = false,
}: TeamInviteFieldProps) {
	const handleEmailChange = (index: number, email: string) => {
		const newMembers = [...members];
		newMembers[index] = { ...newMembers[index], email };
		onChange(newMembers);
	};

	const handleRoleChange = (index: number, role: string) => {
		const newMembers = [...members];
		newMembers[index] = { ...newMembers[index], role };
		onChange(newMembers);
	};

	const canAddMore = members.length < maxInvites;

	return (
		<div>
			<div className="space-y-4">
				{members.map((member, index) => (
					<MemberRow
						key={index}
						member={member}
						index={index}
						roles={roles}
						error={errors[index]}
						canRemove={members.length > 1}
						onEmailChange={handleEmailChange}
						onRoleChange={handleRoleChange}
						onRemove={onRemove}
						disabled={disabled}
					/>
				))}
			</div>

			{canAddMore && (
				<button
					type="button"
					onClick={onAdd}
					className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border py-3 text-sm text-muted-foreground transition-colors hover:border-primary hover:text-primary"
					disabled={disabled}
				>
					<Plus className="h-4 w-4" />
					Add another team member
				</button>
			)}
		</div>
	);
}