'use client'
import React from 'react'
import { DocumentUpload } from '@/components/admin/DocumentUpload'
import { JobStatusList } from '@/components/admin/JobStatusList'
import { usePBCollection } from '@/lib/hooks/usePBCollection'
import type { SourceDocument } from '@/types'

export default function DocumentsPage() {
  const { items: documents, loading, refresh } = usePBCollection<SourceDocument>(
    'source_documents',
    { sort: '-created' },
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-6)' }}>
      <div>
        <h1
          style={{
            margin: '0 0 var(--s-2)',
            fontSize: 'var(--t-h3)',
            fontWeight: 700,
            color: 'var(--fg)',
          }}
        >
          Documents
        </h1>
        <p style={{ margin: 0, fontSize: 'var(--t-body)', color: 'var(--fg-muted)' }}>
          Upload source documents to populate the knowledge base.
        </p>
      </div>

      <DocumentUpload onSuccess={refresh} />

      <div>
        <h2
          style={{
            margin: '0 0 var(--s-4)',
            fontSize: 'var(--t-body)',
            fontWeight: 700,
            color: 'var(--fg)',
          }}
        >
          Document history
        </h2>
        {loading ? (
          <div style={{ color: 'var(--fg-muted)', fontSize: 'var(--t-body)' }}>Loading…</div>
        ) : (
          <JobStatusList documents={documents} />
        )}
      </div>
    </div>
  )
}
