"use client";
import LocalePath from "@/shared/LocalePath";
import LogoutButton from "./LogoutButton";
import UseSession from "@/hooks/UseSession";
import MediaWithFallback from "@/shared/MediaWithFallback";
import Logo from "@/public/logo.png";
import { useTranslations } from "next-intl";

type Props = {};

export default function ProfilePages({}: Props) {
  const t = useTranslations();
  const session = UseSession();
  return (
    <div className="container max-w-4xl py-12">
      <div className="border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-8 mb-6">
        <div className="flex items-center gap-6">
          <div className="w-20 h-20 bg-gradient-to-br from-primary to-primary-dark rounded-full flex items-center justify-center text-white text-3xl">
            <MediaWithFallback
              src={session?.image || Logo}
              alt={session?.name || ""}
              width={80}
              height={80}
              className="w-20 h-20 rounded-full object-cover"
            />
          </div>
          <div className="flex-1">
            <h2 className="text-2xl mb-1">{session?.name}</h2>
            <p className="text-text-secondary">{session?.email}</p>
            <p className="text-text-secondary text-start w-fit" dir="ltr">
              +{session?.phone}
            </p>
          </div>
        </div>
      </div>
      <div className="space-y-3">
        <LocalePath
          href="/profile/personal-account"
          className="w-full border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-4 flex items-center gap-4 hover:shadow-md transition-all duration-300 group"
        >
          <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-primary/20">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-user *:stroke-primary"
            >
              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
              <circle cx="12" cy="7" r="4"></circle>
            </svg>
          </div>
          <span className="flex-1 text-end font-normal text-sm">
            {t("NAV.profile")}
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right text-text-secondary group-hover:translate-x-1 transition-transform"
            style={{ transform: "rotate(180deg)" }}
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </LocalePath>
        <LocalePath
          href="/profile/orders"
          className="w-full border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-4 flex items-center gap-4 hover:shadow-md transition-all duration-300 group"
        >
          <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-info/10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-package *:stroke-info"
            >
              <path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path>
              <path d="M12 22V12"></path>
              <polyline points="3.29 7 12 12 20.71 7"></polyline>
              <path d="m7.5 4.27 9 5.15"></path>
            </svg>
          </div>
          <span className="flex-1 text-end font-normal text-sm">
            {t("NAV.orders")}
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right text-text-secondary group-hover:translate-x-1 transition-transform"
            style={{ transform: "rotate(180deg)" }}
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </LocalePath>
        <LocalePath
          href="/profile/subscriptions"
          className="w-full border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-4 flex items-center gap-4 hover:shadow-md transition-all duration-300 group"
        >
          <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-success/10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-package *:stroke-success"
            >
              <path d="M8 2v4"></path>
              <path d="M16 2v4"></path>
              <rect width="18" height="18" x="3" y="4" rx="2"></rect>
              <path d="M3 10h18"></path>
            </svg>
          </div>
          <span className="flex-1 text-end font-normal text-sm">
            {t("NAV.subscriptions")}
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right text-text-secondary group-hover:translate-x-1 transition-transform"
            style={{ transform: "rotate(180deg)" }}
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </LocalePath>
        <LocalePath
          href="/profile/notifications"
          className="w-full border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-4 flex items-center gap-4 hover:shadow-md transition-all duration-300 group"
        >
          <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-warning/10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-bell *:stroke-warning"
            >
              <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
              <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
            </svg>
          </div>
          <span className="flex-1 text-end font-normal text-sm">
            {t("NAV.notifications")}
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right text-text-secondary group-hover:translate-x-1 transition-transform"
            style={{ transform: "rotate(180deg)" }}
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </LocalePath>
        <LocalePath
          href="/profile/settings"
          className="w-full border border-gray-200 rounded-2xl shadow-md shadow-black/10 bg-white p-4 flex items-center gap-4 hover:shadow-md transition-all duration-300 group"
        >
          <div className="w-12 h-12 rounded-lg flex items-center justify-center bg-secondary/10">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-settings *:stroke-secondary"
            >
              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
          </div>
          <span className="flex-1 text-end font-normal text-sm">
            {t("NAV.settings")}
          </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-chevron-right text-text-secondary group-hover:translate-x-1 transition-transform"
            style={{ transform: "rotate(180deg)" }}
          >
            <path d="m9 18 6-6-6-6"></path>
          </svg>
        </LocalePath>
        <LogoutButton />
      </div>
    </div>
  );
}