import { CircleCheck, CircleAlert } from 'lucide-react';

export default function ViewportV2Diagnostics({ snapshot }) {
  if (!snapshot) {
    return <div className="text-xs text-slate-500">Awaiting viewport telemetry…</div>;
  }

  const healthy =
    !snapshot.coreError &&
    snapshot.engineInstances === 1 &&
    snapshot.sceneInstances === 1 &&
    snapshot.canvasInstances === 1 &&
    snapshot.controlsAttached &&
    snapshot.canvasConnected &&
    snapshot.renderLoopActive &&
    snapshot.resizeObservers === 1 &&
    snapshot.prosthesisLoaded;

  const rows = [
    ['Viewport implementation', snapshot.implementation],
    ['Babylon version', snapshot.babylonVersion],
    ['Engine instances', snapshot.engineInstances],
    ['Scene instances', snapshot.sceneInstances],
    ['Canvas instances', snapshot.canvasInstances],
    ['Active camera', snapshot.activeCamera],
    ['Camera controls attached', snapshot.controlsAttached ? 'Yes' : 'No'],
    ['Canvas connected', snapshot.canvasConnected ? 'Yes' : 'No'],
    ['Canvas width', `${snapshot.canvasWidth}px`],
    ['Canvas height', `${snapshot.canvasHeight}px`],
    ['Render loop active', snapshot.renderLoopActive ? 'Yes' : 'No'],
    ['ResizeObservers', snapshot.resizeObservers],
    ['Mesh count', snapshot.meshCount],
    ['Active optional layers', (snapshot.activeLayers || []).join(', ') || 'None'],
    ['Procedural prosthesis', snapshot.prosthesisLoaded ? 'Loaded' : 'Unavailable'],
    ['Last core error', snapshot.coreError || 'None'],
    ['Last optional-layer error', snapshot.optionalError || 'None'],
    ['Build ID', snapshot.buildId],
  ];

  return (
    <div className="space-y-3">
      <div className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-semibold ${healthy ? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300' : 'border-amber-400/30 bg-amber-400/10 text-amber-300'}`}>
        {healthy ? <CircleCheck className="h-4 w-4" /> : <CircleAlert className="h-4 w-4" />}
        {healthy ? 'Healthy state' : 'Attention required'}
      </div>
      <dl className="divide-y divide-white/5 rounded-lg border border-white/10 bg-black/20">
        {rows.map(([k, v]) => (
          <div key={k} className="flex items-start justify-between gap-3 px-3 py-2 text-xs">
            <dt className="text-slate-500">{k}</dt>
            <dd className={`text-right font-medium ${v === 'No' || v === 'Unavailable' || v === 'None' ? 'text-slate-500' : 'text-slate-200'}`}>{String(v)}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}