import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
import { usePage, Link } from '@inertiajs/react'
import StudioLayout from '../../Layouts/StudioLayout'

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

function formatBytes(bytes) {
  if (!bytes) return '—'
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / 1048576).toFixed(1) + ' MB'
}

function getContentTypeVisualKey(slug) {
  const map = { skins: 'skins', wallpapers: 'wallpapers', photography: 'photography', other: 'other', members: 'members' }
  return map[slug] || 'other'
}

function buildCategoryTree(contentTypes) {
  return (contentTypes || []).map((ct) => ({
    ...ct,
    rootCategories: (ct.root_categories || []).map((rc) => ({
      ...rc,
      children: rc.children || [],
    })),
  }))
}

export default function StudioArtworkEdit() {
  const { props } = usePage()
  const { artwork, contentTypes: rawContentTypes } = props

  const contentTypes = useMemo(() => buildCategoryTree(rawContentTypes || []), [rawContentTypes])

  // --- State ---
  const [contentTypeId, setContentTypeId] = useState(artwork?.content_type_id || null)
  const [categoryId, setCategoryId] = useState(artwork?.parent_category_id || null)
  const [subCategoryId, setSubCategoryId] = useState(artwork?.sub_category_id || null)
  const [title, setTitle] = useState(artwork?.title || '')
  const [description, setDescription] = useState(artwork?.description || '')
  const [tags, setTags] = useState(() => (artwork?.tags || []).map((t) => ({ id: t.id, name: t.name, slug: t.slug || t.name })))
  const [isPublic, setIsPublic] = useState(artwork?.is_public ?? true)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)
  const [errors, setErrors] = useState({})

  // Tag picker state
  const [tagQuery, setTagQuery] = useState('')
  const [tagResults, setTagResults] = useState([])
  const [tagLoading, setTagLoading] = useState(false)
  const tagInputRef = useRef(null)
  const tagSearchTimer = useRef(null)

  // File replace state
  const fileInputRef = useRef(null)
  const [replacing, setReplacing] = useState(false)
  const [thumbUrl, setThumbUrl] = useState(artwork?.thumb_url_lg || artwork?.thumb_url || null)
  const [fileMeta, setFileMeta] = useState({
    name: artwork?.file_name || '—',
    size: artwork?.file_size || 0,
    width: artwork?.width || 0,
    height: artwork?.height || 0,
  })

  // --- Tag search ---
  const searchTags = useCallback(async (q) => {
    setTagLoading(true)
    try {
      const params = new URLSearchParams()
      if (q) params.set('q', q)
      const res = await fetch(`/api/studio/tags/search?${params.toString()}`, {
        headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
        credentials: 'same-origin',
      })
      const data = await res.json()
      setTagResults(data || [])
    } catch {
      setTagResults([])
    } finally {
      setTagLoading(false)
    }
  }, [])

  useEffect(() => {
    clearTimeout(tagSearchTimer.current)
    tagSearchTimer.current = setTimeout(() => searchTags(tagQuery), 250)
    return () => clearTimeout(tagSearchTimer.current)
  }, [tagQuery, searchTags])

  const toggleTag = (tag) => {
    setTags((prev) => {
      const exists = prev.find((t) => t.id === tag.id)
      return exists ? prev.filter((t) => t.id !== tag.id) : [...prev, { id: tag.id, name: tag.name, slug: tag.slug }]
    })
  }

  const removeTag = (id) => {
    setTags((prev) => prev.filter((t) => t.id !== id))
  }

  // --- Derived data ---
  const selectedCT = contentTypes.find((ct) => ct.id === contentTypeId) || null
  const rootCategories = selectedCT?.rootCategories || []
  const selectedRoot = rootCategories.find((c) => c.id === categoryId) || null
  const subCategories = selectedRoot?.children || []

  // --- Handlers ---
  const handleContentTypeChange = (id) => {
    setContentTypeId(id)
    setCategoryId(null)
    setSubCategoryId(null)
  }

  const handleCategoryChange = (id) => {
    setCategoryId(id)
    setSubCategoryId(null)
  }

  const handleSave = async () => {
    setSaving(true)
    setSaved(false)
    setErrors({})
    try {
      const payload = {
        title,
        description,
        is_public: isPublic,
        category_id: subCategoryId || categoryId || null,
        tags: tags.map((t) => t.slug || t.name),
      }
      const res = await fetch(`/api/studio/artworks/${artwork.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
        credentials: 'same-origin',
        body: JSON.stringify(payload),
      })
      if (res.ok) {
        setSaved(true)
        setTimeout(() => setSaved(false), 3000)
      } else {
        const data = await res.json()
        if (data.errors) setErrors(data.errors)
        console.error('Save failed:', data)
      }
    } catch (err) {
      console.error('Save failed:', err)
    } finally {
      setSaving(false)
    }
  }

  const handleFileReplace = async (e) => {
    const file = e.target.files?.[0]
    if (!file) return
    setReplacing(true)
    try {
      const fd = new FormData()
      fd.append('file', file)
      const res = await fetch(`/api/studio/artworks/${artwork.id}/replace-file`, {
        method: 'POST',
        headers: { Accept: 'application/json', 'X-CSRF-TOKEN': getCsrfToken() },
        credentials: 'same-origin',
        body: fd,
      })
      const data = await res.json()
      if (res.ok && data.thumb_url) {
        setThumbUrl(data.thumb_url)
        setFileMeta({ name: file.name, size: file.size, width: data.width || 0, height: data.height || 0 })
      } else {
        console.error('File replace failed:', data)
      }
    } catch (err) {
      console.error('File replace failed:', err)
    } finally {
      setReplacing(false)
      if (fileInputRef.current) fileInputRef.current.value = ''
    }
  }

  // --- Render ---
  return (
    <StudioLayout title="Edit Artwork">
      <Link
        href="/studio/artworks"
        className="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-6 transition-colors"
      >
        <i className="fa-solid fa-arrow-left" />
        Back to Artworks
      </Link>

      <div className="max-w-3xl space-y-8">
        {/* ── Uploaded Asset ── */}
        <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">Uploaded Asset</h3>
          <div className="flex items-start gap-5">
            {thumbUrl ? (
              <img src={thumbUrl} alt={title} className="w-32 h-32 rounded-xl object-cover bg-nova-800 flex-shrink-0" />
            ) : (
              <div className="w-32 h-32 rounded-xl bg-nova-800 flex items-center justify-center text-slate-600 flex-shrink-0">
                <i className="fa-solid fa-image text-2xl" />
              </div>
            )}
            <div className="flex-1 min-w-0 space-y-1">
              <p className="text-sm text-white font-medium truncate">{fileMeta.name}</p>
              <p className="text-xs text-slate-400">{formatBytes(fileMeta.size)}</p>
              {fileMeta.width > 0 && (
                <p className="text-xs text-slate-400">{fileMeta.width} × {fileMeta.height} px</p>
              )}
              <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileReplace} />
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                disabled={replacing}
                className="mt-2 inline-flex items-center gap-1.5 text-xs text-accent hover:text-accent/80 transition-colors disabled:opacity-50"
              >
                <i className={replacing ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-arrow-up-from-bracket'} />
                {replacing ? 'Replacing…' : 'Replace file'}
              </button>
            </div>
          </div>
        </section>

        {/* ── Content Type ── */}
        <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">Content Type</h3>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
            {contentTypes.map((ct) => {
              const active = ct.id === contentTypeId
              const vk = getContentTypeVisualKey(ct.slug)
              return (
                <button
                  key={ct.id}
                  type="button"
                  onClick={() => handleContentTypeChange(ct.id)}
                  className={`relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all cursor-pointer
                    ${active ? 'border-emerald-400/70 bg-emerald-400/15 shadow-lg shadow-emerald-400/10' : 'border-white/10 bg-white/5 hover:border-white/20'}`}
                >
                  <img src={`/gfx/mascot_${vk}.webp`} alt={ct.name} className="w-14 h-14 object-contain" />
                  <span className={`text-xs font-semibold ${active ? 'text-emerald-300' : 'text-slate-300'}`}>{ct.name}</span>
                  {active && (
                    <span className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center">
                      <i className="fa-solid fa-check text-[10px] text-white" />
                    </span>
                  )}
                </button>
              )
            })}
          </div>
        </section>

        {/* ── Category ── */}
        {rootCategories.length > 0 && (
          <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6 space-y-5">
            <div>
              <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Category</h3>
              <div className="flex flex-wrap gap-2">
                {rootCategories.map((cat) => {
                  const active = cat.id === categoryId
                  return (
                    <button
                      key={cat.id}
                      type="button"
                      onClick={() => handleCategoryChange(cat.id)}
                      className={`px-4 py-2 rounded-full text-sm font-medium border transition-all cursor-pointer
                        ${active ? 'border-purple-600/90 bg-purple-700/35 text-purple-200' : 'border-white/10 bg-white/5 text-slate-300 hover:border-white/20'}`}
                    >
                      {cat.name}
                    </button>
                  )
                })}
              </div>
            </div>

            {/* Subcategory */}
            {subCategories.length > 0 && (
              <div>
                <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3">Subcategory</h3>
                <div className="flex flex-wrap gap-2">
                  {subCategories.map((sub) => {
                    const active = sub.id === subCategoryId
                    return (
                      <button
                        key={sub.id}
                        type="button"
                        onClick={() => setSubCategoryId(active ? null : sub.id)}
                        className={`px-4 py-2 rounded-full text-sm font-medium border transition-all cursor-pointer
                          ${active ? 'border-cyan-600/90 bg-cyan-700/35 text-cyan-200' : 'border-white/10 bg-white/5 text-slate-300 hover:border-white/20'}`}
                      >
                        {sub.name}
                      </button>
                    )
                  })}
                </div>
              </div>
            )}
          </section>
        )}

        {/* ── Basics ── */}
        <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6 space-y-5">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-1">Basics</h3>

          <div>
            <label className="text-xs font-medium text-slate-400 mb-1.5 block">Title</label>
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              maxLength={120}
              className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
            />
            {errors.title && <p className="text-xs text-red-400 mt-1">{errors.title[0]}</p>}
          </div>

          <div>
            <label className="text-xs font-medium text-slate-400 mb-1.5 block">Description</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={5}
              className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 resize-y"
            />
            {errors.description && <p className="text-xs text-red-400 mt-1">{errors.description[0]}</p>}
          </div>
        </section>

        {/* ── Tags ── */}
        <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6 space-y-4">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400">Tags</h3>

          {/* Search input */}
          <div className="relative">
            <i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm pointer-events-none" />
            <input
              ref={tagInputRef}
              type="text"
              value={tagQuery}
              onChange={(e) => setTagQuery(e.target.value)}
              className="w-full py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
              style={{ paddingLeft: '2.5rem' }}
              placeholder="Search tags…"
            />
          </div>

          {/* Selected tag chips */}
          {tags.length > 0 && (
            <div className="flex flex-wrap gap-1.5">
              {tags.map((tag) => (
                <span
                  key={tag.id}
                  className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium bg-accent/20 text-accent"
                >
                  {tag.name}
                  <button
                    onClick={() => removeTag(tag.id)}
                    className="ml-0.5 w-4 h-4 rounded-full hover:bg-white/10 flex items-center justify-center"
                  >
                    <i className="fa-solid fa-xmark text-[10px]" />
                  </button>
                </span>
              ))}
            </div>
          )}

          {/* Results list */}
          <div className="max-h-48 overflow-y-auto sb-scrollbar space-y-0.5 rounded-xl bg-white/[0.02] border border-white/5 p-1">
            {tagLoading && (
              <div className="flex items-center justify-center py-4">
                <div className="w-5 h-5 border-2 border-accent/30 border-t-accent rounded-full animate-spin" />
              </div>
            )}

            {!tagLoading && tagResults.length === 0 && (
              <p className="text-center text-sm text-slate-500 py-4">
                {tagQuery ? 'No tags found' : 'Type to search tags'}
              </p>
            )}

            {!tagLoading &&
              tagResults.map((tag) => {
                const isSelected = tags.some((t) => t.id === tag.id)
                return (
                  <button
                    key={tag.id}
                    type="button"
                    onClick={() => toggleTag(tag)}
                    className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-all ${
                      isSelected
                        ? 'bg-accent/10 text-accent'
                        : 'text-slate-300 hover:bg-white/5 hover:text-white'
                    }`}
                  >
                    <span className="flex items-center gap-2">
                      <i
                        className={`fa-${isSelected ? 'solid fa-circle-check' : 'regular fa-circle'} text-xs ${
                          isSelected ? 'text-accent' : 'text-slate-500'
                        }`}
                      />
                      {tag.name}
                    </span>
                    <span className="text-xs text-slate-500">{tag.usage_count?.toLocaleString() ?? 0} uses</span>
                  </button>
                )
              })}
          </div>

          <p className="text-xs text-slate-500">{tags.length}/15 tags selected</p>
          {errors.tags && <p className="text-xs text-red-400">{errors.tags[0]}</p>}
        </section>

        {/* ── Visibility ── */}
        <section className="bg-nova-900/60 border border-white/10 rounded-2xl p-6">
          <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-4">Visibility</h3>
          <div className="flex items-center gap-6">
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" checked={isPublic} onChange={() => setIsPublic(true)} className="text-accent focus:ring-accent/50" />
              <span className="text-sm text-white">Published</span>
            </label>
            <label className="flex items-center gap-2 cursor-pointer">
              <input type="radio" checked={!isPublic} onChange={() => setIsPublic(false)} className="text-accent focus:ring-accent/50" />
              <span className="text-sm text-white">Draft</span>
            </label>
          </div>
        </section>

        {/* ── Actions ── */}
        <div className="flex items-center gap-3">
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-6 py-2.5 rounded-xl bg-accent hover:bg-accent/90 text-white font-semibold text-sm transition-all shadow-lg shadow-accent/25 disabled:opacity-50"
          >
            {saving ? 'Saving…' : 'Save changes'}
          </button>

          {saved && (
            <span className="text-sm text-emerald-400 flex items-center gap-1">
              <i className="fa-solid fa-check" /> Saved
            </span>
          )}

          <Link
            href={`/studio/artworks/${artwork?.id}/analytics`}
            className="ml-auto px-4 py-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 text-sm transition-all"
          >
            <i className="fa-solid fa-chart-line mr-2" />
            Analytics
          </Link>
        </div>
      </div>
    </StudioLayout>
  )
}