FeedbackTable.tsx

import { Link } from "react-router-dom";
import { formatFeedbackReportId } from "@/lib/feedbackFilters";
import type { FeedbackSubmission } from "@/types/feedback";
import { resolvedBelievability, resolvedRecommendationIntent, resolvedStripeIntent } from "@/types/feedback";

function formatValue(value: string | null | undefined) {
  return value ?? "—";
}

function shortenId(value: string | null | undefined) {
  if (!value) return "—";
  if (value.length <= 14) return value;
  return `${value.slice(0, 14)}…`;
}

function formatDate(value: string) {
  return new Intl.DateTimeFormat(undefined, {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date(value));
}

export function FeedbackTable({ feedback }: { feedback: FeedbackSubmission[] }) {
  if (feedback.length === 0) {
    return (
      <div className="card text-sm text-[var(--ink-muted)]">
        No feedback matches these filters.
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-lg border border-[var(--border)] bg-white">
      <table className="w-full min-w-[1400px] text-left text-sm">
        <thead className="border-b border-[var(--border)] bg-[var(--surface-muted)] text-xs uppercase text-[var(--ink-muted)]">
          <tr>
            <th className="px-4 py-3">Created</th>
            <th className="px-4 py-3">Email</th>
            <th className="px-4 py-3">Report ID</th>
            <th className="px-4 py-3">Visitor</th>
            <th className="px-4 py-3">Report type</th>
            <th className="px-4 py-3">Data path</th>
            <th className="px-4 py-3">Upload mode</th>
            <th className="px-4 py-3">Quality</th>
            <th className="px-4 py-3">Useful</th>
            <th className="px-4 py-3">Act</th>
            <th className="px-4 py-3">Data ease</th>
            <th className="px-4 py-3">Comment</th>
            <th className="px-4 py-3">Friction</th>
            <th className="px-4 py-3">View</th>
          </tr>
        </thead>
        <tbody>
          {feedback.map((item) => (
            <tr key={item.id} className="border-b border-[var(--border)] last:border-b-0">
              <td className="px-4 py-3 text-[var(--ink-muted)]">{formatDate(item.created_at)}</td>
              <td className="px-4 py-3">{formatValue(item.founder_email)}</td>
              <td className="max-w-xs truncate px-4 py-3" title={item.report_id}>
                {formatFeedbackReportId(item)}
              </td>
              <td className="px-4 py-3 font-mono text-xs">{shortenId(item.visitor_id)}</td>
              <td className="px-4 py-3">{formatValue(item.report_type)}</td>
              <td className="px-4 py-3">{formatValue(item.stripe_data_path)}</td>
              <td className="px-4 py-3">{formatValue(item.upload_mode)}</td>
              <td className="px-4 py-3">{formatValue(item.report_quality)}</td>
              <td className="px-4 py-3">{formatValue(item.usefulness)}</td>
              <td className="px-4 py-3">{formatValue(resolvedRecommendationIntent(item))}</td>
              <td className="px-4 py-3">{formatValue(item.data_path_ease)}</td>
              <td className="max-w-xs truncate px-4 py-3 text-[var(--ink-muted)]">
                {formatValue(item.comment)}
              </td>
              <td className="max-w-xs truncate px-4 py-3 text-[var(--ink-muted)]">
                {formatValue(item.data_path_friction)}
              </td>
              <td className="px-4 py-3">
                <Link className="font-medium text-[var(--accent)] underline" to={`/feedback/${item.id}`}>
                  Open
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}