"use client";

import DashboardBanner from "@/components/dashboard/DashboardBanner";
import DashboardHeader from "@/components/dashboard/DashboardHeader";
import DashTileGrid, {
  DashTileItem,
} from "@/components/dashboard/DashTileGrid";
import { useAuth } from "@/lib/auth";

function canAccessAdmin(role: string | undefined) {
  return role === "STORE_ADMIN" || role === "SUPER_ADMIN";
}

export default function CustomerHomePage() {
  const { user } = useAuth();
  const showAdmin = canAccessAdmin(user?.role);

  const tiles: DashTileItem[] = [
    {
      href: "/account/orders",
      title: "سفارش‌های من",
      titleEn: "My Orders",
      description: "پیگیری وضعیت و جزئیات خرید",
      icon: <OrdersIcon />,
    },
    {
      href: "/account/profile",
      title: "پروفایل من",
      titleEn: "My Profile",
      description: "اطلاعات حساب و آدرس‌ها",
      icon: <ProfileIcon />,
    },
    {
      href: "/account/partners",
      title: "شروع همکاری",
      titleEn: "Partnership",
      description: "درخواست همکاری به‌عنوان تولیدکننده",
      icon: <PartnersIcon />,
    },
    ...(showAdmin
      ? [
          {
            href: "/",
            title: "پنل مدیریت",
            titleEn: "Admin",
            description: "مدیریت فروشگاه و محصولات",
            icon: <AdminIcon />,
          } satisfies DashTileItem,
        ]
      : []),
  ];

  const bannerDelay = 80 + tiles.length * 70;

  return (
    <div className="mana-canvas relative flex min-h-dvh flex-col">
      <DashboardHeader />

      <main className="relative z-10 mx-auto flex w-full max-w-6xl flex-1 flex-col px-3 pt-10 pb-6 sm:px-5 sm:pt-12 sm:pb-8 lg:px-6">
        <div className="mb-3 dash-enter" style={{ animationDelay: "0ms" }}>
          <h1
            dir="ltr"
            className="flex flex-wrap items-baseline justify-end gap-x-2.5 gap-y-1 text-2xl font-medium text-ink sm:text-4xl"
          >
            <span className="font-display text-base tracking-[0.06em] text-muted sm:text-xl">
              Account
            </span>
            <span aria-hidden className="text-sm text-muted/60 sm:text-base">
              •
            </span>
            <span dir="rtl" className="font-doran">
              حساب کاربری
            </span>
          </h1>
          <p className="mt-3 max-w-xl text-sm leading-7 text-muted sm:text-base">
            سفارش‌ها و اطلاعات حساب خود را از اینجا مدیریت کنید
            {showAdmin ? "؛ در صورت دسترسی می‌توانید به پنل مدیریت بروید" : ""}
            .
          </p>
        </div>

        <DashTileGrid tiles={tiles} />

        <DashboardBanner
          src="/images/image4.jpg"
          alt="نمای کالکشن مانا"
          caption="Quiet elegance."
          priority
          style={{ animationDelay: `${bannerDelay}ms` }}
        />
      </main>
    </div>
  );
}

function iconProps() {
  return {
    width: 56,
    height: 56,
    viewBox: "0 0 24 24",
    fill: "none",
    "aria-hidden": true as const,
  };
}

function OrdersIcon() {
  return (
    <svg {...iconProps()}>
      <path
        d="M6 7h12l-.8 11.2a1 1 0 0 1-1 .8H7.8a1 1 0 0 1-1-.8L6 7Z"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinejoin="round"
      />
      <path
        d="M9 7a3 3 0 0 1 6 0"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinecap="round"
      />
    </svg>
  );
}

function ProfileIcon() {
  return (
    <svg {...iconProps()}>
      <circle cx="12" cy="8" r="3" stroke="currentColor" strokeWidth="0.85" />
      <path
        d="M5 19c1.5-3.2 3.8-4.8 7-4.8s5.5 1.6 7 4.8"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinecap="round"
      />
    </svg>
  );
}

function PartnersIcon() {
  return (
    <svg {...iconProps()}>
      <path
        d="M8 12h8M12 8v8"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinecap="round"
      />
      <path
        d="M7 5.5h10a1.5 1.5 0 0 1 1.5 1.5v10a1.5 1.5 0 0 1-1.5 1.5H7A1.5 1.5 0 0 1 5.5 17V7A1.5 1.5 0 0 1 7 5.5Z"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function AdminIcon() {
  return (
    <svg {...iconProps()}>
      <path
        d="M4.5 10.5 12 4.5l7.5 6V19a1 1 0 0 1-1 1h-4.5v-5h-5v5H5.5a1 1 0 0 1-1-1v-8.5Z"
        stroke="currentColor"
        strokeWidth="0.85"
        strokeLinejoin="round"
      />
    </svg>
  );
}