import { useEffect } from "react";
import {
	Container,
	Typography,
	CircularProgress,
	Card,
	CardContent,
	Grid,
	Avatar,
	Box,
	Stack,
	Divider,
	Link,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";

const ProfilePage = () => {
	const dispatch = useDispatch<AppDispatch>();
	const { user, isLoading } = useSelector(
		(state: RootState) => state?.profileReducer
	);

	useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);

	if (isLoading) {
		return (
			<Box
				sx={{
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					height: "100vh",
				}}
			>
				<CircularProgress />
			</Box>
		);
	}

	return (
		<Container sx={{ py: 4 }}>
			<Typography variant="h4" gutterBottom>
				Account Info
			</Typography>
			<Card sx={{ maxWidth: "100%", margin: "0 auto" }}>
				<CardContent>
					<Stack direction="column" spacing={2}>
						<Stack
							direction="row"
							spacing={1.5}
							alignItems="center"
						>
							<Avatar
								alt="User Avatar"
								src="/avatar.png"
								sx={{ width: 36, height: 36 }}
							/>
							<Box>
								<Typography
									variant="body1"
									sx={{ color: "#202020" }}
								>
									{user?.name || "No Admin"}
								</Typography>
								<Typography
									variant="body2"
									color="text.secondary"
								>
									{user?.userType || "N/A"}
								</Typography>
							</Box>
						</Stack>
						<Divider
							flexItem
							sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
						/>

						<Stack
							direction="row"
							justifyContent="space-between"
							alignItems="center"
						>
							<Typography
								variant="body1"
								sx={{ color: "#202020" }}
							>
								Personal Information
							</Typography>
							<Link href="/edit-profile" underline="hover">
								Edit
							</Link>
						</Stack>

						<Grid container >
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body1"
									sx={{ color: "#202020" }}
								>
									Name:
								</Typography>
								<Typography
									variant="body2"
									color="text.secondary"
								>
									{user?.name || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body1"
									sx={{ color: "#202020" }}
								>
									Phone:
								</Typography>
								<Typography
									variant="body2"
									color="text.secondary"
								>
									{user?.phone || "N/A"}
								</Typography>
							</Grid>
							<Grid item xs={12} sm={4}>
								<Typography
									variant="body1"
									sx={{ color: "#202020" }}
								>
									Email:
								</Typography>
								<Typography
									variant="body2"
									color="text.secondary"
								>
									{user?.email || "N/A"}
								</Typography>
							</Grid>
						</Grid>


						<Typography variant="body1" sx={{ color: "#202020" }}>
							Bio:
						</Typography>
						<Typography variant="body2" color="text.secondary">
							{user?.bio || "No bio available."}
						</Typography>
					</Stack>
				</CardContent>
			</Card>
		</Container>
	);
};

export default ProfilePage;
