"use client";

import { useMemo } from "react";

function groupByModule(functions: string[]): Record<string, string[]> {
  const groups: Record<string, string[]> = {};
  for (const fn of functions) {
    const [module, funcName] = fn.split("::");
    if (!groups[module]) groups[module] = [];
    groups[module].push(funcName || fn);
  }
  return groups;
}

export function DeadFunctionList({ functions }: { functions: string[] }) {
  const grouped = useMemo(() => groupByModule(functions), [functions]);
  const modules = Object.keys(grouped).sort();

  if (functions.length === 0) {
    return (
      <p className="text-sm text-text-secondary">No dead functions detected.</p>
    );
  }

  return (
    <div className="space-y-4">
      {modules.map((module) => (
        <div key={module}>
          <h4 className="text-xs font-semibold tracking-wider text-text-secondary">
            {module}
          </h4>
          <ul className="mt-1 space-y-0.5">
            {grouped[module].sort().map((fn) => (
              <li
                key={fn}
                className="font-mono text-sm text-warning"
              >
                {fn}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}