// =============================================================================
// HeadlineSift.com — Jobs Page Client Shell
// =============================================================================
"use client";

import JobTable from "./JobTable";
import type { JobRow } from "./JobTable";

// ============================================================================
// Types
// ============================================================================

interface JobsPageClientProps {
  jobs: JobRow[];
  statusFilter: string | null;
  typeFilter: string | null;
  page: number;
  totalPages: number;
  totalCount: number;
  successMsg: string | null;
  errorMsg: string | null;
}

// ============================================================================
// Component
// ============================================================================

export function JobsPageClient({
  jobs,
  statusFilter,
  typeFilter,
  page,
  totalPages,
  totalCount,
  successMsg,
  errorMsg,
}: JobsPageClientProps) {
  return (
    <div className="animate-fade-in space-y-6">
      {/* Page Header */}
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold">Jobs</h1>
          <p className="mt-1 text-sm text-body-muted">
            Monitor background jobs — fetching, clustering, ranking, AI analysis,
            and publishing. Jobs are created automatically by the scheduler.
          </p>
        </div>
      </div>

      {/* Success Banner */}
      {successMsg && (
        <div
          className="rounded-md bg-green-50 p-3 text-sm text-green-700 ring-1 ring-inset ring-green-200"
          role="alert"
        >
          {successMsg}
        </div>
      )}

      {/* Error Banner (from URL params) */}
      {errorMsg && !successMsg && (
        <div
          className="rounded-md bg-red-50 p-3 text-sm text-red-700 ring-1 ring-inset ring-red-200"
          role="alert"
        >
          {errorMsg}
        </div>
      )}

      {/* Jobs Table */}
      <JobTable
        jobs={jobs}
        statusFilter={statusFilter}
        typeFilter={typeFilter}
        page={page}
        totalPages={totalPages}
        totalCount={totalCount}
      />
    </div>
  );
}