import { Component, Show, createEffect, For, createSignal } from 'solid-js';
import { useNavigate, A } from '@solidjs/router';
import { authState, logout, switchRole } from '~/lib/auth';
import { shouldShowRoleSwitcher } from '~/lib/auth-flow';
import {
  getRoleTourStorageKey,
  getWelcomeTourStorageKey,
  pickGuidedTour,
  readSeenRoleTours,
  WELCOME_TOUR_VALUE,
  writeSeenRoleTours,
} from '~/lib/guided-tour';
import type { GuidedTourKind } from '~/lib/guided-tour';
import {
  type GuidedTourStep,
  resolveRoleApprovedTourSteps,
  resolveWelcomeTourSteps,
} from '~/lib/guided-tour-content';

// ── Icons (inline SVGs for zero deps) ─────────────────────────────────────────

const IconDashboard = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
    <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
  </svg>
);
const IconJobs = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
    <line x1="12" y1="12" x2="12" y2="17"/><line x1="9" y1="14.5" x2="15" y2="14.5"/>
  </svg>
);
const IconBell = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
  </svg>
);
const IconSettings = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </svg>
);
const IconLogout = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/>
    <line x1="21" y1="12" x2="9" y2="12"/>
  </svg>
);
const IconCompass = () => (
  <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>
  </svg>
);

// ── Module → nav item mapping ─────────────────────────────────────────────────

const MODULE_NAV_MAP: Record<string, { label: string; href: string; icon: Component }> = {
  // Uppercase module keys
  COMPANY_DASHBOARD:    { label: 'Dashboard',     href: '/dashboard',                icon: IconDashboard },
  JOBSEEKER_DASHBOARD:  { label: 'Dashboard',     href: '/dashboard',                icon: IconDashboard },
  CUSTOMER_DASHBOARD:   { label: 'Dashboard',     href: '/dashboard',                icon: IconDashboard },
  PROFESSIONAL_DASHBOARD: { label: 'Dashboard',   href: '/dashboard',                icon: IconDashboard },
  JOBS:                 { label: 'Jobs',           href: '/dashboard/jobs',           icon: IconJobs },
  JOBS_BROWSE:          { label: 'Browse Jobs',    href: '/dashboard/jobs',           icon: IconJobs },
  APPLICATIONS:         { label: 'Applications',  href: '/dashboard/applications',   icon: IconJobs },
  MY_APPLICATIONS:      { label: 'My Applications', href: '/dashboard/applications', icon: IconJobs },
  REQUIREMENTS:         { label: 'Requirements',  href: '/dashboard/requirements',   icon: IconJobs },
  MARKETPLACE:          { label: 'Marketplace',   href: '/dashboard/marketplace',    icon: IconCompass },
  MY_REQUESTS:          { label: 'My Requests',   href: '/dashboard/requests',       icon: IconJobs },
  ACCEPTED_LEADS:       { label: 'Accepted Leads',href: '/dashboard/leads/accepted', icon: IconJobs },
  PORTFOLIO:            { label: 'Portfolio',     href: '/dashboard/portfolio',      icon: IconJobs },
  SERVICES:             { label: 'Services',      href: '/dashboard/services',       icon: IconJobs },
  WALLET:               { label: 'Wallet',        href: '/dashboard/wallet',         icon: IconCompass },
  COMPANY_PROFILE:      { label: 'Profile',       href: '/dashboard/profile',        icon: IconSettings },
  JOBSEEKER_PROFILE:    { label: 'Profile',       href: '/dashboard/profile',        icon: IconSettings },
  CUSTOMER_PROFILE:     { label: 'Profile',       href: '/dashboard/profile',        icon: IconSettings },
  PROFESSIONAL_PROFILE: { label: 'Profile',       href: '/dashboard/profile',        icon: IconSettings },
  PURCHASE_PACKAGES:    { label: 'Buy Packages',  href: '/dashboard/packages',       icon: IconCompass },
  NOTIFICATIONS:        { label: 'Notifications', href: '/dashboard/notifications',  icon: IconBell },
  SETTINGS:             { label: 'Settings',      href: '/dashboard/settings',       icon: IconSettings },
  EXPLORE_NXTGAUGE:     { label: 'Explore Nxtgauge', href: '/dashboard/explore',    icon: IconCompass },

  // Lowercase module keys (from seed/runtime config)
  jobs:                 { label: 'Jobs',           href: '/dashboard/jobs',           icon: IconJobs },
  applications:         { label: 'Applications',   href: '/dashboard/applications',   icon: IconJobs },
  profile:              { label: 'Profile',        href: '/dashboard/profile',        icon: IconSettings },
  browse_jobs:          { label: 'Browse Jobs',    href: '/dashboard/jobs',           icon: IconJobs },
  my_applications:      { label: 'My Applications',href: '/dashboard/applications',   icon: IconJobs },
  requirements:         { label: 'Requirements',   href: '/dashboard/requirements',   icon: IconJobs },
  marketplace:          { label: 'Marketplace',    href: '/dashboard/marketplace',    icon: IconCompass },
  leads:                { label: 'My Leads',       href: '/dashboard/requests',       icon: IconJobs },
  portfolio:            { label: 'Portfolio',      href: '/dashboard/portfolio',      icon: IconJobs },
  services:             { label: 'Services',       href: '/dashboard/services',       icon: IconJobs },
  wallet:               { label: 'Wallet',         href: '/dashboard/wallet',         icon: IconCompass },
  notifications:        { label: 'Notifications',  href: '/dashboard/notifications',  icon: IconBell },
  settings:             { label: 'Settings',       href: '/dashboard/settings',       icon: IconSettings },
};

// ── Dashboard Layout ──────────────────────────────────────────────────────────

export default function DashboardLayout(props: { children: any }) {
  const navigate = useNavigate();
  const [switchingRole, setSwitchingRole] = createSignal(false);
  const [tourKind, setTourKind] = createSignal<GuidedTourKind | null>(null);
  const [tourStepIndex, setTourStepIndex] = createSignal(0);

  createEffect(() => {
    const s = authState();
    if (!s.access_token) {
      navigate('/auth/login', { replace: true });
      return;
    }
    if (s.runtime_config?.onboarding_required) {
      navigate('/onboarding', { replace: true });
      return;
    }
  });

  const rc = () => authState().runtime_config;
  const roleOptions = () => rc()?.user?.roles ?? [];
  const activeRole = () => rc()?.user?.active_role ?? rc()?.role ?? '';
  const activeTourSteps = (): GuidedTourStep[] => {
    const kind = tourKind();
    if (!kind) return [];
    if (kind === 'welcome') return resolveWelcomeTourSteps(rc()?.guided_tours ?? null);
    return resolveRoleApprovedTourSteps(activeRole(), rc()?.guided_tours ?? null);
  };
  const tourStep = () => activeTourSteps()[tourStepIndex()];

  const navItems = () => {
    if (rc()?.role === 'USER') {
      return [
        { label: 'Dashboard', href: '/dashboard', icon: IconDashboard },
        { label: 'Explore Nxtgauge', href: '/dashboard/explore', icon: IconCompass },
        { label: 'Settings', href: '/dashboard/settings', icon: IconSettings },
      ];
    }

    const modules = rc()?.enabled_modules ?? [];
    const seen = new Set<string>();
    return modules
      .map(m => MODULE_NAV_MAP[m])
      .filter(item => {
        if (!item || seen.has(item.href)) return false;
        seen.add(item.href);
        return true;
      });
  };

  async function handleLogout() {
    await logout();
    navigate('/auth/login', { replace: true });
  }

  async function handleRoleSwitch(nextRole: string) {
    const normalized = String(nextRole || '').trim().toUpperCase();
    if (!normalized || normalized === activeRole()) return;
    setSwitchingRole(true);
    try {
      await switchRole(normalized);
      navigate('/dashboard', { replace: true });
    } finally {
      setSwitchingRole(false);
    }
  }

  function finishTour() {
    if (typeof window === 'undefined') return;
    const userId = rc()?.user?.id;
    if (!userId || !tourKind()) {
      setTourKind(null);
      setTourStepIndex(0);
      return;
    }

    if (tourKind() === 'welcome') {
      window.localStorage.setItem(getWelcomeTourStorageKey(userId), WELCOME_TOUR_VALUE);
    } else {
      const key = getRoleTourStorageKey(userId);
      const seen = readSeenRoleTours(window.localStorage.getItem(key));
      seen.add(activeRole());
      window.localStorage.setItem(key, writeSeenRoleTours(seen));
    }

    setTourKind(null);
    setTourStepIndex(0);
  }

  function nextTourStep() {
    const total = activeTourSteps().length;
    if (tourStepIndex() >= total - 1) {
      finishTour();
      return;
    }
    setTourStepIndex((current) => current + 1);
  }

  createEffect(() => {
    if (typeof window === 'undefined') return;
    const runtime = rc();
    const userId = runtime?.user?.id;
    if (!runtime || !userId) return;

    const welcomeTourSeen = window.localStorage.getItem(getWelcomeTourStorageKey(userId)) === WELCOME_TOUR_VALUE;
    const seenRoleTours = readSeenRoleTours(window.localStorage.getItem(getRoleTourStorageKey(userId)));
    const nextTour = pickGuidedTour({
      userId,
      activeRole: runtime?.user?.active_role ?? runtime?.role,
      welcomeTourSeen,
      seenRoleTours,
    });

    if (nextTour && nextTour !== tourKind()) {
      setTourKind(nextTour);
      setTourStepIndex(0);
    }
  });

  return (
    <div class="dashboard-shell">
      {/* ── Sidebar ── */}
      <aside class="sidebar">
        <div class="sidebar-logo">
          <A href="/dashboard">
            <span class="logo-text">NXTGAUGE</span>
          </A>
        </div>

        <div class="sidebar-role-badge">
          <span class="role-badge">{rc()?.user?.active_role ?? 'Loading...'}</span>
        </div>

        <nav class="sidebar-nav">
          <For each={navItems()}>
            {(item) => (
              <A href={item.href} class="nav-item" activeClass="nav-item-active">
                <item.icon />
                <span>{item.label}</span>
              </A>
            )}
          </For>
        </nav>

        <div class="sidebar-footer">
          <button class="nav-item nav-item-logout" onClick={handleLogout}>
            <IconLogout />
            <span>Logout</span>
          </button>
        </div>
      </aside>

      {/* ── Main Content ── */}
      <div class="dashboard-main">
        {/* Top bar */}
        <header class="dashboard-topbar">
          <div class="topbar-title">&nbsp;</div>
          <div class="topbar-right">
            <Show when={shouldShowRoleSwitcher(roleOptions())}>
              <select
                class="input"
                style={{ width: '210px', 'font-size': '13px', padding: '8px 10px' }}
                value={activeRole()}
                disabled={switchingRole()}
                onChange={(e) => handleRoleSwitch(e.currentTarget.value)}
                title="Switch your dashboard view"
              >
                <For each={roleOptions()}>
                  {(role) => <option value={role}>{role.replaceAll('_', ' ')}</option>}
                </For>
              </select>
            </Show>
            <A href="/choose-role" class="btn btn-sm" style={{ 'text-decoration': 'none' }}>
              Choose What You Need
            </A>
            <A href="/dashboard/notifications" class="topbar-icon-btn" title="Notifications">
              <IconBell />
            </A>
            <div class="topbar-user">
              <span class="topbar-name">{rc()?.user?.full_name ?? 'User'}</span>
            </div>
          </div>
        </header>

        {/* Page content */}
        <main class="dashboard-content">
          <Show when={rc()} fallback={<div class="loading-spinner">Loading...</div>}>
            {props.children}
          </Show>
        </main>
      </div>

      <Show when={tourKind() && tourStep()}>
        <div class="tour-overlay">
          <section class="tour-modal" role="dialog" aria-modal="true" aria-label="Guided tour">
            <p class="tour-eyebrow">Guided Tour</p>
            <h3>{tourStep()?.title}</h3>
            <p>{tourStep()?.body}</p>
            <div class="tour-progress">
              <span style={{ width: `${((tourStepIndex() + 1) / (activeTourSteps().length || 1)) * 100}%` }} />
            </div>
            <div class="tour-actions">
              <button class="btn" onClick={finishTour}>Skip for now</button>
              <Show when={tourStepIndex() > 0}>
                <button class="btn" onClick={() => setTourStepIndex((current) => current - 1)}>Back</button>
              </Show>
              <button class="btn primary" onClick={nextTourStep}>
                {tourStepIndex() >= activeTourSteps().length - 1 ? 'Finish' : 'Next'}
              </button>
            </div>
          </section>
        </div>
      </Show>
    </div>
  );
}