import React, { useEffect, useState } from 'react'
import CollectionCard from '../collections/CollectionCard'
import CollectionEmptyState from '../collections/CollectionEmptyState'

function getCsrfToken() {
  if (typeof document === 'undefined') return ''
  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
}

async function deleteCollection(url) {
  const response = await fetch(url, {
    method: 'DELETE',
    credentials: 'same-origin',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': getCsrfToken(),
      'X-Requested-With': 'XMLHttpRequest',
    },
  })

  const payload = await response.json().catch(() => ({}))
  if (!response.ok) {
    throw new Error(payload?.message || 'Unable to delete collection.')
  }

  return payload
}

async function requestJson(url, { method = 'POST', body } = {}) {
  const response = await fetch(url, {
    method,
    credentials: 'same-origin',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': getCsrfToken(),
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: body ? JSON.stringify(body) : undefined,
  })

  const payload = await response.json().catch(() => ({}))
  if (!response.ok) {
    throw new Error(payload?.message || 'Unable to update collection presentation.')
  }

  return payload
}

const FILTERS = ['all', 'featured', 'smart', 'manual']

export default function TabCollections({ collections, isOwner, createUrl, reorderUrl, featuredUrl, featureLimit = 3 }) {
  const [items, setItems] = useState(Array.isArray(collections) ? collections : [])
  const [busyId, setBusyId] = useState(null)
  const [filter, setFilter] = useState('all')

  useEffect(() => {
    setItems(Array.isArray(collections) ? collections : [])
  }, [collections])

  async function handleDelete(collection) {
    if (!collection?.delete_url) return
    if (!window.confirm(`Delete "${collection.title}"? Artworks will remain untouched.`)) return

    setBusyId(collection.id)
    try {
      await deleteCollection(collection.delete_url)
      setItems((current) => current.filter((item) => item.id !== collection.id))
    } catch (error) {
      window.alert(error.message)
    } finally {
      setBusyId(null)
    }
  }

  async function handleToggleFeature(collection) {
    const url = collection?.is_featured ? collection?.unfeature_url : collection?.feature_url
    const method = collection?.is_featured ? 'DELETE' : 'POST'
    if (!url) return

    setBusyId(collection.id)
    try {
      const payload = await requestJson(url, { method })
      setItems((current) => current.map((item) => (
        item.id === collection.id
          ? {
              ...item,
              is_featured: payload?.collection?.is_featured ?? !item.is_featured,
              featured_at: payload?.collection?.featured_at ?? item.featured_at,
              updated_at: payload?.collection?.updated_at ?? item.updated_at,
            }
          : item
      )))
    } catch (error) {
      window.alert(error.message)
    } finally {
      setBusyId(null)
    }
  }

  async function handleMove(collection, direction) {
    const index = items.findIndex((item) => item.id === collection.id)
    const nextIndex = index + direction
    if (index < 0 || nextIndex < 0 || nextIndex >= items.length || !reorderUrl) return

    const next = [...items]
    const temp = next[index]
    next[index] = next[nextIndex]
    next[nextIndex] = temp
    setItems(next)

    try {
      const payload = await requestJson(reorderUrl, {
        method: 'POST',
        body: { collection_ids: next.map((item) => item.id) },
      })
      if (Array.isArray(payload?.collections)) {
        setItems(payload.collections)
      }
    } catch (error) {
      window.alert(error.message)
      setItems(Array.isArray(collections) ? collections : [])
    }
  }

  const featuredItems = items.filter((collection) => collection.is_featured)
  const smartItems = items.filter((collection) => collection.mode === 'smart')
  const filteredItems = items.filter((collection) => {
    if (filter === 'featured') return collection.is_featured
    if (filter === 'smart') return collection.mode === 'smart'
    if (filter === 'manual') return collection.mode !== 'smart'
    return true
  })

  return (
    <div
      id="tabpanel-collections"
      role="tabpanel"
      aria-labelledby="tab-collections"
      className="pt-6"
    >
      <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Collections</p>
          <h2 className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">Curated showcases from the gallery</h2>
          <p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-300">
            Collections now support featured presentation, smart rule-based curation, and richer profile storytelling.
          </p>
        </div>
        <div className="flex flex-wrap gap-3">
          {featuredUrl ? <a href={featuredUrl} className="inline-flex items-center gap-2 self-start rounded-2xl border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"><i className="fa-solid fa-compass fa-fw" />Browse Featured</a> : null}
          {isOwner && createUrl ? <a href={createUrl} className="inline-flex items-center gap-2 self-start rounded-2xl border border-sky-300/25 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15"><i className="fa-solid fa-plus fa-fw" />Create Collection</a> : null}
        </div>
      </div>

      <div className="mb-5 flex flex-wrap items-center gap-2">
        {FILTERS.map((value) => (
          <button
            key={value}
            type="button"
            onClick={() => setFilter(value)}
            className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition ${filter === value ? 'border-sky-300/25 bg-sky-400/10 text-sky-100' : 'border-white/10 bg-white/[0.04] text-slate-300 hover:bg-white/[0.07]'}`}
          >
            {value}
          </button>
        ))}
      </div>

      {items.length > 0 && featuredItems.length > 0 && filter === 'all' ? (
        <section className="mb-6 overflow-hidden rounded-[28px] border border-amber-300/15 bg-[linear-gradient(135deg,rgba(251,191,36,0.08),rgba(255,255,255,0.04),rgba(56,189,248,0.08))] p-5 shadow-[0_26px_70px_rgba(2,6,23,0.22)]">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Featured Collections</p>
              <h3 className="mt-2 text-xl font-semibold text-white">Premium profile showcases</h3>
            </div>
            {isOwner ? <p className="text-xs uppercase tracking-[0.18em] text-slate-300">{featuredItems.length}/{featureLimit} featured</p> : null}
          </div>
          <div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
            {featuredItems.map((collection, index) => (
              <CollectionCard
                key={`featured-${collection.id}`}
                collection={collection}
                isOwner={isOwner}
                onDelete={handleDelete}
                onToggleFeature={handleToggleFeature}
                onMoveUp={isOwner ? () => handleMove(collection, -1) : null}
                onMoveDown={isOwner ? () => handleMove(collection, 1) : null}
                canMoveUp={index > 0}
                canMoveDown={index < featuredItems.length - 1}
                busy={busyId === collection.id}
              />
            ))}
          </div>
        </section>
      ) : null}

      {isOwner && items.length > 0 && featuredItems.length === 0 ? <div className="mb-5 rounded-[24px] border border-white/10 bg-white/[0.04] px-5 py-4 text-sm text-slate-300">Feature your best collections to pin them at the top of your profile.</div> : null}
      {isOwner && items.length > 0 && smartItems.length === 0 ? <div className="mb-5 rounded-[24px] border border-white/10 bg-white/[0.04] px-5 py-4 text-sm text-slate-300">Create a smart collection from your tags or categories to keep a showcase updated automatically.</div> : null}

      {items.length === 0 ? (
        <CollectionEmptyState isOwner={isOwner} createUrl={createUrl} />
      ) : (
        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
          {filteredItems.map((collection, index) => (
            <CollectionCard
              key={collection.id}
              collection={collection}
              isOwner={isOwner}
              onDelete={handleDelete}
              onToggleFeature={handleToggleFeature}
              onMoveUp={isOwner ? () => handleMove(collection, -1) : null}
              onMoveDown={isOwner ? () => handleMove(collection, 1) : null}
              canMoveUp={index > 0}
              canMoveDown={index < filteredItems.length - 1}
              busy={busyId === collection.id}
            />
          ))}
        </div>
      )}
    </div>
  )
}