"use client";

import { ChevronDown } from "lucide-react";
import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
import {
  SETTINGS_NAV,
  type SettingsGroupId,
  type SettingsLeafId,
  groupForLeaf,
} from "@/components/settings/settings-types";

type SettingsNavProps = {
  activeLeaf: SettingsLeafId;
  expandedGroup: SettingsGroupId;
  onSelectLeaf: (leaf: SettingsLeafId) => void;
  onToggleGroup: (group: SettingsGroupId) => void;
};

export function SettingsNav({
  activeLeaf,
  expandedGroup,
  onSelectLeaf,
  onToggleGroup,
}: SettingsNavProps) {
  const t = useTranslations("settings");

  return (
    <nav
      className="shrink-0 rounded-xl border border-border/80 bg-card p-3 shadow-sm md:w-52 lg:w-56"
      aria-label={t("nav.aria")}
    >
      <ul className="space-y-1.5">
        {SETTINGS_NAV.map((group) => {
          const isExpanded = expandedGroup === group.id;
          const groupActive = groupForLeaf(activeLeaf) === group.id;

          return (
            <li key={group.id}>
              <button
                type="button"
                onClick={() => onToggleGroup(group.id)}
                className={cn(
                  "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-start text-sm font-medium transition",
                  groupActive
                    ? "bg-[#E1F5EE] text-[#0F6E56]"
                    : "text-foreground hover:bg-muted/60"
                )}
              >
                <span className="min-w-0 flex-1 leading-snug">{t(group.labelKey)}</span>
                <ChevronDown
                  className={cn(
                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
                    isExpanded && "rotate-180",
                    groupActive && "text-[#0F6E56]"
                  )}
                  aria-hidden
                />
              </button>
              {isExpanded ? (
                <ul className="me-1 ms-3 mt-1.5 space-y-1 border-s-2 border-[#0F6E56]/25 ps-4">
                  {group.children.map((child) => {
                    const isActive = activeLeaf === child.id;
                    return (
                      <li key={child.id}>
                        <button
                          type="button"
                          onClick={() => onSelectLeaf(child.id)}
                          className={cn(
                            "w-full rounded-lg px-3 py-2 text-start text-[13px] leading-snug transition",
                            isActive
                              ? "bg-[#0F6E56] text-white shadow-sm"
                              : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
                          )}
                        >
                          {t(child.labelKey)}
                        </button>
                      </li>
                    );
                  })}
                </ul>
              ) : null}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}
