"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useLocale, useTranslations } from "next-intl"
import { LayoutDashboard, FolderKanban, MessageSquareText, Settings, Sparkles } from "lucide-react"

function cx(...c: Array<string | false | null | undefined>) {
  return c.filter(Boolean).join(" ")
}

function NavItem({
  href,
  label,
  icon: Icon,
  active,
}: {
  href: string
  label: string
  icon: any
  active: boolean
}) {
  return (
    <Link
      href={href}
      className={cx(
        "flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition",
        active
          ? "bg-emerald-600 text-white"
          : "text-neutral-700 hover:bg-neutral-50"
      )}
    >
      <Icon className={cx("h-4 w-4", active ? "text-white" : "text-neutral-500")} />
      <span className="truncate">{label}</span>
    </Link>
  )
}

export function ClientSidebar() {
  const t = useTranslations("clientPortal")
  const locale = useLocale()
  const pathname = usePathname()

  const base = `/${locale}/client`

  const items = [
    { href: `${base}/dashboard`, key: "dashboard", icon: LayoutDashboard },
    { href: `${base}/cases`, key: "cases", icon: FolderKanban },

    // ✅ activé
    { href: `${base}/messages`, key: "messages", icon: MessageSquareText },

    // futur module
    { href: `${base}/settings`, key: "settings", icon: Settings, disabled: true },
  ] as const

  return (
    <div className="h-full flex flex-col">
      {/* Brand */}
      <div className="p-5 border-b">
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-2xl bg-emerald-600 flex items-center justify-center shadow-sm">
            <Sparkles className="h-5 w-5 text-white" />
          </div>
          <div className="min-w-0">
            <div className="font-semibold leading-tight">ACX</div>
            <div className="text-xs text-neutral-500">{t("common.subtitle")}</div>
          </div>
        </div>
      </div>

      {/* Nav */}
      <div className="p-4 space-y-1">
        <div className="text-[11px] font-medium text-neutral-400 px-2 pb-2 uppercase tracking-wider">
          {t("menu.title")}
        </div>

        {items.map((it) => {
          // active si on est exactement sur la page OU dans un sous-chemin
          const active =
            pathname === it.href || (pathname?.startsWith(it.href + "/") ?? false)

          const label =
            it.key === "dashboard"
              ? t("menu.dashboard")
              : it.key === "cases"
              ? t("menu.cases")
              : it.key === "messages"
              ? t("menu.messages")
              : t("menu.support") // fallback safe si besoin

          return (
            <div key={it.key} className={(it as any).disabled ? "opacity-50 pointer-events-none" : ""}>
              <NavItem href={it.href} label={label} icon={it.icon} active={active} />
              {(it as any).disabled && (
                <div className="px-3 pb-2 text-[11px] text-neutral-400">
                  {t("common.comingSoon")}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* Help card */}
      <div className="mt-auto p-4">
        <div className="rounded-2xl border bg-gradient-to-b from-white to-emerald-50/40 p-4">
          <div className="text-sm font-semibold text-emerald-700">{t("sidebar.helpTitle")}</div>
          <div className="mt-1 text-xs text-neutral-600">{t("sidebar.helpBody")}</div>
          <div className="mt-3 inline-flex items-center gap-2 text-xs font-medium text-emerald-700">
            <span className="h-2 w-2 rounded-full bg-emerald-500" />
            {t("sidebar.helpHint")}
          </div>
        </div>
      </div>
    </div>
  )
}