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

export default function AdminStories({ stories }) {
  const items = stories?.data ?? []

  return (
    <AdminLayout title="Stories" subtitle="Review all stories submitted by creators">
      <Head title="Admin · Stories" />

      <div className="overflow-hidden rounded-2xl border border-white/[0.07] bg-white/[0.02]">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-white/[0.07] text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
                <th className="px-5 py-3.5">Title</th>
                <th className="px-5 py-3.5">Author</th>
                <th className="px-5 py-3.5">Status</th>
                <th className="px-5 py-3.5">Published</th>
                <th className="px-5 py-3.5 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/[0.04]">
              {items.length === 0 && (
                <tr><td colSpan={5} className="px-5 py-12 text-center text-slate-500">No stories found.</td></tr>
              )}
              {items.map((story) => (
                <tr key={story.id} className="transition hover:bg-white/[0.025]">
                  <td className="px-5 py-4 font-medium text-white">{story.title || <span className="italic text-slate-500">Untitled</span>}</td>
                  <td className="px-5 py-4 text-slate-400">{story.creator?.name ?? '—'}</td>
                  <td className="px-5 py-4">
                    <span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize ${
                      story.status === 'published' ? 'bg-teal-500/20 text-teal-300'
                      : story.status === 'pending_review' ? 'bg-amber-500/20 text-amber-300'
                      : 'bg-slate-500/20 text-slate-400'
                    }`}>{story.status?.replace('_', ' ') ?? 'draft'}</span>
                  </td>
                  <td className="px-5 py-4 text-slate-500">
                    {story.published_at ? new Date(story.published_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'}
                  </td>
                  <td className="px-5 py-4 text-right">
                    <a
                      href={`/studio/stories/${story.id}/edit`}
                      className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-white/70 transition hover:bg-white/[0.09]"
                    >
                      Edit
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {stories?.last_page > 1 && (
          <div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-4">
            <p className="text-xs text-slate-500">Showing {stories.from}–{stories.to} of {stories.total} stories</p>
            <div className="flex gap-1">
              {stories.links.map((link, i) => (
                link.url ? (
                  <button key={i} type="button" onClick={() => router.get(link.url, {}, { preserveScroll: true })}
                    className={`rounded-lg px-3 py-1.5 text-xs transition ${link.active ? 'bg-rose-500/20 font-semibold text-rose-300' : 'text-slate-500 hover:bg-white/[0.06] hover:text-white'}`}
                    dangerouslySetInnerHTML={{ __html: link.label }} />
                ) : (
                  <span key={i} className="rounded-lg px-3 py-1.5 text-xs text-slate-700" dangerouslySetInnerHTML={{ __html: link.label }} />
                )
              ))}
            </div>
          </div>
        )}
      </div>
    </AdminLayout>
  )
}
