import React from 'react'
import Breadcrumbs from '../../components/forum/Breadcrumbs'
import ThreadRow from '../../components/forum/ThreadRow'
import Pagination from '../../components/forum/Pagination'
import Button from '../../components/ui/Button'
import SeoHead from '../../components/seo/SeoHead'

export default function ForumCategory({ category, parentCategory = null, threads = [], pagination = {}, isAuthenticated = false, seo = {} }) {
  const name = category?.name ?? 'Category'
  const slug = category?.slug

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    ...(parentCategory ? [{ label: parentCategory.name, href: `/forum/category/${parentCategory.slug}` }] : []),
    { label: name },
  ]

  return (
    <>
      <SeoHead seo={seo} />
      <div className="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-5xl mx-auto">
      {/* Breadcrumbs */}
      <Breadcrumbs items={breadcrumbs} />

      {/* Header */}
      <div className="mt-5 mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Forum</p>
          <h1 className="text-3xl font-bold text-white leading-tight">{name}</h1>
          {category?.description && <p className="mt-2 text-sm text-white/50">{category.description}</p>}
        </div>
        {isAuthenticated && slug && (
          <a href={`/forum/${slug}/new`}>
            <Button variant="primary" size="sm"
              leftIcon={
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="12" y1="5" x2="12" y2="19" />
                  <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
              }
            >
              New topic
            </Button>
          </a>
        )}
      </div>

      {/* Thread list */}
      <section className="overflow-hidden rounded-2xl border border-white/[0.06] bg-nova-800/50 backdrop-blur">
        {/* Column header */}
        <div className="flex items-center gap-4 border-b border-white/[0.06] px-5 py-3">
          <span className="flex-1 text-xs font-semibold uppercase tracking-widest text-white/30">Topics</span>
          <span className="w-16 text-center text-xs font-semibold uppercase tracking-widest text-white/30">Replies</span>
        </div>

        {threads.length === 0 ? (
          <div className="px-5 py-12 text-center">
            <svg className="mx-auto mb-4 text-zinc-600" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
            </svg>
            <p className="text-sm text-zinc-500">No topics in this board yet.</p>
            {isAuthenticated && slug && (
              <a href={`/forum/${slug}/new`} className="mt-3 inline-block text-sm text-sky-300 hover:text-sky-200">
                Be the first to start a discussion →
              </a>
            )}
          </div>
        ) : (
          <div>
            {threads.map((thread, i) => (
              <ThreadRow key={thread.topic_id ?? thread.id ?? i} thread={thread} isFirst={i === 0} />
            ))}
          </div>
        )}
      </section>

      {/* Pagination */}
      {pagination?.last_page > 1 && (
        <div className="mt-6">
          <Pagination meta={pagination} />
        </div>
      )}
    </div>
    </>
  )
}
