'use client';

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

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

const NAV_ITEMS: NavItem[] = [
  {
    href: '/dashboard/estrategia',
    label: 'Objetivos del Mes',
    icon: Target,
    iconClass: 'text-emerald-500',
    moduleId: 'estrategia',
  },
  {
    href: '/dashboard/seguimiento',
    label: 'Seguimiento',
    icon: Radio,
    iconClass: 'text-sky-500',
    moduleId: 'seguimiento',
  },
  {
    href: '/dashboard/kpis',
    label: 'Métricas',
    icon: BarChart3,
    iconClass: 'text-brand-500',
    moduleId: 'kpis',
  },
  {
    href: '/dashboard/marca',
    label: 'Zona de marca',
    icon: BookMarked,
    iconClass: 'text-rose-500',
    moduleId: 'marca',
  },
  {
    href: '/dashboard/activos',
    label: 'Biblioteca de Activos',
    icon: FolderGit2,
    iconClass: 'text-blue-500',
    moduleId: 'activos',
  },
  {
    href: '/dashboard/creatividades',
    label: 'Creatividades Ads',
    icon: Sparkles,
    iconClass: 'text-brand-500',
    moduleId: 'creatives',
  },
  {
    href: '/dashboard/asistente',
    label: 'Asistente IA Financiero',
    icon: Bot,
    iconClass: 'text-purple-500',
    moduleId: 'asistente',
  },
];

const EXCLUDED_DATE_HEADER_ROUTES = [
  '/dashboard/seguimiento',
  '/dashboard/marca',
  '/dashboard/activos',
  '/dashboard/creatividades',
  '/dashboard/creatives',
  '/dashboard/asistente',
  '/dashboard/agencia',
  '/dashboard/historial',
];

function shouldShowDateHeader(pathname: string | null): boolean {
  if (!pathname) return true;
  return !EXCLUDED_DATE_HEADER_ROUTES.some(
    (route) => pathname === route || pathname.startsWith(route + '/')
  );
}

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

function NavLink({
  item,
  onNavigate,
  hasSubItems,
  isOpen,
  onToggle,
}: {
  item: NavItem | (Omit<NavItem, 'moduleId'> & { moduleId?: string });
  onNavigate?: () => void;
  hasSubItems?: boolean;
  isOpen?: boolean;
  onToggle?: () => void;
}) {
  const pathname = usePathname();
  const active = isActive(pathname, item.href);
  const Icon = item.icon;

  const handleClick = (e: React.MouseEvent) => {
    if (hasSubItems && onToggle) {
      if (active) {
        // Si ya está en esta página, hacer clic en la sección pliega/despliega sin recargar
        e.preventDefault();
        onToggle();
        return;
      } else if (!isOpen) {
        // Al entrar a la sección, asegurar que se abre
        onToggle();
      }
    }
    if (onNavigate) {
      onNavigate();
    }
  };

  return (
    <Link
      href={item.href}
      onClick={handleClick}
      aria-current={active ? 'page' : undefined}
      className={`group relative flex items-center justify-between gap-2 rounded-md px-3 py-2 text-[14px] font-medium transition-colors ${
        active
          ? 'bg-white/[0.07] text-white'
          : 'text-mist-300 hover:bg-white/[0.05] hover:text-white'
      }`}
    >
      {active ? (
        <span aria-hidden className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-brand-500" />
      ) : null}
      <div className="flex min-w-0 items-center gap-3">
        <Icon className={`h-4 w-4 shrink-0 ${active ? 'text-brand-500' : 'text-mist-400 group-hover:text-mist-300'}`} />
        <span className="truncate">{item.label}</span>
      </div>
      {hasSubItems ? (
        <span
          role="button"
          tabIndex={0}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            onToggle?.();
          }}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              e.stopPropagation();
              onToggle?.();
            }
          }}
          className="p-1 rounded hover:bg-white/10 text-mist-400 hover:text-white transition-colors shrink-0"
          aria-label={isOpen ? 'Ocultar páginas' : 'Mostrar páginas'}
        >
          <ChevronDown
            className={`h-3.5 w-3.5 transition-transform duration-200 ${
              isOpen ? 'rotate-0 text-white' : '-rotate-90 text-mist-400'
            }`}
          />
        </span>
      ) : null}
    </Link>
  );
}

export default function DashboardShell({
  children,
  email,
  company,
  role,
  isAgency,
  viewName,
  activeTenantId,
  enabledModules,
  clientLogoUrl,
  brandLabel,
  logoutAction,
}: {
  children: React.ReactNode;
  email: string;
  company: string;
  role: string;
  isAgency: boolean;
  viewName?: string;
  activeTenantId?: string | null;
  /** 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 showDateHeader = shouldShowDateHeader(pathname);

  const isSocialRoute =
    pathname === '/dashboard/social' ||
    pathname === '/dashboard/calendario' ||
    pathname === '/dashboard/creatives';

  const isAgenciaRoute =
    pathname === '/dashboard/agencia' ||
    (pathname !== null && pathname.startsWith('/dashboard/agencia/'));

  const isMetricasRoute =
    pathname === '/dashboard/kpis' ||
    (pathname !== null && pathname.startsWith('/dashboard/kpis/')) ||
    pathname === '/dashboard/crm' ||
    (pathname !== null && pathname.startsWith('/dashboard/crm/')) ||
    pathname === '/dashboard/ad-tracker' ||
    (pathname !== null && pathname.startsWith('/dashboard/ad-tracker/')) ||
    isSocialRoute ||
    pathname === '/dashboard/organico' ||
    (pathname !== null && pathname.startsWith('/dashboard/organico/'));

  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});

  const isMetricasOpen = expandedSections['metricas'] ?? isMetricasRoute;
  const isSocialOpen = expandedSections['social'] ?? isSocialRoute;
  const isAgenciaOpen = expandedSections['agencia'] ?? isAgenciaRoute;

  const toggleSection = (key: 'metricas' | 'social' | 'agencia') => {
    setExpandedSections((prev) => {
      const current =
        key === 'metricas'
          ? (prev['metricas'] ?? isMetricasRoute)
          : key === 'social'
            ? (prev['social'] ?? isSocialRoute)
            : (prev['agencia'] ?? isAgenciaRoute);
      return {
        ...prev,
        [key]: !current,
      };
    });
  };

  const moduleOn = (id: DashboardModuleId) => {
    if (isAgency) return true;
    if (!enabledModules) return true;
    return enabledModules[id] !== false;
  };

  const isItemVisible = (item: NavItem) => {
    if (item.moduleId === 'kpis') {
      return (
        moduleOn('kpis') ||
        moduleOn('crm') ||
        moduleOn('ad-tracker') ||
        moduleOn('social') ||
        moduleOn('organico')
      );
    }
    return moduleOn(item.moduleId);
  };

  const visibleNav = NAV_ITEMS.filter(isItemVisible);

  const subLinkCls = (href: string) =>
    `ml-7 flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] font-medium transition-colors ${
      isActive(pathname, href)
        ? 'bg-white/[0.07] text-white'
        : 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
    }`;

  const sidebar = (
    <div className="flex h-full flex-col">
      <div className="mb-4 flex shrink-0 items-center gap-2 border-b border-white/10 px-1 pb-3 pt-1">
        <SidebarTenantSwitcher
          isAgency={isAgency}
          initialActiveId={activeTenantId}
          initialActiveName={viewName}
          clientLogoUrl={clientLogoUrl}
          brandLabel={brandLabel}
          company={company}
        />
        <button
          type="button"
          className="ml-auto rounded-md p-2 text-mist-400 hover:bg-white/10 hover:text-white md:hidden"
          onClick={close}
          aria-label="Cerrar menú"
        >
          <X className="w-4 h-4" />
        </button>
      </div>

      <nav className="flex-1 min-h-0 space-y-0.5 overflow-y-auto pr-1">
        {visibleNav.map((item) => {
          const underMetricas = item.moduleId === 'kpis';
          return (
            <div key={item.href} className="space-y-0.5">
              <NavLink
                item={item}
                hasSubItems={underMetricas}
                isOpen={isMetricasOpen}
                onToggle={() => toggleSection('metricas')}
                onNavigate={close}
              />
              {underMetricas && isMetricasOpen ? (
                <div className="space-y-0.5 my-0.5">
                  {moduleOn('crm') ? (
                    <Link
                      href="/dashboard/crm"
                      onClick={close}
                      className={subLinkCls('/dashboard/crm')}
                    >
                      <Contact
                        className={`h-3.5 w-3.5 shrink-0 ${
                          isActive(pathname, '/dashboard/crm')
                            ? 'text-teal-400'
                            : 'text-mist-400 group-hover:text-mist-300'
                        }`}
                      />
                      <span className="truncate">CRM</span>
                    </Link>
                  ) : null}

                  {moduleOn('ad-tracker') ? (
                    <Link
                      href="/dashboard/ad-tracker"
                      onClick={close}
                      className={subLinkCls('/dashboard/ad-tracker')}
                    >
                      <Megaphone
                        className={`h-3.5 w-3.5 shrink-0 ${
                          isActive(pathname, '/dashboard/ad-tracker')
                            ? 'text-violet-400'
                            : 'text-mist-400 group-hover:text-mist-300'
                        }`}
                      />
                      <span className="truncate">Ads</span>
                    </Link>
                  ) : null}

                  {moduleOn('social') ? (
                    <div className="space-y-0.5">
                      <Link
                        href="/dashboard/social"
                        onClick={(e) => {
                          if (moduleOn('calendario') || moduleOn('pipeline')) {
                            if (pathname === '/dashboard/social') {
                              e.preventDefault();
                              toggleSection('social');
                              return;
                            } else if (!isSocialOpen) {
                              toggleSection('social');
                            }
                          }
                          close();
                        }}
                        className={`${subLinkCls('/dashboard/social')} justify-between`}
                      >
                        <div className="flex items-center gap-2.5 min-w-0">
                          <Share2
                            className={`h-3.5 w-3.5 shrink-0 ${
                              isActive(pathname, '/dashboard/social')
                                ? 'text-fuchsia-400'
                                : 'text-mist-400 group-hover:text-mist-300'
                            }`}
                          />
                          <span className="truncate">Social</span>
                        </div>
                        {moduleOn('calendario') || moduleOn('pipeline') ? (
                          <span
                            role="button"
                            tabIndex={0}
                            onClick={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              toggleSection('social');
                            }}
                            className="p-0.5 rounded hover:bg-white/10 text-mist-400 hover:text-white transition-colors shrink-0"
                            aria-label={isSocialOpen ? 'Ocultar páginas' : 'Mostrar páginas'}
                          >
                            <ChevronDown
                              className={`h-3 w-3 transition-transform duration-200 ${
                                isSocialOpen ? 'rotate-0 text-white' : '-rotate-90 text-mist-400'
                              }`}
                            />
                          </span>
                        ) : null}
                      </Link>
                      {isSocialOpen ? (
                        <div className="space-y-0.5 my-0.5">
                          {moduleOn('calendario') ? (
                            <Link
                              href="/dashboard/calendario"
                              onClick={close}
                              className={`ml-11 flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors ${
                                isActive(pathname, '/dashboard/calendario')
                                  ? 'bg-white/[0.07] text-white'
                                  : 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
                              }`}
                            >
                              <CalendarDays className="h-3 w-3 shrink-0" />
                              <span className="truncate">Calendario editorial</span>
                            </Link>
                          ) : null}
                          {moduleOn('pipeline') ? (
                            <Link
                              href="/dashboard/creatives"
                              onClick={close}
                              className={`ml-11 flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors ${
                                isActive(pathname, '/dashboard/creatives')
                                  ? 'bg-white/[0.07] text-white'
                                  : 'text-mist-400 hover:bg-white/[0.05] hover:text-white'
                              }`}
                            >
                              <Images className="h-3 w-3 shrink-0" />
                              <span className="truncate">Pipeline RRSS</span>
                            </Link>
                          ) : null}
                        </div>
                      ) : null}
                    </div>
                  ) : null}

                  {moduleOn('organico') ? (
                    <Link
                      href="/dashboard/organico"
                      onClick={close}
                      className={subLinkCls('/dashboard/organico')}
                    >
                      <Leaf
                        className={`h-3.5 w-3.5 shrink-0 ${
                          isActive(pathname, '/dashboard/organico')
                            ? 'text-lime-400'
                            : 'text-mist-400 group-hover:text-mist-300'
                        }`}
                      />
                      <span className="truncate">Orgánico</span>
                    </Link>
                  ) : null}
                </div>
              ) : null}
            </div>
          );
        })}

        {isAgency ? (
          <div className="mt-5 border-t border-white/10 pt-4">
            <span className="px-3 text-[12px] font-medium text-mist-400">
              Agencia
            </span>
            <div className="mt-1 space-y-0.5">
              <div className="space-y-0.5">
                <NavLink
                  item={{
                    href: '/dashboard/agencia',
                    label: 'Portafolio Agencia',
                    icon: Layers,
                    iconClass: 'text-amber-500',
                  }}
                  hasSubItems
                  isOpen={isAgenciaOpen}
                  onToggle={() => toggleSection('agencia')}
                  onNavigate={close}
                />
                {isAgenciaOpen ? (
                  <Link
                    href="/dashboard/agencia/conexiones"
                    onClick={close}
                    className={subLinkCls('/dashboard/agencia/conexiones')}
                  >
                    <Plug className="h-3.5 w-3.5 shrink-0" />
                    Panel de control · clientes y conexiones
                  </Link>
                ) : null}
              </div>
              <NavLink
                item={{
                  href: '/dashboard/historial',
                  label: 'Historial de cambios',
                  icon: History,
                  iconClass: 'text-slate-500',
                }}
                onNavigate={close}
              />
            </div>
          </div>
        ) : null}
      </nav>

      <div className="mt-auto shrink-0 space-y-2.5 border-t border-white/10 pt-3">
        <div className="rounded-md bg-white/[0.05] px-3 py-2.5">
          <div className="mb-1 flex items-center gap-2">
            <UserCheck className="h-3.5 w-3.5 shrink-0 text-mist-400" />
            <p className="truncate text-[13px] font-medium text-white">{email}</p>
          </div>
          <div className="flex items-center justify-between gap-2">
            <span className="truncate text-[12px] capitalize text-mist-400">
              {company}
            </span>
            <span
              className="shrink-0 rounded-sm bg-brand-500/15 px-1.5 py-0.5 text-[11px] font-medium capitalize text-brand-400"
              title={role}
            >
              {role === 'admin'
                ? 'Agencia'
                : role === 'team'
                  ? 'Equipo'
                  : 'Cliente'}
            </span>
          </div>
        </div>

        <form action={logoutAction}>
          <button
            type="submit"
            className="flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] font-medium text-mist-400 transition-colors hover:bg-white/[0.06] hover:text-white"
          >
            <LogOut className="w-3.5 h-3.5" />
            Cerrar Sesión
          </button>
        </form>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen overflow-hidden bg-background text-ink">
      <aside className="sticky top-0 hidden h-screen w-[248px] shrink-0 flex-col bg-sidebar p-4 text-white md:flex overflow-hidden">
        {sidebar}
      </aside>

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

      <div className="flex min-w-0 flex-1 flex-col h-full overflow-hidden">
        {showDateHeader ? (
          <header className="shrink-0 z-30 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:px-8">
            <div className="flex min-h-10 flex-wrap items-center gap-3">
              <button
                type="button"
                className="rounded-md p-2 text-ink-muted hover:bg-mist-100 md:hidden"
                onClick={() => setOpen(true)}
                aria-label="Abrir menú"
              >
                <Menu className="w-5 h-5" />
              </button>

              <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>
            </div>
          </header>
        ) : (
          <header className="shrink-0 z-30 border-b border-border bg-background/90 px-4 py-2.5 backdrop-blur-md md:hidden">
            <div className="flex min-h-10 items-center">
              <button
                type="button"
                className="rounded-md p-2 text-ink-muted hover:bg-mist-100"
                onClick={() => setOpen(true)}
                aria-label="Abrir menú"
              >
                <Menu className="w-5 h-5" />
              </button>
            </div>
          </header>
        )}

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