import React from 'react'
import { Head, router } from '@inertiajs/react'
import AdminLayout from '../../Layouts/AdminLayout'

function badgeTone(status) {
  if (status === 'published') return 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100'
  if (status === 'scheduled') return 'border-sky-300/20 bg-sky-400/12 text-sky-100'
  if (status === 'pending_review') return 'border-amber-300/20 bg-amber-400/12 text-amber-100'
  if (status === 'archived' || status === 'rejected') return 'border-rose-300/20 bg-rose-400/12 text-rose-100'
  return 'border-white/10 bg-white/[0.06] text-slate-200'
}

function StatCard({ label, value }) {
  return (
    <div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5">
      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{label}</div>
      <div className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white">{Number(value || 0).toLocaleString()}</div>
    </div>
  )
}

export default function Stories({ title, stories, filters, stats, endpoints }) {
  const [state, setState] = React.useState(filters || { q: '', status: 'all' })

  React.useEffect(() => {
    setState(filters || { q: '', status: 'all' })
  }, [filters])

  function update(key, value) {
    setState((current) => ({ ...current, [key]: value }))
  }

  function applyFilters(event) {
    event.preventDefault()
    router.get(endpoints.index, state, { preserveState: true, replace: true, preserveScroll: true })
  }

  const items = stories?.data || []

  return (
    <AdminLayout title={title || 'Stories'} subtitle="Review creator stories from the moderation surface, without jumping back to the old CP layout.">
      <Head title="Moderation · Stories" />

      <section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_34%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">Moderation surface</p>
            <h1 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Stories</h1>
            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-300">Browse creator stories, filter by status, and jump straight to the public view when it exists.</p>
          </div>

          <div className="flex flex-wrap gap-3 text-xs uppercase tracking-[0.16em] text-slate-300">
            <span className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2">Page {stories?.current_page || 1} / {stories?.last_page || 1}</span>
            <span className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2">{Number(stories?.total || 0).toLocaleString()} stories</span>
          </div>
        </div>

        <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-6">
          <StatCard label="Total" value={stats?.total} />
          <StatCard label="Published" value={stats?.published} />
          <StatCard label="Draft" value={stats?.draft} />
          <StatCard label="Scheduled" value={stats?.scheduled} />
          <StatCard label="Pending review" value={stats?.pending_review} />
          <StatCard label="Archived" value={stats?.archived} />
        </div>

        <form onSubmit={applyFilters} className="mt-6 grid gap-3 lg:grid-cols-[2fr_1fr_auto]">
          <input
            value={state.q || ''}
            onChange={(event) => update('q', event.target.value)}
            placeholder="Search title, slug, or creator"
            className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none"
          />
          <select
            value={state.status || 'all'}
            onChange={(event) => update('status', event.target.value)}
            className="rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none"
          >
            <option value="all">All statuses</option>
            <option value="draft">Draft</option>
            <option value="pending_review">Pending review</option>
            <option value="scheduled">Scheduled</option>
            <option value="published">Published</option>
            <option value="archived">Archived</option>
            <option value="rejected">Rejected</option>
          </select>
          <button type="submit" className="rounded-2xl border border-white/10 bg-white/[0.06] px-5 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.1]">Apply</button>
        </form>
      </section>

      <div className="mt-8 grid gap-4 xl:grid-cols-2">
        {items.length === 0 ? (
          <div className="rounded-[28px] border border-white/10 bg-white/[0.04] px-6 py-12 text-center text-slate-300 xl:col-span-2">
            No stories matched the current filters.
          </div>
        ) : items.map((story) => (
          <article key={story.id} className="overflow-hidden rounded-[28px] border border-white/10 bg-[#08111d] shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
            <div className="grid gap-4 md:grid-cols-[180px_1fr]">
              <div className="aspect-[3/4] bg-black/30">
                {story.cover_url ? (
                  <img src={story.cover_url} alt={story.title} className="h-full w-full object-cover" />
                ) : (
                  <div className="flex h-full items-center justify-center text-white/20">
                    <i className="fa-solid fa-feather-pointed text-4xl" />
                  </div>
                )}
              </div>

              <div className="p-5">
                <div className="flex flex-wrap items-center gap-2">
                  <span className={`inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${badgeTone(story.status)}`}>
                    {String(story.status || 'draft').replaceAll('_', ' ')}
                  </span>
                  {story.creator ? (
                    <span className="inline-flex rounded-full border border-white/10 bg-white/[0.06] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-200">
                      @{story.creator.username}
                    </span>
                  ) : null}
                </div>

                <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{story.title}</h2>
                <p className="mt-2 text-sm text-slate-300">/{story.slug}{story.creator ? ` • ${story.creator.name}` : ''}</p>
                {story.excerpt ? <p className="mt-3 text-sm leading-6 text-slate-300">{story.excerpt}</p> : null}

                <div className="mt-4 flex flex-wrap gap-2 text-xs uppercase tracking-[0.16em] text-slate-400">
                  <span>{story.published_at ? new Date(story.published_at).toLocaleDateString() : 'Unpublished'}</span>
                  <span>{story.created_at ? new Date(story.created_at).toLocaleDateString() : '—'}</span>
                </div>

                <div className="mt-5 flex flex-wrap gap-2">
                  {story.open_url ? (
                    <a href={story.open_url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
                      Open
                    </a>
                  ) : (
                    <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">
                      No public view
                    </span>
                  )}
                </div>
              </div>
            </div>
          </article>
        ))}
      </div>

      {stories?.prev_page_url || stories?.next_page_url ? (
        <div className="mt-8 flex items-center justify-between gap-3 rounded-[24px] border border-white/10 bg-black/20 px-5 py-4">
          <div className="text-xs uppercase tracking-[0.16em] text-slate-400">
            Showing page {stories?.current_page || 1} of {stories?.last_page || 1}
          </div>
          <div className="flex gap-2">
            {stories?.prev_page_url ? (
              <button type="button" onClick={() => router.get(stories.prev_page_url, {}, { preserveScroll: true })} className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
                Previous
              </button>
            ) : null}
            {stories?.next_page_url ? (
              <button type="button" onClick={() => router.get(stories.next_page_url, {}, { preserveScroll: true })} className="rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-white transition hover:bg-white/[0.09]">
                Next
              </button>
            ) : null}
          </div>
        </div>
      ) : null}
    </AdminLayout>
  )
}
