import { useMemo } from "react";
import { DataTable } from "../../components/DataTable";
import { Section } from "../../components/Section";
import { joinSessions } from "../../lib/sessionJoin";
import type { AllData } from "../../types/data";

export function SessionExplorerSection({ data }: { data: AllData }) {
  const rows = useMemo(() => joinSessions(data), [data]);

  const columns = [
    { key: "session_id", label: "Session" },
    { key: "a01_interrupt_count", label: "Interrupts" },
    { key: "a01_session_recovered", label: "Recovered", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a02_max_tool_streak", label: "Tool Streak" },
    { key: "a02_user_intervention_rate", label: "Intervention", format: (v: unknown) => typeof v === "number" ? v.toFixed(2) : "\u2014" },
    { key: "a03_first_prompt_char_len", label: "Prompt Len" },
    { key: "a03_prompt_is_terse", label: "Terse", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a04_edit_count", label: "Edits" },
    { key: "a04_files_edited", label: "Files" },
    { key: "a04_has_git_commit", label: "Commit", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a04_has_test_run", label: "Tests", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a05_user_requested_undo", label: "Undo", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a07_total_turns", label: "Turns" },
    { key: "a07_session_duration_min", label: "Duration", format: (v: unknown) => typeof v === "number" ? `${v.toFixed(1)}m` : "\u2014" },
    { key: "a08_is_continuation", label: "Cont.", format: (v: unknown) => (v ? "Yes" : "\u2014") },
    { key: "a09_unique_tools_used", label: "Tools" },
    { key: "a09_dominant_tool_category", label: "Dom. Tool" },
    { key: "a10_shell_error_count", label: "Errors" },
    { key: "a10_error_cascade_count", label: "Cascades" },
  ];

  return (
    <Section id="session-explorer" title="Session Explorer" subtitle="Deep-dive into individual sessions">
      <div className="bg-white rounded-lg p-5 border border-slate-200">
        <DataTable columns={columns} data={rows} pageSize={25} />
      </div>
    </Section>
  );
}
