import React, { useEffect, useState } from 'react'
import { Link, usePage } from '@inertiajs/react'
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: 'New Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
      { label: 'New Story', href: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
      { 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: 'Scheduled', href: '/studio/scheduled', icon: 'fa-solid fa-calendar-days' },
      { label: 'Calendar', href: '/studio/calendar', icon: 'fa-solid fa-calendar-range' },
      { 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: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
  { 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 }) {
  return (
    <Link
      href={item.href}
      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'
      }`}
    >
      <i className={`${item.icon} w-5 text-center text-base`} />
      <span>{item.label}</span>
    </Link>
  )
}

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 canManageNews = Boolean(props.auth?.user?.is_admin || props.auth?.user?.is_moderator)

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

    return {
      ...group,
      items: [
        ...group.items,
        { label: 'News', href: '/studio/news', icon: 'fa-solid fa-newspaper' },
      ],
    }
  })

  const quickCreateItems = (canManageNews
    ? [...baseQuickCreateItems, { label: 'News Article', href: '/studio/news/create', icon: 'fa-solid fa-newspaper' }]
    : baseQuickCreateItems
  ).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}
              navGroups={navGroups}
              quickCreateItems={quickCreateItems}
              isActive={isActive}
              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}
            navGroups={navGroups}
            quickCreateItems={quickCreateItems}
            isActive={isActive}
            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} studioGroups={studioGroups} 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, studioGroups, onContextChange }) {
  return (
    <label className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 px-3 py-2 text-sm text-slate-200">
      <i className="fa-solid fa-people-group text-sky-200" />
      <select
        value={currentGroup?.slug || ''}
        onChange={(event) => onContextChange?.(event.target.value)}
        className="bg-transparent text-sm text-white outline-none"
      >
        <option value="" className="bg-slate-950 text-white">Personal studio</option>
        {studioGroups.map((group) => (
          <option key={group.slug} value={group.slug} className="bg-slate-950 text-white">
            {group.name}
          </option>
        ))}
      </select>
    </label>
  )
}

function StudioSidebarContent({ currentGroup, studioGroups, navGroups, quickCreateItems, isActive, 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>
        {studioGroups.length > 0 ? (
          <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>
            <select
              value={currentGroup?.slug || ''}
              onChange={(event) => onContextChange?.(event.target.value)}
              className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2 text-sm text-white outline-none"
            >
              <option value="">Personal studio</option>
              {studioGroups.map((group) => (
                <option key={group.slug} value={group.slug}>{group.name}</option>
              ))}
            </select>
          </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>
        ))}
      </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>
    </>
  )
}