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

import { useTransition } from "react";
import RawArticleTable from "./RawArticleTable";
import { clusterAllAction } from "./actions";
import type { RawArticleRow } from "./RawArticleTable";

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

interface SelectOption {
  id: string;
  name: string;
}

interface RawArticlesPageClientProps {
  articles: RawArticleRow[];
  searchQuery: string;
  sourceFilter: string | null;
  countryFilter: string | null;
  categoryFilter: string | null;
  statusFilter: string | null;
  startDateFilter: string | null;
  endDateFilter: string | null;
  page: number;
  totalPages: number;
  totalCount: number;
  sourceOptions: SelectOption[];
  countryOptions: SelectOption[];
  categoryOptions: SelectOption[];
  successMsg: string | null;
  errorMsg: string | null;
}

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

export function RawArticlesPageClient({
  articles,
  searchQuery,
  sourceFilter,
  countryFilter,
  categoryFilter,
  statusFilter,
  startDateFilter,
  endDateFilter,
  page,
  totalPages,
  totalCount,
  sourceOptions,
  countryOptions,
  categoryOptions,
  successMsg,
  errorMsg,
}: RawArticlesPageClientProps) {
  const [isClustering, startClusterTransition] = useTransition();

  const handleClusterAll = () => {
    if (!window.confirm("Cluster all unclustered articles into story groups?")) return;
    startClusterTransition(() => {
      clusterAllAction();
    });
  };

  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">Raw Articles</h1>
          <p className="mt-1 text-sm text-body-muted">
            Unprocessed articles fetched from sources. Inspect the inbox before
            articles are clustered, deduplicated, and ranked.
          </p>
        </div>
        <button
          type="button"
          onClick={handleClusterAll}
          disabled={isClustering}
          className="btn-primary shrink-0"
        >
          {isClustering ? "Clustering…" : "Cluster All"}
        </button>
      </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 */}
      {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>
      )}

      {/* Articles Table */}
      <RawArticleTable
        articles={articles}
        searchQuery={searchQuery}
        sourceFilter={sourceFilter}
        countryFilter={countryFilter}
        categoryFilter={categoryFilter}
        statusFilter={statusFilter}
        startDateFilter={startDateFilter}
        endDateFilter={endDateFilter}
        page={page}
        totalPages={totalPages}
        totalCount={totalCount}
        sourceOptions={sourceOptions}
        countryOptions={countryOptions}
        categoryOptions={categoryOptions}
      />
    </div>
  );
}