// components/admin/profile/ProfileInfo.tsx
'use client';

import { useState } from 'react';

import { motion, AnimatePresence } from 'framer-motion';
import { User, Phone, Mail, Edit2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { useProfileQuery } from '@/store/slice/authApi';
import EditProfile from './EditProfile';

export default function ProfileInfo() {
	const [isEditing, setIsEditing] = useState(false);
	const { data: profile } = useProfileQuery();

	const handleCancel = () => {
		setIsEditing(false);
	};

	return (
		<div className="bg-[#1A1612] rounded-xl border border-[#3A332C] p-6">
			{!isEditing && (
				<AnimatePresence mode="wait">
					<motion.div
						key={isEditing ? 'edit' : 'view'}
						initial={{ opacity: 0, y: 10 }}
						animate={{ opacity: 1, y: 0 }}
						exit={{ opacity: 0, y: -10 }}
						transition={{ duration: 0.2 }}
					>
						<div className="space-y-6">
							{/* Profile Header with Image */}
							<div className="flex items-center gap-6">
								<div className="relative">
									<div className="w-24 h-24 rounded-full bg-linear-to-br from-[#CBB26A]/20 to-[#B89E55]/10 border-2 border-[#CBB26A]/30 overflow-hidden">
										{profile?.profileImage ? (
											<img
												src={profile.profileImage}
												alt={profile.fullName}
												className="w-full h-full object-cover"
											/>
										) : (
											<div className="w-full h-full flex items-center justify-center bg-[#1A1612]">
												<User className="w-10 h-10 text-[#CBB26A]/40" />
											</div>
										)}
									</div>
								</div>

								<div className="flex-1">
									<h2 className="text-2xl font-semibold text-[#EDEBE6]">
										{profile?.fullName}
									</h2>
									<p className="text-[#B8B2A8] flex items-center gap-2 mt-1">
										<Mail className="w-4 h-4" />
										{profile?.email}
									</p>
									{profile?.phone && (
										<p className="text-[#B8B2A8] flex items-center gap-2 mt-1">
											<Phone className="w-4 h-4" />
											{profile.phone}
										</p>
									)}
								</div>

								<Button
									onClick={() => setIsEditing(true)}
									className="
						px-4 py-2
						bg-[#CBB26A] hover:bg-[#B89E55]
						text-[#0A0907] font-medium
						rounded-lg
						flex items-center gap-2
					"
								>
									<Edit2 className="w-4 h-4" />
									Edit Profile
								</Button>
							</div>

							{/* Account Info Cards */}
							<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
								<div className="p-4 bg-[#1A1612] rounded-lg border border-[#3A332C]">
									<p className="text-xs text-[#B8B2A8] mb-1">
										Admin ID
									</p>
									<p className="text-sm font-mono text-[#EDEBE6]">
										{profile?.id?.slice(0, 8)}...
									</p>
								</div>
								<div className="p-4 bg-[#1A1612] rounded-lg border border-[#3A332C]">
									<p className="text-xs text-[#B8B2A8] mb-1">
										Member Since
									</p>
									<p className="text-sm text-[#EDEBE6]">
										{profile?.createdAt
											? new Date(
													profile.createdAt
												).toLocaleDateString('en-US', {
													month: 'short',
													day: 'numeric',
													year: 'numeric',
												})
											: 'N/A'}
									</p>
								</div>
							</div>
						</div>
					</motion.div>
				</AnimatePresence>
			)}
			{isEditing && (
				<EditProfile profile={profile} handleCancel={handleCancel} />
			)}
		</div>
	);
}