const categoryLabels = {
  observations: "Direct Observations",
  reportedClaims: "Reported Claims",
  assumptions: "Unsupported Assumptions",
  entities: "Entities",
  transitions: "Transitions",
  expectedButMissing: "Expected But Missing",
  presentButUnexpected: "Present But Unexpected",
  contradictions: "Contradictions",
  openUncertainties: "Open Uncertainties",
};

const confidenceColor = {
  low: "text-red-600 bg-red-50 border-red-200",
  medium: "text-yellow-700 bg-yellow-50 border-yellow-200",
  high: "text-green-700 bg-green-50 border-green-200",
};

const ConfidenceBadge = ({ level }) => (
  <span className={`inline-block rounded-full border px-2 py-0.5 text-xs font-medium ${confidenceColor[level] || "text-gray-600 bg-gray-100"}`}>
    {level}
  </span>
);

function ItemList({ items, renderExtra }) {
  if (!items?.length) return <p className="text-sm italic text-gray-400">None identified</p>;
  
  return (
    <ul className="space-y-2">
      {items.map((item) => (
        <li key={item.id} className="rounded border border-gray-200 bg-white px-3 py-2 text-sm">
          <div className="flex items-center gap-2">
            <span className="font-mono text-xs text-gray-400">#{item.id}</span>
            <ConfidenceBadge level={item.confidence} />
          </div>
          <p className="mt-1">{item.description}</p>
          {renderExtra && renderExtra(item)}
        </li>
      ))}
    </ul>
  );
}

export default function ReconstructionView({ reconstruction, partial }) {
  if (partial) {
    return (
      <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
        ⚠ Partial result — some fields failed validation. Showing what was accepted.
      </div>
    );
  }

  const categories = Object.entries(categoryLabels).map(([key, label]) => ({
    key,
    label,
    items: reconstruction[key],
  }));

  return (
    <div className="space-y-1">
      <h2 className="mb-3 text-lg font-semibold">Reconstruction</h2>
      {categories.map(({ key, label, items }) => (
        <div key={key} className="mb-4 rounded border border-gray-200 bg-white p-4">
          <h3 className="mb-2 text-sm font-medium text-gray-600">{label}</h3>
          <ItemList items={items} />
        </div>
      ))}
    </div>
  );
}