'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { motion } from 'framer-motion';
import { Key, Shield } from 'lucide-react';

import FormProvider from '@/components/forms/FormProvider';

import { Separator } from '@/components/ui/separator';
import PrimaryButton from '@/components/button/PrimaryButton';
import RHFPasswordField from '@/components/forms/RHFPasswordField';
import useFormSubmitHandler from '@/hooks/formHandler';
import { useUpdatePasswordMutation } from '@/store/slice/authApi';
import {
	UpdatePasswordInput,
	UpdatePasswordSchema,
} from '@/lib/modules/auth/auth.validation';

const fadeInUp = {
	initial: { opacity: 0, y: 20 },
	animate: { opacity: 1, y: 0 },
	transition: { duration: 0.4, ease: 'easeOut' },
};

export default function SecuritySettings() {
	const [updatePassword] = useUpdatePasswordMutation();

	const methods = useForm<UpdatePasswordInput>({
		resolver: zodResolver(UpdatePasswordSchema),
	});

	const onSubmit = useFormSubmitHandler(
		updatePassword,
		() => {},
		'password updated sucessfult'
	);

	return (
		<FormProvider methods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
			<motion.div
				variants={fadeInUp}
				initial="initial"
				animate="animate"
				className="space-y-6"
			>
				{/* Change Password Section */}
				<div className="bg-[#1A1612] border border-[#3A332C] rounded-xl p-6 space-y-4">
					<div className="flex items-center gap-3">
						<div className="p-2 bg-[#CBB26A]/10 rounded-lg">
							<Key className="w-5 h-5 text-[#CBB26A]" />
						</div>
						<h2 className="text-xl font-serif font-semibold text-[#EDEBE6]">
							Change Password
						</h2>
					</div>

					<Separator className="bg-[#3A332C]" />

					<div className="space-y-4">
						<RHFPasswordField
							name="currentPassword"
							label="Current Password"
							type="password"
							placeholder="Enter current password"
							isRequired
						/>

						<RHFPasswordField
							name="newPassword"
							label="New Password"
							type="password"
							placeholder="Enter new password"
							isRequired
						/>

						<RHFPasswordField
							name="confirmPassword"
							type="password"
							label="Confirm New Password"
							isRequired
							placeholder="Confirm new password"
						/>
					</div>
					<PrimaryButton title="update password" type="submit" />
				</div>

				{/* Session Management */}
				<div className="bg-[#1A1612] border border-[#3A332C] rounded-xl p-6 space-y-4">
					<div className="flex items-center gap-3">
						<div className="p-2 bg-[#CBB26A]/10 rounded-lg">
							<Shield className="w-5 h-5 text-[#CBB26A]" />
						</div>
						<h2 className="text-xl font-serif font-semibold text-[#EDEBE6]">
							Active Sessions
						</h2>
					</div>

					<Separator className="bg-[#3A332C]" />

					{/* {profile?.sessions && profile.sessions.length > 0 ? (
							<div className="space-y-3">
								{profile.sessions.slice(0, 3).map((session) => (
									<div
										key={session.id}
										className="flex items-center justify-between p-3 bg-[#14110E] border border-[#3A332C] rounded-lg"
									>
										<div>
											<p className="text-sm text-[#EDEBE6]">
												{session.device || 'Unknown device'}
											</p>
											<p className="text-xs text-[#B8B2A8]">
												Last active:{' '}
												{new Date(
													session.lastActive
												).toLocaleString()}
											</p>
										</div>
										<div className="w-2 h-2 bg-green-500 rounded-full" />
									</div>
								))}
							</div>
						) : (
							<p className="text-sm text-[#B8B2A8]">
								No active sessions found
							</p>
						)} */}
				</div>
			</motion.div>
		</FormProvider>
	);
}