import { useFormContext } from "react-hook-form";
import { motion } from "framer-motion";
import {
	PencilSquareIcon,
	CheckIcon,
	XMarkIcon,
} from "@heroicons/react/24/outline";
import React, { useState } from "react";

export interface FormSignatureProps
	extends Omit<
		React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
		"type"
	> {
	name: string;
	label?: string;
	type?:
	| "text"
	| "textarea"
	| "password"
	| "email"
	| "number"
	| "tel"
	| "url"
	| "search"
	| "date"
	| "time"
	| "datetime-local";
	viewMode?: boolean;
	width?: string; // 新添加的属性
}

export function FormSignature({
	name,
	label,
	type = "text",
	className,
	viewMode = true,
	placeholder = "添加您的个性签名...",
	maxLength = 50,
	width,
	...restProps
}: FormSignatureProps) {
	const [isEditing, setIsEditing] = useState(!viewMode);
	const {
		register,
		formState: { errors },
		watch,
		setValue,
		trigger,
	} = useFormContext();

	const value = watch(name);
	const error = errors[name]?.message as string;

	const handleBlur = async () => {
		await trigger(name);
		if (viewMode) {
			setIsEditing(false);
		}
	};

	const inputClasses = `
    w-full h-8 px-3 text-sm bg-gray-50 
    rounded-md border border-gray-200
    focus:outline-none focus:ring-2 focus:ring-[#00308F]/20 
    focus:border-[#00308F] transition-all duration-200
    ${className || ""}
  `;

	return (
		<motion.div
			initial={{ opacity: 0, y: 10 }}
			animate={{ opacity: 1, y: 0 }}
			transition={{ duration: 0.3 }}
			className="flex items-center gap-3">
			{
				<div className="flex items-center gap-2 text-gray-700">
					<PencilSquareIcon className="w-5 h-5 text-[#00308F]" />
					{label && (
						<span className="text-sm font-medium">{label}</span>
					)}
				</div>
			}

			<div className={`relative ${width || "w-64"}`}>
				{viewMode && !isEditing ? (
					<motion.div
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						onClick={() => setIsEditing(true)}
						className="group flex items-center h-8 px-3 cursor-pointer 
              rounded-md border border-transparent hover:border-gray-200
              transition-all duration-200">
						{value ? (
							<span className="text-sm text-gray-700">
								{value}
							</span>
						) : (
							<span className="text-sm text-tertiary-300">
								{placeholder}
							</span>
						)}
						<motion.div
							initial={{ opacity: 0 }}
							whileHover={{ opacity: 1 }}
							className="ml-2 text-tertiary-300">
							<PencilSquareIcon className="w-4 h-4" />
						</motion.div>
					</motion.div>
				) : (
					<div className="relative">
						<input
							{...register(name)}
							type={type}
							className={inputClasses}
							placeholder={placeholder}
							maxLength={maxLength}
							onBlur={handleBlur}
							autoFocus={viewMode}
							{...restProps}
						/>
						<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
							{value && (
								<motion.button
									initial={{ opacity: 0, scale: 0.8 }}
									animate={{ opacity: 1, scale: 1 }}
									type="button"
									onClick={() => setValue(name, "")}
									className="p-1 rounded-full hover:bg-gray-200 text-tertiary-300 
                    hover:text-gray-600 transition-colors">
									<XMarkIcon className="w-4 h-4" />
								</motion.button>
							)}
							{value && !error && (
								<motion.div
									initial={{ opacity: 0 }}
									animate={{ opacity: 1 }}
									className="text-green-500">
									<CheckIcon className="w-4 h-4" />
								</motion.div>
							)}
						</div>
					</div>
				)}
			</div>

			{error && (
				<motion.span
					initial={{ opacity: 0 }}
					animate={{ opacity: 1 }}
					className="text-xs text-red-500">
					{error}
				</motion.span>
			)}
		</motion.div>
	);
}
