// app/admin/profile/page.tsx
'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { User, Shield } from 'lucide-react';
import ProfileInfo from './ProfileUpdate';
import SecuritySettings from './SecuritySettings';

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

export default function Settings() {
	const [activeTab, setActiveTab] = useState<'profile' | 'security'>(
		'profile'
	);

	return (
		<div className="min-h-screen bg-background p-4 md:p-6 lg:p-8">
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				className="max-w-4xl mx-auto space-y-6"
			>
				{/* Header */}
				<motion.div
					variants={fadeInUp}
					initial="initial"
					animate="animate"
					className="flex items-center justify-between"
				>
					<div>
						<h1 className="text-3xl md:text-4xl font-serif font-bold text-[#EDEBE6]">
							Admin Profile
						</h1>
						<p className="mt-4 text-sm text-[#A89A72] max-w-xl leading-relaxed">
							Manage your personal information and security settings
						</p>
					</div>
				</motion.div>

				{/* Luxury decorative line */}
				<motion.div variants={fadeInUp} className="luxury-line w-full" />

				{/* Tabs */}
				<motion.div
					variants={fadeInUp}
					className="flex gap-2 border-b border-[#3A332C] pb-4"
				>
					<button
						type="button"
						onClick={() => setActiveTab('profile')}
						className={`relative px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2 ${
							activeTab === 'profile'
								? 'text-[#CBB26A]'
								: 'text-[#B8B2A8] hover:text-[#EDEBE6]'
						}`}
					>
						<User className="w-4 h-4" />
						Profile Information
						{activeTab === 'profile' && (
							<motion.div
								layoutId="activeTab"
								className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#CBB26A]"
							/>
						)}
					</button>
					<button
						type="button"
						onClick={() => setActiveTab('security')}
						className={`relative px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2 ${
							activeTab === 'security'
								? 'text-[#CBB26A]'
								: 'text-[#B8B2A8] hover:text-[#EDEBE6]'
						}`}
					>
						<Shield className="w-4 h-4" />
						Security
						{activeTab === 'security' && (
							<motion.div
								layoutId="activeTab"
								className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#CBB26A]"
							/>
						)}
					</button>
				</motion.div>

				{/* Content */}
				<AnimatePresence mode="wait">
					{activeTab === 'profile' ? (
						<motion.div
							key="profile"
							initial={{ opacity: 0, x: -20 }}
							animate={{ opacity: 1, x: 0 }}
							exit={{ opacity: 0, x: 20 }}
							transition={{ duration: 0.3 }}
						>
							<ProfileInfo />
						</motion.div>
					) : (
						<motion.div
							key="security"
							initial={{ opacity: 0, x: 20 }}
							animate={{ opacity: 1, x: 0 }}
							exit={{ opacity: 0, x: -20 }}
							transition={{ duration: 0.3 }}
						>
							<SecuritySettings />
						</motion.div>
					)}
				</AnimatePresence>
			</motion.div>
		</div>
	);
}