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

import { useState, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import RankingRuleForm from "./RankingRuleForm";
import RankingRuleTable from "./RankingRuleTable";
import type { RankingRuleRow } from "./RankingRuleTable";

interface EditRuleData {
  id: string; categoryId: string; countryId: string | null;
  freshnessWeight: number; sourceTrustWeight: number; sourceCountWeight: number;
  officialSourceBoost: number; impactWeight: number;
  duplicatePenalty: number; lowConfidencePenalty: number; clickbaitPenalty: number;
  maxStories: number; status: string;
}

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

interface Props {
  rules: RankingRuleRow[];
  categoryFilter: string | null;
  statusFilter: string | null;
  categories: SelectOption[];
  countries: SelectOption[];
  editRule: EditRuleData | null;
  successMsg: string | null;
  errorMsg: string | null;
}

export function RankingRulesPageClient({ rules, categoryFilter, statusFilter, categories, countries, editRule, successMsg, errorMsg }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [showAddForm, setShowAddForm] = useState(false);

  const navigate = useCallback((overrides: Record<string, string | null>) => {
    const params = new URLSearchParams(searchParams.toString());
    for (const [k, v] of Object.entries(overrides)) {
      if (v === null) params.delete(k); else params.set(k, v);
    }
    params.delete("success"); params.delete("error");
    setShowAddForm(false);
    router.push(`/admin/ranking-rules?${params.toString()}`, { scroll: false });
  }, [router, searchParams]);

  const handleEdit = useCallback((id: string) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("edit", id); params.delete("success"); params.delete("error");
    setShowAddForm(false);
    router.push(`/admin/ranking-rules?${params.toString()}`);
  }, [router, searchParams]);

  const handleAdd = useCallback(() => { navigate({ edit: null }); setShowAddForm(true); }, [navigate]);
  const handleCancel = useCallback(() => { navigate({ edit: null }); }, [navigate]);

  return (
    <div className="animate-fade-in space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Ranking Rules</h1>
        <p className="mt-1 text-sm text-body-muted">Configure per-category ranking weights — freshness, source trust, coverage breadth, official source boost, and penalties.</p>
      </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>}
      {(showAddForm || editRule) && (
        <RankingRuleForm editRule={editRule} categories={categories} countries={countries} onCancel={handleCancel} />
      )}
      <RankingRuleTable rules={rules} categoryFilter={categoryFilter} statusFilter={statusFilter} categories={categories} editingId={editRule?.id ?? null} onEdit={handleEdit} onAdd={handleAdd} />
    </div>
  );
}