FeedbackInboxPage.tsx

import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { adminFetch, ApiError } from "@/api/client";
import { AdminShell } from "@/components/admin/AdminShell";
import { FeedbackFilters } from "@/components/admin/FeedbackFilters";
import { FeedbackTable } from "@/components/admin/FeedbackTable";
import { SummaryCard } from "@/components/admin/SummaryCard";
import { applyFilters, formatRate } from "@/lib/feedbackFilters";
import { getAdminToken } from "@/lib/auth";
import type {
  FeedbackListResponse,
  FeedbackSubmission,
  FeedbackSummary,
  FeedbackSummaryResponse,
} from "@/types/feedback";

export function FeedbackInboxPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [summary, setSummary] = useState<FeedbackSummary | null>(null);
  const [feedback, setFeedback] = useState<FeedbackSubmission[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const filters = useMemo(
    () => ({
      report_id: searchParams.get("report_id") ?? undefined,
      believability: searchParams.get("believability") ?? undefined,
      recommendation_intent: searchParams.get("recommendation_intent") ?? undefined,
      stripe_connection_intent: searchParams.get("stripe_connection_intent") ?? undefined,
    }),
    [searchParams],
  );

  const filteredFeedback = useMemo(
    () => applyFilters(feedback, filters),
    [feedback, filters],
  );

  const load = useCallback(async () => {
    if (!getAdminToken()) {
      navigate("/login", { replace: true });
      return;
    }

    setLoading(true);
    setError(null);

    try {
      const [summaryResponse, feedbackResponse] = await Promise.all([
        adminFetch<FeedbackSummaryResponse>("/api/admin/feedback/summary"),
        adminFetch<FeedbackListResponse>("/api/admin/feedback"),
      ]);

      setSummary(summaryResponse.summary);
      setFeedback(feedbackResponse.feedback);
    } catch (loadError) {
      if (loadError instanceof ApiError && loadError.status === 401) {
        navigate("/login", { replace: true });
        return;
      }

      setError(loadError instanceof Error ? loadError.message : "Failed to load feedback.");
    } finally {
      setLoading(false);
    }
  }, [navigate]);

  useEffect(() => {
    void load();
  }, [load]);

  return (
    <AdminShell>
      <div className="space-y-8">
        <div>
          <p className="text-sm text-[var(--ink-muted)]">Validation</p>
          <h2 className="text-2xl font-semibold text-[var(--ink)]">Feedback Inbox</h2>
          <p className="mt-2 text-sm text-[var(--ink-muted)]">
            Review founder feedback from sample and generated reports, plus Stripe Connect early access signups.
          </p>
        </div>

        {loading ? (
          <p className="text-sm text-[var(--ink-muted)]">Loading feedback…</p>
        ) : error ? (
          <div className="card space-y-3">
            <p className="text-sm text-rose-800">{error}</p>
            <button type="button" className="btn-primary" onClick={() => void load()}>
              Try again
            </button>
          </div>
        ) : summary ? (
          <>
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
              <SummaryCard label="Total feedback" value={summary.total_feedback} />
              <SummaryCard label="Unique visitors" value={summary.unique_visitors} />
              <SummaryCard
                label="Useful rate"
                value={summary.usefulness.unique_useful_visitors}
                hint={formatRate(summary.usefulness.unique_useful_visitor_rate)}
              />
              <SummaryCard
                label="Would act rate"
                value={summary.action_intent.unique_yes_visitors}
                hint={formatRate(summary.action_intent.unique_yes_visitor_rate)}
              />
            </div>

            {summary.most_common_stripe_data_path ? (
              <p className="text-sm text-[var(--ink-muted)]">
                Most common data path:{" "}
                <span className="font-medium text-[var(--ink)]">{summary.most_common_stripe_data_path}</span>
              </p>
            ) : null}

            {summary.by_stripe_data_path.length > 0 ? (
              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                {summary.by_stripe_data_path.map((entry) => (
                  <SummaryCard
                    key={entry.stripe_data_path}
                    label={entry.stripe_data_path}
                    value={entry.count}
                    hint={`${formatRate(entry.useful_rate)} useful · ${formatRate(entry.easy_enough_rate)} easy enough`}
                  />
                ))}
              </div>
            ) : null}

            {summary.most_reviewed_scenario_id ? (
              <p className="text-sm text-[var(--ink-muted)]">
                Most reviewed scenario:{" "}
                <span className="font-medium text-[var(--ink)]">
                  {summary.most_reviewed_scenario_id}
                </span>
              </p>
            ) : null}

            <FeedbackFilters />

            {feedback.length === 0 ? (
              <div className="card text-sm text-[var(--ink-muted)]">No feedback yet.</div>
            ) : (
              <FeedbackTable feedback={filteredFeedback} />
            )}
          </>
        ) : null}
      </div>
    </AdminShell>
  );
}