"use client";

import { useTranslations } from "next-intl";
import { Link, usePathname } from "@/i18n/navigation";
import { LayoutGrid, Palette } from "lucide-react";

type SettingsHref = "/dashboard/settings" | "/dashboard/settings/branding";

interface SettingsNavItem {
  href: SettingsHref;
  labelKey: "overview" | "branding";
  hintKey: "overviewHint" | "brandingHint";
  icon: React.ReactNode;
}

const SETTINGS_NAV: SettingsNavItem[] = [
  {
    href: "/dashboard/settings",
    labelKey: "overview",
    hintKey: "overviewHint",
    icon: <LayoutGrid className="h-4 w-4 shrink-0" />,
  },
  {
    href: "/dashboard/settings/branding",
    labelKey: "branding",
    hintKey: "brandingHint",
    icon: <Palette className="h-4 w-4 shrink-0" />,
  },
];

function isActivePath(pathname: string, href: SettingsHref) {
  if (href === "/dashboard/settings") return pathname === "/dashboard/settings";
  return pathname.startsWith(href);
}

export default function SettingsSidebar() {
  const t = useTranslations("settings");
  const pathname = usePathname();

  return (
    <>
      {/* Mobile segmented nav */}
      <div className="lg:hidden">
        <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-1">
          <nav className="grid grid-cols-2 gap-1">
            {SETTINGS_NAV.map((item) => {
              const active = isActivePath(pathname, item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
                    active
                      ? "bg-[var(--bg)] text-[var(--text)] shadow-sm ring-1 ring-[var(--border)]"
                      : "text-[var(--text-muted)] hover:text-[var(--text)]"
                  }`}
                >
                  {item.icon}
                  {t(`nav.${item.labelKey}`)}
                </Link>
              );
            })}
          </nav>
        </div>
      </div>

      {/* Desktop sidebar */}
      <aside className="hidden w-[220px] shrink-0 self-stretch border-e border-[var(--border)] lg:block xl:w-[240px]">
        <div className="p-3">
          <p className="px-3 pb-2 pt-1 text-[10px] font-semibold uppercase tracking-widest text-[var(--text-faint)]">
            {t("navTitle")}
          </p>
          <nav className="space-y-1">
            {SETTINGS_NAV.map((item) => {
              const active = isActivePath(pathname, item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`group relative flex cursor-pointer flex-col gap-0.5 rounded-xl px-3 py-2.5 transition-colors ${
                    active
                      ? "bg-[var(--bg)] text-[var(--text)] ring-1 ring-[var(--border)]"
                      : "text-[var(--text-muted)] hover:bg-[var(--bg-hover)]/60 hover:text-[var(--text)]"
                  }`}
                >
                  {active && (
                    <span
                      className="absolute inset-y-2 start-0 w-0.5 rounded-full bg-[var(--accent)]"
                      aria-hidden
                    />
                  )}
                  <span className="flex items-center gap-2.5 text-sm font-medium">
                    <span
                      className={`flex h-7 w-7 items-center justify-center rounded-lg ${
                        active
                          ? "bg-[var(--accent-muted)] text-[var(--accent)]"
                          : "bg-[var(--bg-hover)] text-[var(--text-faint)] group-hover:text-[var(--text-muted)]"
                      }`}
                    >
                      {item.icon}
                    </span>
                    {t(`nav.${item.labelKey}`)}
                  </span>
                  <span className="ps-9 text-[11px] leading-snug text-[var(--text-faint)]">
                    {t(item.hintKey)}
                  </span>
                </Link>
              );
            })}
          </nav>
        </div>
      </aside>
    </>
  );
}