"use client";

import Link from "next/link";

const TABS = [
  {
    id: "school",
    label: "مدرسه",
    href: "/dashboard",
    icon: "M12 3 1 9l4 2.18V17c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-5.82L23 9 12 3zm6 12H6v-4.73l6-3.27 6 3.27V15z",
  },
  {
    id: "chats",
    label: "گفت و گو",
    href: "/social",
    icon: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
  },
  {
    id: "ai",
    label: "هوش مصنوعی",
    href: "/ai",
    icon: "M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
    soon: true,
  },
] as const;

function TabIcon({ icon, mobile, active }: { icon: string; mobile?: boolean; active: boolean }) {
  const svg = (
    <svg viewBox="0 0 24 24" className={mobile ? "h-5 w-5" : "h-6 w-6"} fill="currentColor" aria-hidden>
      <path d={icon} />
    </svg>
  );

  if (mobile) {
    return (
      <span
        className={`flex h-8 w-8 items-center justify-center rounded-full ${
          active ? "bg-teal-600 text-white" : ""
        }`}
      >
        {svg}
      </span>
    );
  }

  return svg;
}

function TabButtons({
  active,
  mobile,
}: {
  active: string;
  mobile?: boolean;
}) {
  return (
    <>
      {TABS.map((tab) => {
        const isActive = active === tab.id;
        const soon = "soon" in tab && tab.soon;
        const className = mobile
          ? `flex flex-1 flex-col items-center gap-0.5 py-2 text-[10px] font-medium ${
              isActive ? "text-teal-600" : "text-slate-400"
            } ${soon ? "opacity-45" : ""}`
          : `flex w-16 flex-col items-center gap-1 rounded-xl px-1 py-2 text-[10px] font-medium transition ${
              isActive ? "bg-teal-50 text-teal-700" : "text-slate-500 hover:bg-slate-50"
            } ${soon ? "opacity-50" : ""}`;

        if (soon) {
          return (
            <button
              key={tab.id}
              type="button"
              title="به‌زودی"
              disabled
              className={className}
            >
              <TabIcon icon={tab.icon} mobile={mobile} active={isActive} />
              {tab.label}
            </button>
          );
        }

        return (
          <Link
            key={tab.id}
            href={tab.href}
            title={tab.label}
            className={className}
            aria-current={isActive ? "page" : undefined}
          >
            <TabIcon icon={tab.icon} mobile={mobile} active={isActive} />
            {tab.label}
          </Link>
        );
      })}
    </>
  );
}

export function SocialNavRail({
  active = "chats",
  className = "",
  hideMobile = false,
  mode = "both",
}: {
  active?: "school" | "chats" | "ai" | string;
  className?: string;
  hideMobile?: boolean;
  mode?: "desktop" | "mobile" | "both";
}) {
  const showDesktop = mode === "desktop" || mode === "both";
  const showMobile = (mode === "mobile" || mode === "both") && !hideMobile;

  return (
    <>
      {showDesktop ? (
        <nav
          className={`hidden w-[76px] shrink-0 flex-col items-center gap-1 border-l border-slate-200 bg-white py-4 lg:flex lg:order-first ${className}`}
          aria-label="ناوبری اصلی"
        >
          <TabButtons active={active} />
        </nav>
      ) : null}

      {showMobile ? (
        <nav
          className={`flex shrink-0 border-t border-slate-200 bg-white pb-[env(safe-area-inset-bottom)] lg:hidden ${className}`}
          aria-label="ناوبری اصلی"
        >
          <TabButtons active={active} mobile />
        </nav>
      ) : null}
    </>
  );
}