"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { getTenantMenu, TenantMenuItem } from "@/src/lib/app/menu-tenant";
import { useMailBadge } from "@/src/contexts/MailBadgeContext";

const NAVY  = "#1e1b4b";
const NAVY2 = "#312e81";
const TEAL  = "#818cf8";

type Props = {
  locale: string;
  isTenantAdmin: boolean;
  tenantName?: string;
  roleIds?: number[];
};

function isActive(pathname: string, href: string) {
  return pathname.endsWith(href) || pathname.includes(href + "/");
}

export default function SidebarTenant({
  locale,
  isTenantAdmin,
  roleIds,
  tenantName = "ACX Tenant",
}: Props) {
  const pathname  = usePathname();
  const tMenu     = useTranslations("tenant.menu");
  const tSidebar  = useTranslations("tenant.sidebar");
  const { stats: mailStats } = useMailBadge();

  const items = getTenantMenu({ isTenantAdmin, roleIds });

  return (
    <aside
      className="w-72 shrink-0 flex flex-col text-white"
      style={{
        background: `linear-gradient(175deg, ${NAVY} 0%, #161230 55%, #0d0b22 100%)`,
        borderRight: "1px solid rgba(255,255,255,0.07)",
      }}
    >
      {/* ── Logo + workspace ─────────────────────────────────────────────── */}
      <div className="p-5" style={{ borderBottom: "1px solid rgba(255,255,255,0.07)" }}>
        {/* Logo */}
        <div className="flex items-center justify-center">
          <div
            className="overflow-hidden rounded-2xl bg-white shadow-md"
            style={{ width: 176, height: 64, border: "1px solid rgba(255,255,255,0.12)" }}
          >
            <Image
              src="/brand/logo-acx.jpg"
              alt="ACX"
              width={176}
              height={64}
              unoptimized
              className="h-full w-full object-contain p-2"
              priority
            />
          </div>
        </div>

        {/* Workspace pill */}
        <div
          className="mt-4 rounded-xl px-3 py-2.5"
          style={{
            background: "rgba(255,255,255,0.06)",
            border: "1px solid rgba(255,255,255,0.10)",
          }}
        >
          <div className="text-[10px] font-semibold uppercase tracking-widest text-white/45 mb-0.5">
            {tSidebar("workspace_label")}
          </div>
          <div className="flex items-center gap-2">
            {/* Pastille teal */}
            <span
              className="h-2 w-2 rounded-full shrink-0"
              style={{ backgroundColor: TEAL }}
            />
            <div className="text-sm font-semibold truncate">{tenantName || tSidebar("app_name")}</div>
          </div>
        </div>
      </div>

      {/* ── Navigation ──────────────────────────────────────────────────── */}
      <nav className="flex-1 overflow-y-auto p-3 space-y-0.5">
        {items.map((item: TenantMenuItem) => {
          const href   = `/${locale}${item.href}`;
          const active = isActive(pathname, item.href);
          const Icon   = item.icon;

          return (
            <Link
              key={item.key}
              href={href}
              className="group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all"
              style={
                active
                  ? {
                      background: `linear-gradient(135deg, rgba(129,140,248,0.18) 0%, rgba(129,140,248,0.08) 100%)`,
                      border: "1px solid rgba(129,140,248,0.25)",
                      color: "#fff",
                    }
                  : {
                      border: "1px solid transparent",
                      color: "rgba(255,255,255,0.70)",
                    }
              }
              onMouseEnter={(e) => {
                if (!active) {
                  (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.05)"
                  ;(e.currentTarget as HTMLElement).style.borderColor = "rgba(255,255,255,0.08)"
                  ;(e.currentTarget as HTMLElement).style.color = "#fff"
                }
              }}
              onMouseLeave={(e) => {
                if (!active) {
                  (e.currentTarget as HTMLElement).style.background = "transparent"
                  ;(e.currentTarget as HTMLElement).style.borderColor = "transparent"
                  ;(e.currentTarget as HTMLElement).style.color = "rgba(255,255,255,0.70)"
                }
              }}
            >
              {/* Icon box */}
              <span
                className="h-8 w-8 rounded-lg flex items-center justify-center shrink-0 transition-all"
                style={
                  active
                    ? { background: `rgba(129,140,248,0.25)`, border: "1px solid rgba(129,140,248,0.35)" }
                    : { background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.10)" }
                }
              >
                <Icon
                  className="h-4 w-4"
                  style={{ color: active ? TEAL : "rgba(255,255,255,0.75)" }}
                />
              </span>

              <span className="flex-1 truncate font-medium">{tMenu(item.key)}</span>

              {/* Badge mails en attente */}
              {item.key === "mail_inbox" && mailStats && mailStats.pending > 0 && (
                <span
                  className="min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center"
                  style={{ background: "#ef4444", color: "#fff" }}
                >
                  {mailStats.pending > 99 ? "99+" : mailStats.pending}
                </span>
              )}

              {/* Badge admin */}
              {item.tenantAdminOnly && (
                <span
                  className="text-[10px] px-2 py-0.5 rounded-full font-semibold"
                  style={{
                    background: `rgba(129,140,248,0.15)`,
                    border: "1px solid rgba(129,140,248,0.25)",
                    color: TEAL,
                  }}
                >
                  admin
                </span>
              )}

              {/* Indicator active */}
              {active && (
                <span className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: TEAL }} />
              )}
            </Link>
          );
        })}
      </nav>

      {/* ── Footer tip ─────────────────────────────────────────────────── */}
      <div className="p-4" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
        <div
          className="rounded-xl p-3"
          style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.08)",
          }}
        >
          <div className="text-[10px] font-semibold uppercase tracking-widest text-white/40 mb-1">
            {tSidebar("tip_label")}
          </div>
          <div className="text-xs leading-relaxed text-white/55">{tSidebar("tip_body")}</div>
        </div>
      </div>
    </aside>
  );
}