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

import { useTransition } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import StoryTable from "./StoryTable";
import { generateAiForTop } from "./actions";
import type { StoryRow } from "./StoryTable";

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

interface Props {
  stories: StoryRow[];
  statusFilter: string | null;
  categoryFilter: string | null;
  countryFilter: string | null;
  page: number;
  totalPages: number;
  totalCount: number;
  successMsg?: string | null;
  errorMsg?: string | null;
  categoryOptions: SelectOption[];
  countryOptions: SelectOption[];
}

export function StoriesPageClient({ stories, statusFilter, categoryFilter, countryFilter, page, totalPages, totalCount, successMsg, errorMsg, categoryOptions, countryOptions }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isGenerating, startTransition] = useTransition();

  const handleGenerateTop = () => {
    if (!window.confirm("Generate AI analyses for all top-ranked stories that qualify? This may take a moment.")) return;
    startTransition(() => { generateAiForTop(); });
  };

  return (
    <div className="animate-fade-in space-y-6">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold">Story Clusters</h1>
          <p className="mt-1 text-sm text-body-muted">Grouped stories from clustered articles. View rank scores, source coverage, and detailed ranking breakdowns.</p>
        </div>
        <button type="button" onClick={handleGenerateTop} disabled={isGenerating} className="btn-primary shrink-0">
          {isGenerating ? "Generating…" : "🤖 Generate AI (Top)"}
        </button>
      </div>

      {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>}
      {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>}

      <StoryTable stories={stories} statusFilter={statusFilter} categoryFilter={categoryFilter} countryFilter={countryFilter} page={page} totalPages={totalPages} totalCount={totalCount} categoryOptions={categoryOptions} countryOptions={countryOptions} />
    </div>
  );
}