4ventures-client-portal/src/components/DashboardShell.tsx

'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  BarChart3,
  Target,
  FolderGit2,
  Bot,
  ShieldCheck,
  Layers,
  LogOut,
  UserCheck,
  CalendarDays,
  Radio,
  Megaphone,
  Share2,
  Contact,
  Menu,
  X,
  Leaf,
  BookMarked,
} from 'lucide-react';
import TenantSwitcher from '@/components/TenantSwitcher';
import type { DashboardModuleId } from '@/lib/tenant-modules';
import DateRangePicker from '@/components/DateRangePicker';
import { useDateRange } from '@/components/DateRangeContext';
import SyncNowButton from '@/components/SyncNowButton';

type NavItem = {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  iconClass: string;
  moduleId: DashboardModuleId;
};

const NAV_ITEMS: NavItem[] = [
  {
    href: '/dashboard/kpis',
    label: 'Métricas',
    icon: BarChart3,
    iconClass: 'text-brand-500',
    moduleId: 'kpis',
  },
  {
    href: '/dashboard/crm',
    label: 'CRM',
    icon: Contact,
    iconClass: 'text-teal-500',
    moduleId: 'crm',
  },
  {
    href: '/dashboard/seguimiento',
    label: 'Seguimiento',
    icon: Radio,
    iconClass: 'text-sky-500',
    moduleId: 'seguimiento',
  },
  {
    href: '/dashboard/estrategia',
    label: 'Objetivos del Mes',
    icon: Target,
    iconClass: 'text-emerald-500',
    moduleId: 'estrategia',
  },
  {
    href: '/dashboard/marca',
    label: 'Zona de marca',
    icon: BookMarked,
    iconClass: 'text-rose-500',
    moduleId: 'marca',
  },
  {
    href: '/dashboard/ad-tracker',
    label: 'Ads',
    icon: Megaphone,
    iconClass: 'text-violet-500',
    moduleId: 'ad-tracker',
  },
  {
    href: '/dashboard/social',
    label: 'Social',
    icon: Share2,
    iconClass: 'text-fuchsia-500',
    moduleId: 'social',
  },
  {
    href: '/dashboard/organico',
    label: 'Orgánico',
    icon: Leaf,
    iconClass: 'text-lime-600',
    moduleId: 'organico',
  },
  {
    href: '/dashboard/activos',
    label: 'Biblioteca de Activos',
    icon: FolderGit2,
    iconClass: 'text-blue-500',
    moduleId: 'activos',
  },
  {
    href: '/dashboard/creatives',
    label: 'Pipeline creatividades',
    icon: FolderGit2,
    iconClass: 'text-orange-500',
    moduleId: 'creatives',
  },
  {
    href: '/dashboard/asistente',
    label: 'Asistente IA Financiero',
    icon: Bot,
    iconClass: 'text-purple-500',
    moduleId: 'asistente',
  },
];

function isActive(pathname: string, href: string): boolean {
  if (pathname === href) return true;
  if (href !== '/dashboard' && pathname.startsWith(href + '/')) return true;
  return false;
}

function NavLink({
  item,
  onNavigate,
}: {
  item: NavItem | (Omit<NavItem, 'moduleId'> & { moduleId?: string });
  onNavigate?: () => void;
}) {
  const pathname = usePathname();
  const active = isActive(pathname, item.href);
  const Icon = item.icon;
  return (
    <Link
      href={item.href}
      onClick={onNavigate}
      className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
        active
          ? 'bg-brand-50 text-gray-900 border border-brand-200'
          : 'text-gray-600 border border-transparent hover:text-gray-900 hover:bg-gray-50'
      }`}
    >
      <Icon className={`w-4 h-4 shrink-0 ${item.iconClass}`} />
      {item.label}
    </Link>
  );
}

export default function DashboardShell({
  children,
  email,
  company,
  role,
  isAgency,
  viewName,
  enabledModules,
  clientLogoUrl,
  brandLabel,
  logoutAction,
}: {
  children: React.ReactNode;
  email: string;
  company: string;
  role: string;
  isAgency: boolean;
  viewName?: string;
  /** null = show all (agency default). */
  enabledModules?: Record<DashboardModuleId, boolean> | null;
  clientLogoUrl?: string | null;
  brandLabel?: string;
  logoutAction: () => void | Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  const dateRange = useDateRange();
  const pathname = usePathname();

  const visibleNav = NAV_ITEMS.filter((item) => {
    if (isAgency) return true;
    if (!enabledModules) return true;
    return enabledModules[item.moduleId] !== false;
  });

  const showClientBrand = Boolean(clientLogoUrl);
  const title = showClientBrand ? brandLabel || company : '4VENTURES';
  const subtitle = showClientBrand
    ? isAgency
      ? 'Vista cliente'
      : 'Portal cliente'
    : 'Centro de Mando';

  const sidebar = (
    <div className="flex h-full flex-col">
      <div className="flex items-center gap-3 px-2 py-3 border-b border-gray-200 mb-5">
        {clientLogoUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={clientLogoUrl}
            alt={title}
            width={40}
            height={40}
            className="rounded-lg object-contain shrink-0 w-10 h-10 bg-white border border-gray-100"
          />
        ) : (
          <Image
            src="/logo-4ventures.png"
            alt="4Ventures"
            width={40}
            height={40}
            className="rounded-lg object-cover shrink-0"
            priority
          />
        )}
        <div className="min-w-0">
          <p className="font-bold text-sm tracking-wide text-gray-900 leading-tight truncate">
            {title}
          </p>
          <p className="text-xs text-gray-500 font-medium leading-tight">
            {subtitle}
          </p>
        </div>
        <button
          type="button"
          className="ml-auto md:hidden rounded-lg p-2 text-gray-500 hover:bg-gray-100"
          onClick={close}
          aria-label="Cerrar menú"
        >
          <X className="w-4 h-4" />
        </button>
      </div>

      <nav className="flex-1 overflow-y-auto space-y-1.5 pr-1">
        {visibleNav.map((item) => {
          const showCalendarioUnderSocial =
            item.moduleId === 'social' &&
            (isAgency ||
              !enabledModules ||
              enabledModules.calendario !== false);
          return (
            <div key={item.href} className="space-y-0.5">
              <NavLink item={item} onNavigate={close} />
              {showCalendarioUnderSocial ? (
                <Link
                  href="/dashboard/calendario"
                  onClick={close}
                  className={`ml-4 flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-medium transition-all ${
                    isActive(pathname, '/dashboard/calendario')
                      ? 'bg-brand-50 text-gray-900 border border-brand-200'
                      : 'text-gray-500 border border-transparent hover:text-gray-900 hover:bg-gray-50'
                  }`}
                >
                  <CalendarDays className="w-3.5 h-3.5 shrink-0 text-pink-500" />
                  Calendario editorial
                </Link>
              ) : null}
            </div>
          );
        })}

        {isAgency ? (
          <div className="pt-4 mt-4 border-t border-gray-200">
            <span className="px-3 text-[10px] font-bold uppercase tracking-wider text-gray-500">
              Agencia OS
            </span>
            <div className="mt-1">
              <NavLink
                item={{
                  href: '/dashboard/agencia',
                  label: 'Portafolio Agencia',
                  icon: Layers,
                  iconClass: 'text-amber-500',
                }}
                onNavigate={close}
              />
            </div>
          </div>
        ) : null}
      </nav>

      <div className="pt-4 mt-4 border-t border-gray-200 space-y-3">
        <div className="px-2 py-2 rounded-xl bg-gray-50 border border-gray-200">
          <div className="flex items-center gap-2 mb-1">
            <UserCheck className="w-3.5 h-3.5 text-brand-500 shrink-0" />
            <p className="text-xs font-medium text-gray-900 truncate">{email}</p>
          </div>
          <div className="flex items-center justify-between gap-2">
            <span className="text-[10px] text-gray-500 capitalize truncate">
              {company}
            </span>
            <span className="text-[9px] uppercase tracking-wider font-semibold px-1.5 py-0.5 rounded bg-brand-50 text-brand-600 shrink-0">
              {role}
            </span>
          </div>
        </div>

        <form action={logoutAction}>
          <button
            type="submit"
            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 border border-transparent hover:border-red-100 transition-all"
          >
            <LogOut className="w-3.5 h-3.5" />
            Cerrar Sesión
          </button>
        </form>

        <div className="flex items-center justify-between px-2 pt-1 text-[11px] text-gray-400">
          <span className="flex items-center gap-1 text-emerald-600">
            <ShieldCheck className="w-3 h-3" /> RLS Activo
          </span>
        </div>
      </div>
    </div>
  );

  return (
    <div className="flex min-h-screen bg-background text-gray-900">
      <aside className="hidden md:flex w-64 shrink-0 flex-col border-r border-gray-200 bg-sidebar p-4">
        {sidebar}
      </aside>

      {open ? (
        <div className="fixed inset-0 z-50 md:hidden">
          <button
            type="button"
            className="absolute inset-0 bg-black/40"
            aria-label="Cerrar menú"
            onClick={close}
          />
          <aside className="absolute left-0 top-0 h-full w-[280px] bg-sidebar border-r border-gray-200 p-4 shadow-xl">
            {sidebar}
          </aside>
        </div>
      ) : null}

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur-md px-4 md:px-8 py-2.5 space-y-2">
          <div className="flex items-center gap-3 min-h-10">
            <button
              type="button"
              className="md:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100"
              onClick={() => setOpen(true)}
              aria-label="Abrir menú"
            >
              <Menu className="w-5 h-5" />
            </button>

            <div className="flex min-w-0 items-center gap-2 text-sm text-gray-500">
              <span className="hidden sm:inline shrink-0">
                {isAgency ? 'Contexto:' : 'Cliente / Portal:'}
              </span>
              <TenantSwitcher
                isAgency={isAgency}
                initialName={viewName || company}
              />
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <div className="min-w-0 flex-1">
              <DateRangePicker
                compact
                preset={dateRange.preset}
                customSince={dateRange.customSince}
                customUntil={dateRange.customUntil}
                onPreset={dateRange.setPreset}
                onCustomChange={dateRange.setCustom}
              />
            </div>
            {isAgency ? <SyncNowButton /> : null}
          </div>
        </header>

        <main className="flex-1 overflow-y-auto">
          <div className="mx-auto w-full max-w-7xl px-4 py-6 md:px-8 md:py-8">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}