import { ResolvedCell, cellProjectLabel } from "../lib/queries/plan";
import type { Project } from "../lib/queries/projects";

interface Props {
  cell: ResolvedCell | null;
  project: Project | null;
  categoryLabel: string;
}

// Purely presentational — renders the category/project chips and note for a
// single resolved plan cell. It has no interactive handlers of its own (the
// click target is the cell <button> in PlanGrid, which already applies the
// read-only styling/behaviour), so there is no read-only state to gate here.
export default function PlanRangeChips({
  cell,
  project,
  categoryLabel,
}: Props) {
  if (!cell) return null;
  // Prefer the server-embedded project label (always present). Fall back to
  // the looked-up `project` prop only if the cell predates the embed (stale
  // cache).
  const fallbackLabel = project
    ? project.project_number
      ? `${project.project_number} — ${project.name}`
      : project.name
    : null;
  const projectLabel = cellProjectLabel(cell) ?? fallbackLabel;
  const projectTitle = projectLabel ?? undefined;
  return (
    <div className="plan-chip-block">
      <div className="plan-chip-line">
        <span className="plan-chip">{categoryLabel}</span>
        {projectLabel && (
          <span className="plan-chip-project" title={projectTitle}>
            {projectLabel}
          </span>
        )}
      </div>
      {cell.note && <div className="plan-cell-note">{cell.note}</div>}
    </div>
  );
}