import React, { useMemo, useState } from 'react'
import WorldChallengeSuggestionPanel from './WorldChallengeSuggestionPanel'
import WorldSuggestionCard from './WorldSuggestionCard'
import WorldSuggestionFilters from './WorldSuggestionFilters'

function SummaryPill({ label, value, tone = 'default' }) {
  const tones = {
    default: 'border-white/10 bg-white/[0.04] text-slate-200',
    sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
    emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
    amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
  }

  return (
    <div className={`rounded-2xl border px-4 py-3 ${tones[tone] || tones.default}`}>
      <div className="text-[11px] font-semibold uppercase tracking-[0.16em] opacity-80">{label}</div>
      <div className="mt-2 text-lg font-semibold">{value}</div>
    </div>
  )
}

function matchesFilters(item, filters) {
  if (filters.category && item.category_key !== filters.category) {
    return false
  }

  if (filters.type && item.entity_type !== filters.type) {
    return false
  }

  if (filters.section && !item.section_targets?.some((target) => target.value === filters.section)) {
    return false
  }

  if (filters.challengeOnly && !item.signals?.challenge_linked) {
    return false
  }

  if (filters.communityOnly && !item.signals?.community_submission) {
    return false
  }

  if (filters.recurringOnly && !item.signals?.recurring_history_informed) {
    return false
  }

  if (filters.analyticsOnly && !item.signals?.analytics_informed) {
    return false
  }

  return true
}

function sortItems(items, sortMode) {
  const list = Array.isArray(items) ? [...items] : []

  return list.sort((left, right) => {
    if (sortMode === 'newest') {
      return Number(right?.ranking?.freshness_timestamp || 0) - Number(left?.ranking?.freshness_timestamp || 0)
    }

    if (sortMode === 'performance') {
      return Number(right?.ranking?.performance_value || 0) - Number(left?.ranking?.performance_value || 0)
    }

    return Number(right?.score || 0) - Number(left?.score || 0)
  })
}

export default function WorldSuggestionsPanel({ suggestions, notice = null, worldExists = false, busyKey = '', onAddFeatured, onAddSection, onPin, onDismiss, onNotRelevant, onRestore }) {
  const [filters, setFilters] = useState({
    category: '',
    type: '',
    section: '',
    sort: 'relevance',
    challengeOnly: false,
    communityOnly: false,
    recurringOnly: false,
    analyticsOnly: false,
    showSuppressed: false,
  })

  const groups = Array.isArray(suggestions?.groups) ? suggestions.groups : []
  const pinnedItems = Array.isArray(suggestions?.pinned_items) ? suggestions.pinned_items : []
  const suppressedItems = Array.isArray(suggestions?.suppressed_items) ? suggestions.suppressed_items : []

  const visibleGroups = useMemo(() => groups
    .map((group) => ({
      ...group,
      items: sortItems((Array.isArray(group.items) ? group.items : []).filter((item) => matchesFilters(item, filters)), filters.sort),
    }))
    .filter((group) => group.items.length > 0 || filters.category === group.key), [filters, groups])

  const visiblePinned = useMemo(() => sortItems(pinnedItems.filter((item) => matchesFilters(item, filters)), filters.sort), [filters, pinnedItems])
  const visibleSuppressed = useMemo(() => sortItems(suppressedItems.filter((item) => matchesFilters(item, filters)), filters.sort), [filters, suppressedItems])

  if (!worldExists) {
    return (
      <div className="rounded-[28px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm leading-6 text-slate-300">
        Save the world once to unlock editorial suggestions. The suggestion service uses real world metadata, submissions, linked challenge context, and recurring-family signals, so it needs a persisted edition to score against.
      </div>
    )
  }

  return (
    <div className="grid gap-4">
      <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <h2 className="text-xl font-semibold text-white">World editorial suggestions</h2>
            <p className="mt-1 max-w-3xl text-sm leading-6 text-slate-400">Review scored candidate artworks, creators, collections, groups, stories, and challenge standouts without auto-publishing anything into the world.</p>
          </div>
          {suggestions?.generated_at ? <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">Refreshed {new Date(suggestions.generated_at).toLocaleString()}</div> : null}
        </div>

        <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
          <SummaryPill label="Ready now" value={suggestions?.summary?.available_count || 0} tone="emerald" />
          <SummaryPill label="Pinned" value={suggestions?.summary?.pinned_count || 0} tone="amber" />
          <SummaryPill label="Suppressed" value={suggestions?.summary?.suppressed_count || 0} />
          <SummaryPill label="Community signal" value={suggestions?.summary?.community_submission_count || 0} tone="sky" />
          <SummaryPill label="Analytics cues" value={suggestions?.summary?.analytics_signal_count || 0} tone="amber" />
        </div>

        {notice ? <div className="mt-4 rounded-[20px] border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm text-sky-100">{notice}</div> : null}
      </div>

      <WorldSuggestionFilters filters={suggestions?.filters || {}} value={filters} onChange={setFilters} />

      {visiblePinned.length > 0 ? (
        <div className="rounded-[28px] border border-amber-300/15 bg-amber-400/[0.05] p-5">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h3 className="text-lg font-semibold text-white">Pinned for later</h3>
              <p className="mt-1 text-sm leading-6 text-slate-300">These suggestions stay separate from the public world until you explicitly attach them.</p>
            </div>
            <div className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">{visiblePinned.length} pinned</div>
          </div>
          <div className="mt-4 grid gap-4">
            {visiblePinned.map((item) => (
              <WorldSuggestionCard
                key={item.key}
                item={item}
                busyKey={busyKey === item.key ? busyKey : ''}
                onAddFeatured={onAddFeatured}
                onAddSection={onAddSection}
                onPin={onPin}
                onDismiss={onDismiss}
                onNotRelevant={onNotRelevant}
                onRestore={onRestore}
              />
            ))}
          </div>
        </div>
      ) : null}

      {visibleGroups.length > 0 ? visibleGroups.map((group) => (
        group.key === 'challenge' ? (
          <WorldChallengeSuggestionPanel
            key={group.key}
            group={group}
            busyKey={busyKey}
            onAddFeatured={onAddFeatured}
            onAddSection={onAddSection}
            onPin={onPin}
            onDismiss={onDismiss}
            onNotRelevant={onNotRelevant}
            onRestore={onRestore}
          />
        ) : (
          <div key={group.key} className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
            <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
              <div>
                <h3 className="text-lg font-semibold text-white">{group.label}</h3>
                <p className="mt-1 text-sm leading-6 text-slate-400">{group.description}</p>
              </div>
              <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{group.items.length} ready</div>
            </div>

            <div className="mt-4 grid gap-4">
              {group.items.length > 0 ? group.items.map((item) => (
                <WorldSuggestionCard
                  key={item.key}
                  item={item}
                  busyKey={busyKey === item.key ? busyKey : ''}
                  onAddFeatured={onAddFeatured}
                  onAddSection={onAddSection}
                  onPin={onPin}
                  onDismiss={onDismiss}
                  onNotRelevant={onNotRelevant}
                  onRestore={onRestore}
                />
              )) : <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-5 text-sm text-slate-400">{group.empty_label}</div>}
            </div>
          </div>
        )
      )) : (
        <div className="rounded-[28px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm leading-6 text-slate-300">
          No suggestions match the current filters. Change the filters or save new world metadata to refresh the candidate pool.
        </div>
      )}

      {filters.showSuppressed ? (
        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h3 className="text-lg font-semibold text-white">Suppressed suggestions</h3>
              <p className="mt-1 text-sm leading-6 text-slate-400">Dismissed and not-relevant items stay out of the active queue until you restore them.</p>
            </div>
            <div className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{visibleSuppressed.length} hidden</div>
          </div>

          <div className="mt-4 grid gap-4">
            {visibleSuppressed.length > 0 ? visibleSuppressed.map((item) => (
              <WorldSuggestionCard
                key={item.key}
                item={item}
                busyKey={busyKey === item.key ? busyKey : ''}
                onAddFeatured={onAddFeatured}
                onAddSection={onAddSection}
                onPin={onPin}
                onDismiss={onDismiss}
                onNotRelevant={onNotRelevant}
                onRestore={onRestore}
              />
            )) : <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-5 text-sm text-slate-400">No suppressed suggestions match the current filters.</div>}
          </div>
        </div>
      ) : null}
    </div>
  )
}