import React, { useEffect, useState } from 'react'
import { Link, usePage } from '@inertiajs/react'
import NovaSelect from '../components/ui/NovaSelect'
import { studioModule, studioSurface, trackStudioEvent } from '../utils/studioEvents'

const baseNavGroups = [
  {
    label: 'Creator Studio',
    items: [
      { label: 'Overview', href: '/studio', icon: 'fa-solid fa-chart-line' },
      { label: 'Search', href: '/studio/search', icon: 'fa-solid fa-magnifying-glass' },
      { label: 'Groups', href: '/studio/groups', icon: 'fa-solid fa-people-group' },
    ],
  },
  {
    label: 'Create',
    items: [
      { label: 'New Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
      { label: 'Upload Queue', href: '/studio/upload-queue', icon: 'fa-solid fa-layer-group' },
      { label: 'New Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
      { label: 'New Story', href: '/studio/stories/create', icon: 'fa-solid fa-feather-pointed', fullLoad: true },
      { label: 'New Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
    ],
  },
  {
    label: 'Content',
    items: [
      { label: 'All Content', href: '/studio/content', icon: 'fa-solid fa-table-cells-large' },
      { label: 'Artworks', href: '/studio/artworks', icon: 'fa-solid fa-images' },
      { label: 'Cards', href: '/studio/cards', icon: 'fa-solid fa-id-card' },
      { label: 'Collections', href: '/studio/collections', icon: 'fa-solid fa-layer-group' },
      { label: 'Stories', href: '/studio/stories', icon: 'fa-solid fa-feather-pointed' },
    ],
  },
  {
    label: 'Library',
    items: [
      { label: 'Drafts', href: '/studio/drafts', icon: 'fa-solid fa-file-pen' },
      { label: 'Upload Queue', href: '/studio/upload-queue', icon: 'fa-solid fa-list-check' },
      { label: 'Scheduled', href: '/studio/scheduled', icon: 'fa-solid fa-calendar-days' },
      { label: 'Calendar', href: '/studio/calendar', icon: 'fa-solid fa-calendar-days' },
      { label: 'Archived', href: '/studio/archived', icon: 'fa-solid fa-box-archive' },
      { label: 'Assets', href: '/studio/assets', icon: 'fa-solid fa-photo-film' },
    ],
  },
  {
    label: 'Engagement',
    items: [
      { label: 'Inbox', href: '/studio/inbox', icon: 'fa-solid fa-inbox' },
      { label: 'Activity', href: '/studio/activity', icon: 'fa-solid fa-bell' },
      { label: 'Comments', href: '/studio/comments', icon: 'fa-solid fa-comments' },
      { label: 'Followers', href: '/studio/followers', icon: 'fa-solid fa-user-group' },
      { label: 'Challenges', href: '/studio/challenges', icon: 'fa-solid fa-trophy' },
    ],
  },
  {
    label: 'Insights',
    items: [
      { label: 'Analytics', href: '/studio/analytics', icon: 'fa-solid fa-chart-pie' },
      { label: 'Growth', href: '/studio/growth', icon: 'fa-solid fa-chart-line' },
    ],
  },
  {
    label: 'Creator',
    items: [
      { label: 'Profile', href: '/studio/profile', icon: 'fa-solid fa-id-card' },
      { label: 'Featured Content', href: '/studio/featured', icon: 'fa-solid fa-wand-magic-sparkles' },
      { label: 'Preferences', href: '/studio/preferences', icon: 'fa-solid fa-sliders' },
      { label: 'Studio Settings', href: '/studio/settings', icon: 'fa-solid fa-gear' },
    ],
  },
]

const baseQuickCreateItems = [
  { label: 'Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
  { label: 'Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
  { label: 'Story', href: '/studio/stories/create', icon: 'fa-solid fa-feather-pointed', fullLoad: true },
  { label: 'Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
]

const STUDIO_CONTEXT_STORAGE_KEY = 'sb.studio.last-context'
const RESTORABLE_STUDIO_PATHS = ['/studio', '/studio/artworks', '/studio/collections', '/studio/settings']

function supportsStudioContextRestore(pathname) {
  return RESTORABLE_STUDIO_PATHS.includes(pathname)
}

function studioRouteKeyForPath(pathname) {
  if (pathname === '/studio/artworks' || pathname.endsWith('/artworks')) return 'studio_artworks_url'
  if (pathname === '/studio/collections' || pathname.endsWith('/collections')) return 'studio_collections_url'
  if (pathname === '/studio/settings' || pathname.endsWith('/settings')) return 'studio_settings_url'
  if (pathname.endsWith('/members')) return 'studio_members_url'
  if (pathname.endsWith('/invitations')) return 'studio_invitations_url'

  return 'studio_url'
}

function nestedRouteKeyFor(topLevelRouteKey) {
  return topLevelRouteKey.replace(/_url$/, '')
}

function groupStudioUrlForPath(group, pathname) {
  if (!group) return '/studio'

  const routeKey = studioRouteKeyForPath(pathname)
  const nestedRouteKey = nestedRouteKeyFor(routeKey)

  return group[routeKey] || group.urls?.[nestedRouteKey] || group.studio_url || group.urls?.studio || '/studio'
}

function personalStudioUrlForPath(pathname) {
  if (pathname === '/studio/artworks' || pathname.endsWith('/artworks')) return '/studio/artworks'
  if (pathname === '/studio/collections' || pathname.endsWith('/collections')) return '/studio/collections'
  if (pathname === '/studio/settings' || pathname.endsWith('/settings')) return '/studio/settings'

  return '/studio'
}

function persistStudioContext(slug) {
  if (typeof window === 'undefined') return

  try {
    window.sessionStorage.setItem(STUDIO_CONTEXT_STORAGE_KEY, slug || '')
  } catch {
    // Ignore storage failures so Studio navigation keeps working.
  }
}

function readPersistedStudioContext() {
  if (typeof window === 'undefined') return null

  try {
    return window.sessionStorage.getItem(STUDIO_CONTEXT_STORAGE_KEY)
  } catch {
    return null
  }
}

function navigateToStudioUrl(targetUrl) {
  if (typeof window === 'undefined' || !targetUrl) return

  if (typeof window.location?.assign === 'function') {
    window.location.assign(targetUrl)
    return
  }

  window.location.href = targetUrl
}

function NavLink({ item, active }) {
  const className = `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ${
    active
      ? 'bg-accent/20 text-accent shadow-sm shadow-accent/10'
      : 'text-slate-400 hover:text-white hover:bg-white/5'
  }`

  if (item.fullLoad) {
    return (
      <a href={item.href} className={className}>
        <i className={`${item.icon} w-5 text-center text-base`} />
        <span>{item.label}</span>
      </a>
    )
  }

  return (
    <Link
      href={item.href}
      className={className}
    >
      <i className={`${item.icon} w-5 text-center text-base`} />
      <span>{item.label}</span>
    </Link>
  )
}

function studioContextSummary(option) {
  if (!option) return ''
  if (option.kind === 'personal') return option.description || 'Your creator workspace'

  return [option.roleLabel, option.description].filter(Boolean).join(' · ')
}

function studioContextInitials(label) {
  const initials = String(label || '')
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((segment) => segment.charAt(0).toUpperCase())
    .join('')

  return initials || 'SB'
}

function StudioContextAvatar({ option, size = 'md' }) {
  const sizeClass = size === 'lg' ? 'h-11 w-11 text-sm' : 'h-9 w-9 text-xs'

  if (option?.avatarUrl) {
    return (
      <img
        src={option.avatarUrl}
        alt={option.label}
        className={`${sizeClass} rounded-2xl object-cover ring-1 ring-white/10 shadow-[0_10px_24px_rgba(15,23,42,0.25)]`}
      />
    )
  }

  const toneClass = option?.kind === 'personal'
    ? 'border-sky-300/25 bg-sky-300/12 text-sky-100'
    : 'border-amber-300/20 bg-amber-300/10 text-amber-100'

  return (
    <span className={`${sizeClass} inline-flex items-center justify-center rounded-2xl border font-semibold uppercase tracking-[0.16em] ${toneClass}`}>
      {option?.kind === 'personal' ? <i className="fa-solid fa-user text-[12px]" /> : studioContextInitials(option?.label)}
    </span>
  )
}

function StudioContextOptionContent({ option, expanded = false }) {
  return (
    <div className="flex min-w-0 items-center gap-3">
      <StudioContextAvatar option={option} size={expanded ? 'lg' : 'md'} />
      <div className="min-w-0 flex-1">
        <div className={`truncate font-semibold ${expanded ? 'text-[15px]' : 'text-sm'} text-white`}>
          {option.label}
        </div>
        <div className="truncate text-xs text-slate-400">
          {studioContextSummary(option)}
        </div>
      </div>
      {expanded && option.kind === 'group' && option.status ? (
        <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-300">
          {String(option.status).replace(/_/g, ' ')}
        </span>
      ) : null}
    </div>
  )
}

function buildStudioContextOptions(currentGroup, studioGroups, userLabel, userAvatarUrl) {
  return [
    {
      value: '',
      label: 'Personal studio',
      description: userLabel || 'Your creator workspace',
      avatarUrl: userAvatarUrl || null,
      group: 'Workspace',
      kind: 'personal',
    },
    ...studioGroups.map((group) => ({
      value: group.slug,
      label: group.name,
      description: Number(group.artworks_count || 0) > 0
        ? `${Number(group.artworks_count || 0).toLocaleString()} artwork${Number(group.artworks_count || 0) === 1 ? '' : 's'}`
        : 'Group workspace',
      roleLabel: group.role_label || 'Member',
      status: group.status,
      avatarUrl: group.avatar_url || null,
      group: 'Groups',
      kind: 'group',
      isCurrent: currentGroup?.slug === group.slug,
    })),
  ]
}

export default function StudioLayout({ children, title, subtitle, actions }) {
  const { url, props } = usePage()
  const [mobileOpen, setMobileOpen] = useState(false)
  const [createOpen, setCreateOpen] = useState(false)
  const pathname = url.split('?')[0]
  const studioGroups = Array.isArray(props.studio_groups) ? props.studio_groups : []
  const currentGroup = props.studioGroup || null
  const userLabel = props.auth?.user?.name || props.auth?.user?.username || 'Your creator workspace'
  const userAvatarUrl = props.auth?.user?.avatar_url || null
  const canManageNews = Boolean(props.auth?.user?.is_admin || props.auth?.user?.is_moderator)
  const canManageWorlds = canManageNews
  const isStaff = Boolean(props.auth?.user?.is_staff)
  const studioContextOptions = buildStudioContextOptions(currentGroup, studioGroups, userLabel, userAvatarUrl)

  const navGroups = baseNavGroups.map((group) => {
    if ((!canManageNews && !canManageWorlds) || group.label !== 'Content') {
      return group
    }

    const extraItems = []

    if (canManageNews) {
      extraItems.push({ label: 'News', href: '/studio/news', icon: 'fa-solid fa-newspaper' })
    }

    if (canManageWorlds) {
      extraItems.push({ label: 'Worlds', href: '/studio/worlds', icon: 'fa-solid fa-globe' })
    }

    return {
      ...group,
      items: [...group.items, ...extraItems],
    }
  })

  const quickCreatePool = [...baseQuickCreateItems]

  if (canManageNews) {
    quickCreatePool.push({ label: 'News Article', href: '/studio/news/create', icon: 'fa-solid fa-newspaper' })
  }

  if (canManageWorlds) {
    quickCreatePool.push({ label: 'World', href: '/studio/worlds/create', icon: 'fa-solid fa-globe' })
  }

  const quickCreateItems = quickCreatePool.map((item) => {
    if (currentGroup?.urls && item.label === 'Artwork') {
      return { ...item, href: currentGroup.urls?.studio_artworks ? `/upload?group=${currentGroup.slug}` : item.href }
    }

    if (currentGroup?.urls && item.label === 'Collection') {
      return { ...item, href: `/settings/collections/create?group=${currentGroup.slug}` }
    }

    return item
  })

  useEffect(() => {
    const moduleKey = studioModule(pathname)
    const surface = studioSurface(pathname)

    trackStudioEvent('studio_opened', {
      surface,
      module: moduleKey,
    })

    trackStudioEvent('studio_module_opened', {
      surface,
      module: moduleKey,
    })
  }, [pathname])

  useEffect(() => {
    if (!currentGroup?.slug) return

    persistStudioContext(currentGroup.slug)
  }, [currentGroup?.slug])

  useEffect(() => {
    if (currentGroup || !supportsStudioContextRestore(pathname)) return

    const storedSlug = readPersistedStudioContext()
    if (!storedSlug) return

    const nextGroup = studioGroups.find((group) => group.slug === storedSlug)
    if (!nextGroup) {
      persistStudioContext('')
      return
    }

    const targetUrl = groupStudioUrlForPath(nextGroup, pathname)

    if (targetUrl && targetUrl !== pathname) {
      navigateToStudioUrl(targetUrl)
    }
  }, [currentGroup, pathname, studioGroups])

  const isActive = (href) => {
    if (href === '/studio') return pathname === '/studio'
    return pathname.startsWith(href)
  }

  const handleQuickCreateClick = (item) => {
    trackStudioEvent('studio_quick_create_used', {
      surface: studioSurface(pathname),
      module: item.label.toLowerCase(),
      meta: {
        href: item.href,
        label: item.label,
      },
    })
  }

  const handleContextChange = (nextSlug) => {
    persistStudioContext(nextSlug)

    const nextGroup = studioGroups.find((group) => group.slug === nextSlug)
    const targetUrl = nextGroup
      ? groupStudioUrlForPath(nextGroup, pathname)
      : personalStudioUrlForPath(pathname)

    if (targetUrl !== pathname) {
      navigateToStudioUrl(targetUrl)
    }
  }

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.12),_transparent_30%),radial-gradient(circle_at_bottom_right,_rgba(34,197,94,0.12),_transparent_35%),linear-gradient(180deg,_#06101d_0%,_#020617_45%,_#02040a_100%)]">
      <div className="sticky top-16 z-30 border-b border-white/10 bg-slate-950/80 backdrop-blur-xl lg:hidden">
        <div className="flex items-center justify-between px-4 py-3">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
            <h1 className="text-lg font-bold text-white">{title || 'Creator Studio'}</h1>
          </div>
          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className="rounded-full border border-white/10 p-2 text-slate-400 hover:text-white"
            aria-label="Toggle navigation"
          >
            <i className={`fa-solid ${mobileOpen ? 'fa-xmark' : 'fa-bars'} text-xl`} />
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden" onClick={() => setMobileOpen(false)}>
          <nav
            className="absolute left-0 top-0 bottom-0 w-80 overflow-y-auto border-r border-white/10 bg-slate-950 p-4 pt-20"
            onClick={(event) => event.stopPropagation()}
          >
            <StudioSidebarContent
              currentGroup={currentGroup}
              studioGroups={studioGroups}
              studioContextOptions={studioContextOptions}
              navGroups={navGroups}
              quickCreateItems={quickCreateItems}
              isActive={isActive}
              isStaff={isStaff}
              onNavigate={() => setMobileOpen(false)}
              onQuickCreate={handleQuickCreateClick}
              onContextChange={handleContextChange}
            />
          </nav>
        </div>
      )}

      <div className="flex">
        <aside className="sticky top-16 hidden min-h-[calc(100vh-4rem)] w-72 self-start border-r border-white/10 bg-slate-950/55 p-4 pt-6 backdrop-blur-xl lg:flex lg:flex-col">
          <StudioSidebarContent
            currentGroup={currentGroup}
            studioGroups={studioGroups}
            studioContextOptions={studioContextOptions}
            navGroups={navGroups}
            quickCreateItems={quickCreateItems}
            isActive={isActive}
            isStaff={isStaff}
            onQuickCreate={handleQuickCreateClick}
            onContextChange={handleContextChange}
          />
        </aside>

        <main className="min-w-0 flex-1 px-4 pb-10 pt-4 lg:px-8 lg:pt-6">
          <section className="mb-6 rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.12),_transparent_28%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_35%),linear-gradient(135deg,_rgba(15,23,42,0.84),_rgba(2,6,23,0.95))] p-5 shadow-[0_22px_70px_rgba(2,6,23,0.32)] lg:p-6">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
              <div className="max-w-3xl">
                <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
                {title && <h1 className="mt-2 text-3xl font-semibold text-white lg:text-4xl">{title}</h1>}
                {subtitle && <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{subtitle}</p>}
                {currentGroup ? <p className="mt-4 inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-sky-100">Group context: {currentGroup.name}</p> : null}
              </div>

              <div className="flex flex-wrap items-center gap-3 lg:justify-end">
                {studioGroups.length > 0 ? <ContextSwitcher currentGroup={currentGroup} studioContextOptions={studioContextOptions} onContextChange={handleContextChange} /> : null}
                {actions}
                <div className="relative">
                  <button
                    type="button"
                    onClick={() => setCreateOpen((current) => !current)}
                    className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15"
                  >
                    <i className="fa-solid fa-plus" />
                    Create New
                  </button>
                  {createOpen && (
                    <div className="absolute right-0 top-[calc(100%+0.75rem)] z-20 min-w-[220px] rounded-[24px] border border-white/10 bg-slate-950/95 p-2 shadow-[0_18px_40px_rgba(2,6,23,0.5)] backdrop-blur-xl">
                      {quickCreateItems.map((item) => (
                        <a
                          key={item.href}
                          href={item.href}
                          onClick={() => handleQuickCreateClick(item)}
                          className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm text-slate-200 transition hover:bg-white/[0.06] hover:text-white"
                        >
                          <i className={`${item.icon} w-5 text-center text-sky-200`} />
                          <span>New {item.label}</span>
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </section>

          {children}
        </main>
      </div>
    </div>
  )
}

function ContextSwitcher({ currentGroup, studioContextOptions, onContextChange }) {
  return (
    <div className="inline-flex items-center gap-3 rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.88),rgba(7,14,28,0.94))] p-2 pr-3 text-sm text-slate-200 shadow-[0_18px_40px_rgba(2,6,23,0.24)]">
      <span className="inline-flex h-11 w-11 items-center justify-center rounded-[20px] border border-sky-300/14 bg-sky-300/10 text-sky-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
        <i className="fa-solid fa-people-group text-sm" />
      </span>
      <NovaSelect
        value={currentGroup?.slug || ''}
        onChange={(value) => onContextChange?.(value)}
        options={studioContextOptions}
        searchable={true}
        searchPlaceholder="Search studios or groups…"
        renderOption={(option) => <StudioContextOptionContent option={option} expanded />}
        renderValue={(option) => <StudioContextOptionContent option={option} />}
        className="min-w-[280px] border-white/10 bg-white/[0.03] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] hover:border-white/20"
      />
    </div>
  )
}

function StudioSidebarContent({ currentGroup, studioContextOptions, navGroups, quickCreateItems, isActive, isStaff, onNavigate, onQuickCreate, onContextChange }) {
  return (
    <>
      <div className="mb-6 rounded-[26px] border border-white/10 bg-white/[0.04] p-4">
        <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Skinbase Nova</p>
        <h2 className="mt-2 text-xl font-semibold text-white">Creator Studio</h2>
        <p className="mt-2 text-sm leading-6 text-slate-400">Create, manage, and grow from one modular workspace built for every creator surface.</p>
        {studioContextOptions.length > 1 ? (
          <div className="mt-4 rounded-2xl border border-white/10 bg-black/20 p-3">
            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Context</p>
            <NovaSelect
              value={currentGroup?.slug || ''}
              onChange={(value) => onContextChange?.(value)}
              className="mt-2"
              options={studioContextOptions}
              searchable={true}
              searchPlaceholder="Search studios or groups…"
              renderOption={(option) => <StudioContextOptionContent option={option} expanded />}
              renderValue={(option) => <StudioContextOptionContent option={option} />}
            />
          </div>
        ) : null}
      </div>

      <nav className="flex-1 space-y-5" onClick={onNavigate}>
        {navGroups.map((group) => (
          <div key={group.label}>
            <h3 className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{group.label}</h3>
            <div className="space-y-1">
              {group.items.map((item) => (
                <NavLink key={item.href} item={item} active={isActive(item.href)} />
              ))}
            </div>
          </div>
        ))}
        {isStaff && (
          <div>
            <h3 className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.22em] text-rose-500/70">Administration</h3>
            <div className="space-y-1">
              <a
                href="/moderation"
                className="flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-medium text-rose-300/70 transition hover:bg-rose-500/10 hover:text-rose-300"
              >
                <i className="fa-solid fa-shield-halved w-5 text-center text-base" />
                <span>Admin Panel</span>
              </a>
            </div>
          </div>
        )}
      </nav>

      <div className="mt-6 rounded-[24px] border border-white/10 bg-[linear-gradient(135deg,_rgba(15,23,42,0.95),_rgba(12,74,110,0.4))] p-4">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-100/70">Quick create</p>
        <div className="mt-3 grid gap-2">
          {quickCreateItems.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="inline-flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 transition hover:border-white/20 hover:bg-white/[0.06]"
              onClick={() => {
                onQuickCreate?.(item)
                onNavigate?.()
              }}
            >
              <i className={`${item.icon} w-5 text-center text-sky-200`} />
              <span>New {item.label}</span>
            </a>
          ))}
        </div>
      </div>
    </>
  )
}