interface MeshStats {
  vertices: number;
  faces: number;
  edges: number;
  components: number;
  boundaryEdges: number;
  holes: number;
  isClosed: boolean;
  eulerNumber: number;
  genus: number;
  area: number;
  volume: number;
  nonManifoldEdges: number;
  nonManifoldVertices: number;
  degenerateFaces: number;
  duplicateVertices: number;
  unreferencedVertices: number;
}

interface MeshStatsDialogProps {
  stats: MeshStats;
  meshName: string;
  onAutoRepair: () => void;
  onClose: () => void;
}

function StatusIcon({ ok }: { ok: boolean }) {
  return <span>{ok ? '✅' : '⚠️'}</span>;
}

const rowStyle: React.CSSProperties = {
  display: 'flex', justifyContent: 'space-between', padding: '2px 0',
};

export function MeshStatsDialog({ stats, meshName, onAutoRepair, onClose }: MeshStatsDialogProps) {
  return (
    <div style={{
      position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(0,0,0,0.5)', zIndex: 200,
    }}>
      <div
        data-testid="mesh-stats-dialog"
        style={{
          background: '#2d2d2d', border: '1px solid #555', borderRadius: 8,
          padding: 16, width: 360, maxHeight: '80vh', overflowY: 'auto',
          color: '#ccc', fontSize: 12, fontFamily: 'monospace',
        }}
      >
        <h3 style={{ margin: '0 0 12px', fontSize: 14 }}>Mesh Statistics: {meshName}</h3>

        <div style={{ marginBottom: 8, borderBottom: '1px solid #444', paddingBottom: 8 }}>
          <div style={{ fontWeight: 'bold', marginBottom: 4 }}>Geometry</div>
          <div style={rowStyle}><span data-testid="stats-vertices">Vertices:</span><span>{stats.vertices.toLocaleString()}</span></div>
          <div style={rowStyle}><span>Faces:</span><span>{stats.faces.toLocaleString()}</span></div>
          <div style={rowStyle}><span>Edges:</span><span>{stats.edges.toLocaleString()}</span></div>
          <div style={rowStyle}><span>Components:</span><span>{stats.components}</span></div>
          <div style={rowStyle}><span>Surface Area:</span><span>{stats.area.toFixed(3)}</span></div>
          <div style={rowStyle}><span>Volume:</span><span>{stats.volume.toFixed(3)}</span></div>
        </div>

        <div style={{ marginBottom: 8, borderBottom: '1px solid #444', paddingBottom: 8 }}>
          <div style={{ fontWeight: 'bold', marginBottom: 4 }}>Topology</div>
          <div style={rowStyle} data-testid="stats-closed"><span>Mesh is:</span><span>{stats.isClosed ? '✅ Closed' : '❌ Open'}</span></div>
          <div style={rowStyle} data-testid="stats-euler"><span>Euler Number:</span><span>{stats.eulerNumber}</span></div>
          <div style={rowStyle}><span>Genus:</span><span>{stats.genus}</span></div>
          <div style={rowStyle}><span>Boundary Edges:</span><span>{stats.boundaryEdges}</span></div>
          <div style={rowStyle} data-testid="stats-holes"><span>Holes:</span><span>{stats.holes}</span></div>
        </div>

        <div style={{ marginBottom: 12 }}>
          <div style={{ fontWeight: 'bold', marginBottom: 4 }}>Issues</div>
          <div style={rowStyle} data-testid="stats-nm-edges"><span>Non-manifold Edges:</span><span><StatusIcon ok={stats.nonManifoldEdges === 0} /> {stats.nonManifoldEdges}</span></div>
          <div style={rowStyle} data-testid="stats-degenerate"><span>Degenerate Faces:</span><span><StatusIcon ok={stats.degenerateFaces === 0} /> {stats.degenerateFaces}</span></div>
          <div style={rowStyle}><span>Duplicate Vertices:</span><span><StatusIcon ok={stats.duplicateVertices === 0} /> {stats.duplicateVertices}</span></div>
          <div style={rowStyle}><span>Unreferenced Vertices:</span><span><StatusIcon ok={stats.unreferencedVertices === 0} /> {stats.unreferencedVertices}</span></div>
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button
            data-testid="auto-repair"
            onClick={onAutoRepair}
            style={{
              padding: '6px 14px', background: '#4a90d9', color: '#fff',
              border: 'none', borderRadius: 4, cursor: 'pointer', fontSize: 12,
            }}
          >
            Auto-Repair All
          </button>
          <button
            data-testid="close-dialog"
            onClick={onClose}
            style={{
              padding: '6px 14px', background: '#555', color: '#ccc',
              border: 'none', borderRadius: 4, cursor: 'pointer', fontSize: 12,
            }}
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}

export type { MeshStats };
