import {
  PhoneIcon,
  MapPinIcon,
  MoonIcon,
  SunIcon,
  ArrowLeftStartOnRectangleIcon,
  IdentificationIcon,
  CalendarIcon,
  HomeIcon,
  UserIcon,
  BuildingOfficeIcon,
  BookOpenIcon,
  InformationCircleIcon,
} 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 { formatJustDate } from "../utils/formatTime";
import bg from "../assets/images/profile-bg.png";
import bgdark from "../assets/images/profile-bg-dark.png";
import { useNavigate } from "@tanstack/react-router";
import { TRAINING } from "../routes/paths";
import { useFetchProfile } from "../hooks/useFetchProfile";
import { useEffect } from "react";
import versionRaw from "../version.txt?raw";

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

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 break-words">
            {value}
          </span>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default function UserProfile() {
  const [isDark, setIsDark] = useDarkMode();
  const navigate = useNavigate();
  const { profile } = useUserProfileStore();
  const { getProfile } = useFetchProfile();

  useEffect(() => {
    getProfile();
  }, []);

  const { openModal } = useModalStore();
  const version = versionRaw.trim();

  return (
    <Grid className="min-h-screen bg-gray-50 dark:bg-dark-900">
      <div
        className="relative overflow-hidden bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url(${isDark ? bgdark : bg})` }}
      >
        <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">
                    <UserIcon className="h-24 w-24 md:h-28 md:w-28 text-gray-600  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-gray-600 dark:text-dark-100 bg-clip-text drop-shadow-sm">
                    {profile?.user?.first_name} {profile?.user?.last_name}
                  </h1>

                  <Grid container className="w-auto gap-2 justify-start">
                    <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">
                        {profile?.role?.role_name}
                      </span>
                    </Grid>
                    {profile?.organization?.name && (
                      <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">
                          سازمان: {profile?.organization?.name}
                        </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-gray-600 dark:text-dark-100" />
                    ) : (
                      <MoonIcon className="w-5 h-5 text-gray-600 dark:text-dark-100" />
                    )}
                  </Grid>
                  <span className="text-gray-700 dark:text-dark-100 font-semibold text-sm">
                    {isDark ? "حالت روشن" : "حالت تاریک"}
                  </span>
                </button>

                <button
                  onClick={() => {
                    const path = TRAINING;
                    navigate({ to: path });
                  }}
                  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"
                    )}
                  >
                    <BookOpenIcon className="h-5 w-5 text-green-500" />
                  </Grid>
                  <span className="text-green-600 font-semibold text-sm">
                    آموزش
                  </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-red-700" />
                  </Grid>
                  <span className="text-red-700 font-semibold text-sm">
                    خروج از سامانه
                  </span>
                </button>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>

      <Grid className="pb-8 mt-4">
        <Grid className="max-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?.user?.username || "بدون نام کاربری"}
            />

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

            <ProfileCard
              icon={MapPinIcon}
              label="موقعیت"
              value={`${profile?.organization?.province?.name || ""}، ${
                profile?.organization?.city?.name || ""
              }`}
            />

            <ProfileCard
              icon={IdentificationIcon}
              label="کد ملی"
              value={profile?.user?.national_code || "بدون کد ملی"}
              show={!!profile?.user?.national_code}
            />

            <ProfileCard
              icon={CalendarIcon}
              label="تاریخ تولد"
              value={
                profile?.user?.birthdate
                  ? formatJustDate(profile.user.birthdate)
                  : "بدون تاریخ تولد"
              }
              show={!!profile?.user?.birthdate}
            />

            <ProfileCard
              icon={HomeIcon}
              label="آدرس"
              value={profile?.user?.address || "بدون آدرس"}
            />

            <ProfileCard
              icon={BuildingOfficeIcon}
              label="نوع کاربر"
              value={profile?.user?.ownership === "L" ? "حقوقی" : "حقیقی"}
            />

            <ProfileCard
              icon={BuildingOfficeIcon}
              label="نام واحد"
              value={profile?.user?.unit_name || "بدون نام واحد"}
              show={profile?.user?.ownership === "L"}
            />

            <ProfileCard
              icon={IdentificationIcon}
              label="شناسه ملی واحد"
              value={profile?.user?.unit_national_id || "بدون شناسه ملی واحد"}
              show={profile?.user?.ownership === "L"}
            />
          </Grid>
          {version && (
            <Grid className="mt-6 flex justify-end">
              <Grid className="inline-flex items-center gap-1 bg-white dark:bg-dark-600 backdrop-blur-sm rounded-lg py-1 px-3 border border-sky-200/40">
                <InformationCircleIcon className="h-3 w-3 text-sky-600" />
                <span className="text-sky-600 dark:text-dark-100 font-semibold text-xs">
                  نسخه {version}
                </span>
              </Grid>
            </Grid>
          )}
        </Grid>
      </Grid>
    </Grid>
  );
}
