import React from "react";
import {
  PhoneIcon,
  MapPinIcon,
  MoonIcon,
  SunIcon,
  ArrowLeftStartOnRectangleIcon,
  UserIcon,
} from "@heroicons/react/24/outline";
import { Grid } from "../components/Grid/Grid";
import { useDarkMode } from "../hooks/useDarkMode";
import clsx from "clsx";
import { useModalStore } from "../context/zustand-store/appStore";
import { Logout } from "../partials/auth/Logout";
import { useUserProfileStore } from "../context/zustand-store/userStore";
import { getFaProvince } from "../utils/getFaProvince";
import { getFaCityName } from "../utils/getFaCityName";
import userImage from "../assets/images/user.png";

interface ProfileCardProps {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string | null;
  show?: boolean;
}

const ProfileCard = ({
  icon: Icon,
  label,
  value,
  show = true,
}: ProfileCardProps) => {
  if (!show) return null;

  return (
    <Grid
      className={clsx(
        "group relative p-4 transition-all duration-500 hover:-translate-y-1 hover:scale-[1.01]"
      )}
    >
      <Grid className="relative flex items-start gap-4">
        <Grid
          className={clsx(
            "rounded-xl p-3 shadow-lg group-hover:shadow-xl transition-all duration-500 group-hover:scale-110",
            "bg-primary-600"
          )}
        >
          <Icon className="h-5 w-5 text-white" />
        </Grid>
        <Grid className="flex flex-col min-w-0">
          <span className="text-xs text-gray-500 dark:text-white font-semibold uppercase tracking-wider mb-2">
            {label}
          </span>
          <span className="text-primary-600 font-bold text-sm leading-relaxed wrap-break-word">
            {value}
          </span>
        </Grid>
      </Grid>
    </Grid>
  );
};

const UserProfile: React.FC = () => {
  const [isDark, setIsDark] = useDarkMode();
  const { profile } = useUserProfileStore();

  const { openModal } = useModalStore();

  const getUserRole = (permissions: string[] = []): string => {
    if (permissions.includes("admin")) {
      return "بازرس ارشد";
    } else if (permissions.includes("submit")) {
      return "بازرس";
    } else {
      return "ناظر";
    }
  };

  return (
    <Grid className="min-h-screen bg-gray-50 dark:bg-dark-900">
      <div className="relative overflow-hidden bg-linear-to-br from-primary-500 via-primary-600 to-primary-700 dark:from-dark-800 dark:via-dark-700 dark:to-dark-800">
        <Grid className="relative px-6 py-12 md:px-12 md:py-8 items-center">
          <Grid className="mx-auto">
            <Grid className="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
              <Grid className="relative group">
                <Grid className="relative">
                  <Grid className="relative bg-white/80 dark:bg-dark-600 backdrop-blur-xl rounded-full p-4 border border-white/20 shadow-2xl">
                    <img
                      src={userImage}
                      alt="User"
                      className="h-24 w-24 md:h-28 md:w-28 rounded-full object-cover drop-shadow-lg"
                    />
                  </Grid>
                </Grid>
              </Grid>

              <Grid className="flex-1 text-center lg:text-right">
                <Grid className="space-y-4">
                  <h1 className="text-3xl md:text-4xl font-bold text-white dark:text-dark-100 bg-clip-text drop-shadow-sm">
                    {profile?.fullname || "کاربر"}
                  </h1>

                  <Grid container className="w-auto gap-2 justify-start">
                    {profile?.permissions && profile.permissions.length > 0 && (
                      <Grid className="inline-flex items-center gap-2 bg-white dark:bg-dark-600 backdrop-blur-sm rounded-xl py-3 px-6 border border-primary-200/30">
                        <span className="text-gray-600 dark:text-dark-100 font-semibold text-sm">
                          {getUserRole(profile.permissions)}
                        </span>
                      </Grid>
                    )}
                    {profile?.province && (
                      <Grid className="inline-flex items-center gap-2 bg-white dark:bg-dark-600 backdrop-blur-sm rounded-xl py-2 px-4 border border-emerald-200/30">
                        <span className="text-gray-600 dark:text-dark-100 font-semibold text-sm">
                          استان: {getFaProvince(profile.province)}
                        </span>
                      </Grid>
                    )}
                  </Grid>
                </Grid>
              </Grid>

              <Grid className="flex flex-col justify-center items-end gap-4">
                <button
                  onClick={() => setIsDark(!isDark)}
                  className={clsx(
                    "group relative flex items-center gap-3 rounded-2xl transition-all duration-500 cursor-pointer"
                  )}
                >
                  <Grid
                    className={clsx(
                      "rounded-xl transition-all duration-500 group-hover:scale-110 bg-transparent"
                    )}
                  >
                    {isDark ? (
                      <SunIcon className="w-5 h-5 text-white dark:text-dark-100" />
                    ) : (
                      <MoonIcon className="w-5 h-5 text-white dark:text-dark-100" />
                    )}
                  </Grid>
                  <span className="text-white dark:text-dark-100 font-semibold text-sm">
                    {isDark ? "حالت روشن" : "حالت تاریک"}
                  </span>
                </button>

                <button
                  onClick={() => {
                    openModal({
                      title: "از سامانه خارج میشوید؟",
                      content: <Logout />,
                    });
                  }}
                  className={clsx(
                    "group relative flex items-center gap-3 rounded-2xl transition-all duration-500 cursor-pointer"
                  )}
                >
                  <Grid
                    className={clsx(
                      "rounded-xl transition-all duration-500 group-hover:scale-110 bg-transparent"
                    )}
                  >
                    <ArrowLeftStartOnRectangleIcon className="h-5 w-5 text-white" />
                  </Grid>
                  <span className="text-white font-semibold text-sm">
                    خروج از سامانه
                  </span>
                </button>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>

      <Grid className="pb-8 mt-4">
        <Grid className="max-w-full mx-auto bg-white dark:bg-gray-900 p-4 rounded-2xl">
          <Grid className="flex items-center gap-2">
            <span className="text-sm font-bold text-gray-600 bg-[#FFF2E5] p-2 rounded-xl">
              اطلاعات کاربری
            </span>
            <div className="flex-1 border-t-2 border-dotted border-primary-800"></div>
          </Grid>
          <Grid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 gap-6 mt-2">
            <ProfileCard
              icon={UserIcon}
              label="نام کامل"
              value={profile?.fullname || "بدون نام"}
            />

            <ProfileCard
              icon={PhoneIcon}
              label="شماره موبایل"
              value={profile?.mobile || "بدون شماره موبایل"}
            />

            <ProfileCard
              icon={MapPinIcon}
              label="موقعیت"
              value={
                profile?.province
                  ? `${getFaProvince(profile.province)}${
                      profile?.city ? `، ${getFaCityName(profile.city)}` : ""
                    }`
                  : "نامشخص"
              }
            />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default UserProfile;
